How to zoom content of a web page?

Question

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?

Answer 1

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.

Answer 2

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...