How to zoom an entire div?

Question

I'm fooling around with a function right now on this page.

If you click the "who" section the div rotates. I'd like it to zoom and consume the page.

Is this possible? How can this be done?

Answer 1

After it rotates, set its width and height to be the width and height of the page.

$('#who').rotate({
    angle:-90,
    bind: [{
        click: function(){
            $(this).rotateAnimation(0);
        }
    }], // remove the trailing comma here
    callback: function (){
        var $window = $(window);
        $(this).height($window.height()).width($window.width());
    }
});

---

Edit re: OP's comments

$('#who').rotate({
    angle: -90,
    bind: [{
        click: function(){
            $(this).rotateAnimation(0);
        }
    }],
    callback: function (){
        $(this).width(800).height(600);
    }
});

See .height() and .width().

---

Edit #2

With your current CSS, you need to scale the img.

$('#who').rotate({
    angle: -90,
    bind: [{
        click: function(){
            $(this).rotateAnimation(0);
        }
    }],
    callback: function (){
        $('#who > img').animate({height: 600, width: 800});
    }
});

If you change, say, the image's height and width to be 100% then you only need to change the size of the div and the image should scale with it.

$('#who').animate({height: 600, width: 800});