JQuery plugin to simulate page zoom / zoom in a browser?

Question

I am looking for a jquery plugin to create a text scaling / page enlargement effect (e.g. FF 3 ctrl ++ / ctrl--) that can ...

• Resize text using a different font size setting (i.e. scaling text / page enlargement)

• works with complex HTML + CSS structure

Any recommendation here?

Answer 1

Set contentWidthto the required minimum visible width.

jQuery(document).ready(function(){
    jQuery(window).bind('resize load', function(){
        contentWidth = 1010;
        jQuery('body').css('zoom', jQuery(window).width() / contentWidth);
    });
});

Tested with Chrome.

Answer 2

, - body , . body { font-size: 13pt; }, , , . .postTitle { font-size: 120%; }.

, +/- -:

$('#enlargeText').click(function () {
    $(document.body).css('font-size', $(document.body).css('font-size') * 1.5);
}

, body.

, ( ), , :

$('#enlargeText').click(function () {
    $('img').each(function () {
        this.width *= 1.5;
    })
}

CSS, . AFAIK, CSS 3, , . , / .

Answer 3

You can do it like this. For subsequent pages, you must connect to the cookie, but

var currZoom = $("body").css("zoom");
if(currZoom == 'normal') currZoom=1; // For IE

$(".zoomIn").click(function(){
    currZoom*=1.2;
    $("body").css("zoom",currZoom);
});
$(".zoomOff").click(function(){
    jQuery("body").css("zoom",1);
});
$(".zoomOut").click(function(){
    currZoom*=.8;
    $("body").css("zoom",currZoom);
}); 

HTML

<span class="zoomIn" style="font-size:120%">A</span>
<span class="zoomOff">A</span>
<span class="zoomOut" style="font-size:80%">A</span>