jQuery Window Width

jquery window width, you’ll need it if you’re working with Responsive Design and/or need to figure out the width of the browser Window? Are you using a responsive design layout and using viewport, but need a way to determine window width? jQuery width() and jQuery resize() can help.

Responsive Design

With so many devices able to access the internet, Responsive Design is becoming a necessity.   Smart phones, tablets, laptops, and desktop computers have different viewable areas. Viewport is the window size of the device. We’ll use jquery width and resize functions to determine the window width of the screen thus aiding us in our Responsive Design.

To determine the browser window width and if it gets resized we’ll use:

  • jquery width
  • jquery resize
  • window

jQuery Window Width Determined

jQuery .width() returns a numerical value only, i.e.325.  The value is in pixels.  However, .css(width) will return the number and units, i.e. 325px.   We want to use jQuery window width since we’ll test for numerical values later.

Window vs. Document vs. Screen

Why window width?  The window “holds” the document. Because the document is what gets loaded into the Window object we’ll use $(window).width().  I also use  jquery window width instead of screen width.  If someone doesn’t have their browser window maximized to full screen then it only makes sense to get the width of the window size they are using and not the screen.

 

jQuery Window Resize

What happens if the window is resized?  Luckily jQuery has a function to test if an object gets resized.  The code below will show the window width when resized.

jQuery Window Width

The code below will use jQuery window width to show the initial screen width, but not once it’s resized.

jQuery Window Width Determined Initially and When Resized

We’ll put it all together here.  We’ll use jQuery window width and resize as we did above.  I will provide the HTML to be manipulated further below.

jQuery Window Width HTML

Below is the HTML required. We use the jQuery / javascript code above to manipulate the HTML code below.

Search Terms:
jquery width, jquery window, jquery window width, jquery resize, jquery window resize, jquery resizable, responsive design, browser size, javascript window width, javascript window size, javascript window resize, javascript window.

5 thoughts on “jQuery Window Width – Browsers and Responsive Design

  1. Pingback: Responsive jQuery Vertical Menu - Surfing Success

  2. Pingback: CSS Center - CSS Centering of an element - Tutorial - Snippet

  3. “jQuery Window Width – Determine Browser Window Size, Responsive Design” was a extremely great
    blog post, . I hope you keep authoring and I’m going to keep on browsing! Thanks ,Cheryl

    Reply
  4. It works great. I think it is time for me to learn the jQuery. I spent my last two hours trying the below code to work with ie8, but yours solved my problem in a second.

    Thanks again,
    Sedat

    —–
    (Not compatible with ie)
    if ($(window).width()>960) {
    $(“#mmenu”).css(‘display’, ‘block’);
    }

    Reply

Leave a reply

required

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">