Setting style in JQuery using JavaScript variable

Question

I can't get this following code sample working

var iZoomValue = Math.round(window.innerWidth/12.5);

$('body').css("zoom",iZoomValue);

Any suggestions what am I doing wrong over here ?

More inormation about CSS Zoom

What are you trying? Do you know what zoom css property do? — antyrat
– antyrat, Commented May 10, 2012 at 12:13
@antyrat. I don't... What does it do? Is it a real property? — gdoron
– gdoron, Commented May 10, 2012 at 12:14
Are you testing in a browser which supports zoom? (if there exists any). — Felix Kling
– Felix Kling, Commented May 10, 2012 at 12:14
zoom is an IE only css property. are you testing the site in a fferent browser? try using a cross browser compatible property. What is it your trying to do? (good point Felix) — atmd
– atmd, Commented May 10, 2012 at 12:19
@DAVIEAC If its IE only property then why does it works in Chrome when I try to use $('body').css("zoom", 82); ? — skos
– skos, Commented May 10, 2012 at 12:21

Jamie Dixon · Accepted Answer · 2012-05-10 12:19:14Z

1

Make sure that your code is being fired when the document is ready:

$(document).ready(function(){
 // code here
});

Remember that zoom is a fairly new feature in the CSS3 spec and isn't supported by all browsers at this time.

Here's a working example (works for me in Chrome)

answered May 10, 2012 at 12:14

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Or even shorter: $(function() { ... });

Nathan Russell · Accepted Answer · 2012-05-10 12:22:43Z

0

Not sure that doing it in jQuery document.ready will solve it, as the OP has said that it works if he uses a hard coded value:

$('body').css("zoom","82");

My get feel is that either iZoomValue is not being set to what you think it is - perhaps an alert or console.log will help assert this?

Or that the jQuery css method accepts string parameter values (as in your hard coded example). iZoomValue will be a number, so the result will be

$('body').css("zoom",82);

It might be worth using a hard coded example with an integer as the param to assert this.

Hope this helps

answered May 10, 2012 at 12:22

Nathan Russell

3,7075 gold badges33 silver badges51 bronze badges