Menu
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.
425
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');
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
