How to resize an HTML document dynamically?

Question

How can I to resize an HTML document dynamically after clicking the button with JavaScript?

There is a "site-wrapper" div that decreases with transform: scale() after clicking the menu button. But the height of the document before clicking remains. This is how it looks:

$('.hamburger').click(function(){
    $(this).toggleClass('is-active');
    if ($(this).hasClass('is-active')) {
        $('.site-wrapper').css('transform', 'scale(0.5)');
        $('.top-line').css('position', 'relative');
        $('header').css('margin-top', '0');
    }
    else{
        $('.site-wrapper').css('transform', 'scale(1)');
    }
});

Answer 1

So the thing is transform: scale() is just for visual effect and do not actually resize the element. Follow the box model in inspect element to confirm the same.

So a hack to what you need could be

1. Add an immediate wrapper element to the .site-wrapper - (say .fluid-site-wrapper).

2. Add the style ruletransform-origin: top; to the .site-wrapper.

3. While applying the transform: scale() rule to the .site-wrapper, also decrease the height of the .fluid-site-wrapper and vice-versa.

which would change your code to:

$('.hamburger').click(function(){
    var $fluidSiteWrapper = $('.fluid-site-wrapper');
    $(this).toggleClass('is-active');
    if ($(this).hasClass('is-active')) {
        $('.site-wrapper').css('transform', 'scale(0.5)');
        $('.top-line').css('position', 'relative');
        $('header').css('margin-top', '0');
        $fluidSiteWrapper.css("height",$fluidSiteWrapper.height()/2); // if scale if 0.5
    }
    else{
        $('.site-wrapper').css('transform', 'scale(1)');
        $fluidSiteWrapper.css('height, '');
    }
});

I would further suggest you go with adding/removing class in place of adding/removing inline styles. Also please study about chaining in jQuery and DOM Caching.