javascriptmaximize-window

Detect browser window "Maximized" / "Minimized "with JavaScript

When the user clicks the "Maximized"/"Restore" or "Minimized" buttons of the browser window, 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 window, 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.

Solution

  • 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');