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

Answer 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)

Answer 2

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