/    Sign up×
Community /Pin to ProfileBookmark

zoom and scale cross browser compadibility

Copy linkTweet thisAlerts:
Jan 27.2013

I have this working in IE and Chrome: [B]document.getElementById(‘footer’).style.zoom=zoomSize/850;[/B]
and I need this to work in Opera, Firefox, and Safari, so I have this:
[B]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);[/B]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.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sup3rkirbyJan 27.2013 — 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.
<i>
</i>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)+")";
Copy linkTweet thisAlerts:
@eteptLahroorpJan 27.2013 — Matchless phrase ?
Copy linkTweet thisAlerts:
@87654321authorJan 27.2013 — works wonderfully.
Copy linkTweet thisAlerts:
@grumpyOleManJan 28.2013 — [B]If I may be so bold[/B]

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.
Copy linkTweet thisAlerts:
@87654321authorJan 28.2013 — Thanks. I have not used that before but it looks pretty straight forward.
×

Success!

Help @87654321 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...