Question

161

Detect browser window Maximized / Minimized with JavaScript

rated 0 times [ 162] [ 1] / answers: 1 / hits: 43765 / 14 Years ago, fri, july 30, 2010, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

emilianoc

Add To Favorites

Follow

Total Points: 568

Total Questions: 109

Total Answers: 99

Location: Oman

Member since Sat, Jan 7, 2023

1 Year ago

answered 14 Years ago sonja · Accepted Answer

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