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.
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.
Share Improve this question edited Apr 14, 2021 at 0:06 informatik01 16.4k11 gold badges78 silver badges108 bronze badges asked Jul 30, 2010 at 13:37 ShaozShaoz 10.7k26 gold badges75 silver badges100 bronze badges 2- 1 Not to be pedantic, but jQuery is JavaScript. – Matt Ball Commented Jul 30, 2010 at 14:24
- 2 Yes I know that, but I didn't want to write a long sentence that explains how jquery derives from javascript and that I don't mind whether the code should be long using javascript or short using jquery, just like I'm doing right now... – Shaoz Commented Jul 30, 2010 at 15:21
3 Answers
Reset to default 7It 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');
As far as I know, there isn't a sure fire way to detect if a browser window is minimized, but if you want to detect for the maximized state, try:
function CheckWindow() {
var A = screen.availWidth;
var AA = window.outerWidth;
var B = screen.availHeight;
var BB = window.outerHeight;
if (A == AA && B == BB) {
// Window is maximized
}
else {
// Window is not maximized or in full screen
}
}<body onresize = "CheckWindow();" onload = "CheckWindow();">This takes into consideration the browser toolbar, and works for me in Chrome and Edge on my PC. I have not tried it in the other browsers or on mobile devices. Hope it helps.
Nowadays, it is relatively easy to do in modern browsers such as Edge, Chrome and Opera. IE and Firefox need more cumbersome workarounds. FF also can't show minimized state.
Feel free to check it in your browser via snippet below. Compatibility is limited by its support of window.outerWidth and window.screenX functions (IE9+, Opera 12, Chrome 1), earlier browsers still can handle it, but it takes major work giving minor usability.
The check is intentionally performed in timed-out onCheck() function, 3 seconds after the button is clicked. This allows you to click the button, minimize browser, and then restore it to see the result. This works at any zoom level. Note that in fullscreen mode it shows normal state. If your device/OS supports split screen (Windows 7+ etc), we can check it as well (little bonus). Please kindly test it in your browser, and leave some comments below.
function onCheck() {
if (isMaximized()) window.alert('MAXIMIZED');
else if (isMinimized()) window.alert('MINIMIZED');
else if (isSplitScreen()) window.alert('SPLIT SCREEN');
else window.alert('NORMAL');
}
function isMaximized() {
return (window.screenX === 0) && (window.screenY === 0) &&
(window.outerWidth === window.screen.availWidth) &&
(window.outerHeight === window.screen.availHeight);
}
function isMinimized() {
return (window.screenX < -window.screen.availWidth) &&
(window.screenY < -window.screen.availHeight);
}
function isSplitScreen() {
return (window.screenY === 0) &&
((window.screenX === 0) || (window.screenX === window.outerWidth)) &&
(window.outerWidth === window.screen.availWidth / 2) &&
(window.outerHeight === window.screen.availHeight);
}<button onclick="window.setTimeout(onCheck,3000)">Check</button>
<p>Click the button and minimize, maximize or split (Win7+) the window.<br>
The result pops up in 3 seconds.</p>