Detect browser window Maximized/Minimized with Javascript

Question

Hi All

When the user clicks the Maximized/Restore Down or Minimised buttons of the browser, is there a way to keep track of these events with javascript? Are there any appropriate event or property to use?

I want that when the user clicks the 'maximized' button at the top-right of the browser, the webpage should stretch to a specific width and when the browser is in the resizable mode, the webpage is resizable.

Please can someone help me in this? I don't mind either javascript or jquery.

Thanks in advance.

Answer 1

It sounds like what you want is a layout that resizes when the browser is resized but only up to a maximum width.

If that's the case you can either do it in CSS or in JavaScript.

Imagining that your content is in an element like:

<div class="container"> -content here- </div>

My preferred option would be to use CSS as follows:

.container{
    max-width: 1200px;
    width: 100%;
}

If you need to support IE6 (which doesn't support max-width) you can try using an expression in the IE6 CSS:

.container{
    width:expression(document.body.clientWidth > 1200 ? "1200px" : "100%" ); /*IE6*/
}

If you want to use JavaScript: you could just resize your elements in the window's resize event:

$(window).bind('resize', function() {
    // resize $('.container').width() based on $(window).width()
});

You could initially trigger that logic using

$(window).trigger('resize');