How to zoom div content by using javascript?

Question

0.00/5 (No votes)

See more:

How to zoom div content by using javascript?I am adding the my code below.But it is not supporting all browsers.
<html>
<head>
<script type="text/javascript">

C#

function zoomings(){
var val=document.getElementById("zooming").value;

                //alert(val);
                searches.style.zoom=val;

                searches.style.moz.zoom=val;
            }

</script>
</head>
<body>

XML

<span>Zoom</span><select id='zooming' onchange="zoomings()">
        <option value="25%">25%</option>
        <option value="50%">50%</option>
        <option value="75%">75%</option>
        <option value="100%" selected="selected">100%</option>
        <option value="150%">150%</option>
        <option value="200%">200%</option>
        <option value="250%">250%</option>
        <option value="300%">300%</option>
    </select>

</body>
</html>

Posted 24-Mar-13 20:13pm

Deepthi.21456

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pallavi Waikar · Answer 1 · 2013-03-24T20:42:00

Solution 1

if searches is your div id then try following code

C#

function zoomings(optionSel)
{
 var OptionSelected = optionSel.selectedIndex;
var val = optionSel.options[OptionSelected].text;
//alert(val);
var div = document.getElementById ("searches");
div.style.zoom = val;
}

XML

<span>Zoom</span><select id='zooming' onchange="zoomings (this);">
        <option value="25%">25%</option>
        <option value="50%">50%</option>
        <option value="75%">75%</option>
        <option value="100%" selected="selected">100%</option>
        <option value="150%">150%</option>
        <option value="200%">200%</option>
        <option value="250%">250%</option>
        <option value="300%">300%</option>
    </select>

Posted 24-Mar-13 20:42pm

Pallavi Waikar

Updated 24-Mar-13 21:25pm

v4

Comments

Deepthi.21456 25-Mar-13 3:01am

It is not working?

Pallavi Waikar 25-Mar-13 3:19am

check updated answer

Deepthi.21456 25-Mar-13 3:35am

It is working in chrome.Remaining browsers it is not working?

Pallavi Waikar 25-Mar-13 3:40am

then try this link for jquery http://stackoverflow.com/questions/13931225/how-to-zoom-div-content-using-jquery

Deepthi.21456 25-Mar-13 3:34am

that is also not working?

Pallavi Waikar 25-Mar-13 3:38am

is ur div is like this <div id="searches">zoom content</div>...then it must work

Deepthi.21456 25-Mar-13 3:40am

I tried like above.In chrome it is working.Mozilla it is not working.

Pallavi Waikar 25-Mar-13 3:55am

also check this links http://stackoverflow.com/questions/7175766/object-style-zoom-property-not-working-in-firefox and http://stackoverflow.com/questions/4049342/how-can-i-zoom-a-div-in-firefox-and-opera

Deepthi.21456 25-Mar-13 4:00am

How to give that css in javascript.

Pallavi Waikar 25-Mar-13 4:52am

try this for firefox
var optionT = document.getElementById ("zooming");
var len=optionT.options[OptionSelected].text.length-1;
var val = optionT.options[OptionSelected].text.substring(0,len)/100;
var div = document.getElementById ("searches");
var dd="scale("+ val +")";
div.style.MozTransform = dd;
div.style.MozTransformOrigin = "0 0";

now u have check browser if chrome then first code for other use this ...for more search on google for now i can help u up to this only

Deepthi.21456 25-Mar-13 5:01am

what is optionT,OptionSelected in the above code

Pallavi Waikar 25-Mar-13 5:04am

check updated above comment

Deepthi.21456 25-Mar-13 5:12am

Plz check below code once

<html>
<head>
<script type="text/javascript">
function sample(a){
alert(a);
sampleDiv.style.zoom=a;
document.getElementById('sampleDiv').style.MozTransform = "scale("+a+")";
document.getElementById('sampleDiv').style.OTransform = "scale("+a+")";
document.getElementById('sampleDiv').style.WebTransform = "scale("+a+")";
document.getElementById('sampleDiv').style.overflow="scroll";

}
</script>
</head>
<body>

<select önchange="sample(this.value)" style="float: left;width: 100%;">
<option value="1">100%</option>
<option value="1.5">150%</option>
<option value="2">200%</option>
<option value="3">300%</option>
</select>
<div id="sampleDiv" style="float: left;width: 600px; background-color: Gray;margin: 10px;height: 300px;">
Zoom Me
</div>
</body>
</html>
If it exceeds the div height and width overflow should come.But it is not working.

Pallavi Waikar 25-Mar-13 5:29am

try this code....

<script type="text/javascript">
function zoomings(optionSel)
{

if (navigator.userAgent.indexOf("Firefox")!=-1)
{
var OptionSelected = optionSel.selectedIndex;
var optionT = document.getElementById ("zooming");
var len=optionT.options[OptionSelected].text.length-1;
var val = optionT.options[OptionSelected].text.substring(0,len)/100;
var div = document.getElementById ("searches");
var dd="scale("+ val +")";

div.style.MozTransform = dd;
div.style.MozTransformOrigin = "0 0";
}
else{
var OptionSelected = optionSel.selectedIndex;
var val = optionSel.options[OptionSelected].text;
var div = document.getElementById ("searches");
div.style.zoom = val;
}
}
</script>

<div id="searches">zoom this element</div>
<span>Zoom</span><select id='zooming' önchange="zoomings(this);">
<option value="25%">25%</option>
<option value="50%">50%</option>
<option value="75%">75%</option>
<option value="100%" selected="selected">100%</option>
<option value="150%">150%</option>
<option value="200%">200%</option>
<option value="250%">250%</option>
<option value="300%">300%</option>
</select>

Member 11839047 16-Jul-15 1:48am

It's Working On FireFox thnxs pallavi

Member 11839047 16-Jul-15 1:44am

It's Working in Firefox thnx pallavi

Deependra Khangarot · Answer 2 · 2013-03-24T20:44:00

Solution 2

Hi Deepthi,

Please refer links given below:

zoom-text

add-magnifying-zoom-tool-zoomer

scrolling-and-zooming-in-a-div

ow-to-zoom-div-content-using-jquery

Don't forget to mark useful responses as Answer if they helped you towards a solution. :)

Posted 24-Mar-13 20:44pm

Deependra Khangarot