Javascript Maximize / Minimize Browser Window Detection

Question

When a user clicks the Maximized / Restore Down or Minimized buttons in a browser, is there a way to track these events using javascript? Is there a suitable event or property to use?

I want that when the user clicks the "maximized" button in the upper right corner of the browser, the web page should stretch to a certain width, and when the browser is in resize mode, the web page can change.

Please help me with this? I am not against javascript or jquery.

Thanks in advance.

Answer 1

It looks like what you want is a layout that changes when the browser is resized, but only to the maximum width.

If this is the case, you can do it in CSS or in JavaScript.

Imagine your content is in an element of type:

<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 does not support maximum width), you can try using an expression in IE6 CSS:

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

If you want to use JavaScript: you can simply resize your elements in a window resize event:

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

You can start this logic first with

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