About design and nearby

Detecting Browser Window Size/ Resize with jQuery

Posted: November 8th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , , | 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:

  1. $(window).width(); // returns width of browser viewport
  2. $(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:

  1. jQuery(document).ready(function(){
  2.     if (jQuery(window).width() < 900) {
  3.         jQuery(".top-menu").css("display", "none");
  4.     }  
  5. });

But the solution is not full without

  1. $(window).resize(function() {
  2.   // This will execute whenever the window is resized
  3.   $(window).width(); // New width
  4. });

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:

  1. jQuery(document).ready(function(){
  2.     if (jQuery(window).width() < 900) {
  3.         jQuery(".top-menu").css("display", "none");
  4.     }  
  5. });
  6. jQuery(window).resize(function () {
  7.         if (jQuery(window).width() < 900) {
  8.             jQuery(".top-menu").css("display", "none");
  9.         }
  10. });

Live example: check the example >>

Share Button

Check Related Posts:

4 Comments on “Detecting Browser Window Size/ Resize with jQuery”

  1. 1 Kamil said at 11:19 pm on March 10th, 2015:
    Reply  |  Quote

    Hi,

    nice tip but when I change window size it’s not working. I have to refresh site. What is wrong?

  2. 2 julia said at 8:55 pm on March 19th, 2015:
    Reply  |  Quote

    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.

  3. 3 Knut said at 6:19 pm on September 25th, 2015:
    Reply  |  Quote

    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”);
    }
    });

  4. 4 Alpesh Panchal said at 6:25 am on May 16th, 2018:
    Reply  |  Quote

    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.


Leave a Reply


  • seven − 3 =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now