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

javascript maximize-window
Shaoz picture Shaoz · Jul 30, 2010 · Viewed 37.7k times · Source

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.

Answer

stucampbell picture stucampbell · Jul 30, 2010

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

Related questions

How can I maximize a window?

I've got this trouble and I was wondering if you can help me. I'm trying to maximize the window without showing any button or toolbar, and I wish it works in as much as possibles browsers. Now I can get …

Read More
Maximizing the current window in javascript

Is there a way I can maximize a currently minimized window from Javascript? Here's my situation: I have a series of links that all target the same external window (e.g. "MyNewWindow"). When I click a link, a new window …

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More