www.webdeveloper.com
Results 1 to 6 of 6

Thread: zoom and scale cross browser compadibility

  1. #1
    Join Date
    Jan 2013
    Posts
    3

    zoom and scale cross browser compadibility

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    960
    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.
    Code:
    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)+")";
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Nov 2012
    Location
    Russia
    Posts
    6
    Matchless phrase

  4. #4
    Join Date
    Jan 2013
    Posts
    3

    Smile response

    works wonderfully.

  5. #5
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    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.

  6. #6
    Join Date
    Jan 2013
    Posts
    3

    neat...

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles