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, May 10 '12 at 12:13
@antyrat. I don't... What does it do? Is it a real property? — gdoron, May 10 '12 at 12:14
Are you testing in a browser which supports `zoom`? (if there exists any). — Felix Kling, May 10 '12 at 12:14
@antyrat of course, it zooms the element. If I use hardcoded like this `$('body').css("zoom","82");` it works perfectly fine — skos, May 10 '12 at 12:14
@Sachyn Look at this similar question http://stackoverflow.com/questions/2026294/zoom-css-javascript — antyrat, May 10 '12 at 12:17
And does it work with hardcoded `$('body').css("zoom", 82);`? — sp00m, May 10 '12 at 12:17
I am testing in Chrome, it works fine when I use a hardcoded value — skos, May 10 '12 at 12:17
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, May 10 '12 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, May 10 '12 at 12:21
Yes your correct Sachyn. I got saw the facts for my comment on a SO question: http://stackoverflow.com/questions/2026294/zoom-css-javascript maybe the other vendors started to implement it — atmd, May 10 '12 at 12:24

Jamie Dixon · Answer 1 · 2012-05-10T12:19:14.307

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)

edited May 10 '12 at 12:19

answered May 10 '12 at 12:14

Jamie Dixon

score 0 · Answer 2 · answered May 10 '12 at 12:22

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

2 Answers2