zoom and scale cross browser compadibility

[87654321]

I have this working in IE and Chrome: document.getElementById('footer').style.zoom=zoomSize/850;
and I need this to work in Opera, Firefox, and Safari, so I have this:
document.getElementById('footer').style['msTransform'] = scale(zoomSize/850);
document.getElementById('footer').style['MozTransform'] = scale(zoomSize/850);
document.getElementById('footer').style['OTransform'] = scale(zoomSize/850);
document.getElementById('footer').style['transform'] = scale(zoomSize/850);
document.getElementById('footer').style['WebkitTransform'] = scale(zoomSize/850);Can someone please tell me why these are not working? I have to be missing something, but I am unaware of any syntax errors.

Thanks.

[Sup3rkirby]

It looks like the problem is simply the way you are writing the value to set for each transform property. Since scale() is not a javascript function, but rather a CSS3 function it needs to be in quotes, passed to the CSS as a string to be interpreted.

document.getElementById('footer').style['msTransform'] = "scale("+(zoomSize/850)+")";
document.getElementById('footer').style['MozTransform'] = "scale("+(zoomSize/850)+")";
document.getElementById('footer').style['OTransform'] = "scale("+(zoomSize/850)+")";
document.getElementById('footer').style['transform'] = "scale("+(zoomSize/850)+")";
document.getElementById('footer').style['WebkitTransform'] = "scale("+(zoomSize/850)+")";

[eteptLahroorp]

Matchless phrase

[87654321]

works wonderfully.

[grumpyOleMan]

If I may be so bold

Instead of setting the style within JavaScript as used above may I suggest setting a class in the CSS file and then add the class name to the element in JavaScript.

Most modern browsers now support the Html5 classList object and if support for older browsers is required there have been functions developed to handle that as well.

[87654321]

Thanks. I have not used that before but it looks pretty straight forward.