Detecting Browser Window Size/ Resize with jQuery
Posted: November 8th, 2012 | Author: Julia | Filed under: Tips and Tricks | Tags: browser window size, jQuery, resize window, responsive design | 4 Comments »Once I have been playing around with the responsive design for a WordPress-powered website. I should detect window/ browser size with jQuery and hide the certain element if the width is less then 900px (yes, I do know how to use CSS Media Queries to adapt pages style to various display widths and use em units and percentages and min-width and max-width in my CSS to get a proper flexible layout or how to check the user agent, it was just a special case).
So I decided to get the current computed width via jQuery:
-
$(window).width(); // returns width of browser viewport
-
$(document).width(); // returns width of HTML document
The method above finds the width of the window or document. So I hide .top-menu if the width of browser viewport is less then 900px:
-
jQuery(document).ready(function(){
-
if (jQuery(window).width() < 900) {
-
jQuery(".top-menu").css("display", "none");
-
}
-
});
But the solution is not full without
-
$(window).resize(function() {
-
// This will execute whenever the window is resized
-
$(window).width(); // New width
-
});
For my case a way of displaying a custom sidebar (.top-menu) on my website only if the users screen size is larger then 900px:
-
jQuery(document).ready(function(){
-
if (jQuery(window).width() < 900) {
-
jQuery(".top-menu").css("display", "none");
-
}
-
});
-
jQuery(window).resize(function () {
-
if (jQuery(window).width() < 900) {
-
jQuery(".top-menu").css("display", "none");
-
}
-
});
Live example: check the example >>
Hi,
nice tip but when I change window size it’s not working. I have to refresh site. What is wrong?
Kamil, in my example code works if the width of browser viewport is less then 900px. You can check if and when jQuery runs with alert(‘my alert!;);
Say, this way:
jQuery(document).ready(function(){
if (jQuery(window).width() < 900) { alert('my alert!;); jQuery(".top-menu").css("display", "none"); } }); If you do not see the alert message, then the width of your viewport is more then 900px. You can set any width you need to test your case.
This here works right away with Firefox 35 and IE8.
Shows AND hides a horizontal navigation embedded in at 900px screen width threshold when varying the browser window. Great basic coding of yours which I only kind of doubled in its functionality. Thanks!
$(window).resize(function() {
// This will execute whenever the window is resized
$(window).width(); // New width
});
/* hide navigation when screen is 900px and less*/
jQuery(document).ready(function(){
if (jQuery(window).width() < 900) {
jQuery(".ddsmoothmenu").css("display", "none");
}
});
jQuery(window).resize(function () {
if (jQuery(window).width() 901) {
jQuery(“.ddsmoothmenu”).css(“display”, “block”);
}
});
jQuery(window).resize(function () {
if (jQuery(window).width() > 901) {
jQuery(“.ddsmoothmenu”).css(“display”, “block”);
}
});
Hi,
This code is working, but when page have scrollbar than please check with window resize.
like bellow..
when full window size (with scrollbar) is 916px, div (.top-menu) going to hide but your JQ take inner width without scrollbar.