CODEWITHSUNDEEP
javascriptdom
FreestyleCoder
FreestyleCoder

Reputation: 11

How to zoom content of a web page?

How to zoom content of a web page? Like for example on familyecho.com you can zoom in and zoom out. How do they do it?

Upvotes: 1

Views: 1367

Answers (2)

Pointy
Pointy

Reputation: 413709

  1. Size everything zoomable with "em" units
  2. Make your zoom Javascript set the "font-size" of the parent zoomable element up and down by percentages

Here's a simple goofy sample: http://gutfullofbeer.net/zoom.html

It uses jQuery but that's of course not necessary.

Upvotes: 1

Java Drinker
Java Drinker

Reputation: 3167

They are likely changing the css attributes for width/height and font size. It looked to me from my brief visit that it was only boxes and text that changed shape.

//jQuery...
$.(function(e) {
    $('#plusButton').click(function() {
        $('#stuffToGrow').css({
          width: function(index, value) {
              return value * 2;
          }, 
          height: function(index, value) {
             return value * 2;
          });
    });
});

You get the idea...

Upvotes: 0

Related Questions