jQuery Plugin to simulate browser page zoom/text zoom?

If you're looking for text zoom, the easiest way to do it would be to specify the base font size on your body in an absolute unit, e.g. body { font-size: 13pt; } and then make everything else use relative units, e.g. .postTitle { font-size: 120%; }.

Then, if you have +/- zoom links or whatnot:

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

This will increase all font sizes that are relative to body.

However, if you want to simulate page zoom (as opposed to text zoom), you would also have to either specify image dimensions in relative units, or loop through all images and resize them accordingly:

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

But then you are still stuck with the CSS background images, which have not been resized. AFAIK, that is only possible using CSS 3 that is not widely supported, or by having resized versions of all those images on the server. You could then simply activate a new stylesheet that references those bigger/smaller images.

It is my last solution... (too many lines and complex inheritance)Actually I am working for a jquery plugin as the solution, but It may not a good solution as it using the * selector...you can take a look here:http://jsbin.com/egutu3/but I think your post will remind all css author to pay special attention when they want their text to be resizable. Thank you!

vinci 2010-02-20 05:29:03

Your syntax is wrong, it should be: $.each('img', function () { this.width *= 1.5; }

Rick 2010-08-15 01:20:13

@Rick: there are two `each` functions in jQuery. The one I used <http://api.jquery.com/each/> calls the specified function for each element in the jQuery set, i.e. for each `img`. The second one <http://api.jquery.com/jQuery.each/> which you seem to be referring to, calls a function for each element of an array or property of an object. However, `'img'` is a fixed string, not a collection of images. Please explain your downvote and how my example is doing the wrong thing, and how yours is not. (Note that I did have a missing closing ")", which has now been added.)

janmoesen 2010-08-16 08:57:20

ansaurus

tags:

views:

answers:

jQuery Plugin to simulate browser page zoom/text zoom?

related questions