JavaScript/HTML/CSS: Zooming

Question

Let's say I've got a page with a div, and a button. When you click the button, the div should be zoomed in on. In other words, if that div was 100px, when you zoom, it should then become, say, 200px. And all the children of this div should also be doubled in size.

What's the best way to do this?

My understanding is that there's a CSS zoom, but only in IE--it's not part of any CSS standard.

Answer 1

You might want to look into the jQuery plugin Zoomooz: http://janne.aukia.com/zoomooz/

Answer 2

You should use CSS3's transform: scale().

See: http://jsfiddle.net/Favaw/ - (I used jQuery for convenience, but it's not a requirement)

.zoomedIn2x {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);

    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

If you need to support older versions of IE than 9, then generate .zoomedIn2x using this tool:

• http://www.useragentman.com/IETransformsTranslator/index.html

If you want to do this more dynamically (such as other levels of zoom), then instead use cssSandpaper.