JS - Window width function not working

Question

So I have a responsive navigation menu. a button is used to toggle the menu in and out. This is working fine.

I added an exception, where if the window exceeds a certain width, the menu closes, however this is not working at all. I can't find what is wrong with this code.

JS:

$(document).ready(function(){
    $(".menubutton").click(function(){
        $(".respmenu-gen").toggleClass("respmenu-opn respmenu-cls");
    });
    if ($(window).width() > 767) {
        $(".respmenu-gen").removeClass("respmenu-opn").addClass("respmenu-cls")
    };
});

jsfiddle: https://jsfiddle.net/76amgsb8/

Thank you!

yup: <meta name="viewport" content="width=device-width, initial-scale=1.0" /> — Arman Haque
– Arman Haque, Commented May 10, 2016 at 14:29
Are you only concerned with the behavior occurring on page load? — tom
– tom, Commented May 10, 2016 at 14:32
Put in some alerts within your document ready code to check if its actually getting there (or console.log()) and also (in Firefox) use Ctrl + Shift + J to view the error log. It will show you if other parts of your Javascript are stopping it working. — Ukuser32
– Ukuser32, Commented May 10, 2016 at 14:32

gdyrrahitis · Accepted Answer · 2016-05-10 15:10:10Z

3

You should use the window.resize() method. Check it out here.

What you essentially do here is when content loads you check the width of window, just once. You should be bound on the resize event.

So, you can essentially do the following:

$( window ).resize(function() {
  var viewportWidth = $(window).width();
  if (viewportWidth > 767)
      $(".respmenu-gen").removeClass("respmenu-opn").addClass("respmenu-cls")
});

$(document).ready(function(){
    $(".menubutton").click(function(){
        $(".respmenu-gen").toggleClass("respmenu-opn respmenu-cls");
    });
});

If you are bound to work with JavaScript about responsiveness, I would suggest to use the window.matchMedia(mediaQueryString) way though, as relying on jQuery resize() won't give you exact results. window.matchMedia() is more powerfull and you can also benefit from familiar CSS3 media queries. https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

Update

Should always rely on CSS3 media queries though and not JavaScript (except you want to achieve something that is not possible through CSS and the only workaround is JavaScript).

edited May 10, 2016 at 15:10

answered May 10, 2016 at 14:37

gdyrrahitis

6,0183 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Arman Haque Over a year ago

aha! yes perfect. resize() does the trick! Wouldn't have thought of it......looking into the matchMedia() way. Seems powerful! will definitely use in future projects

Ukuser32 Over a year ago

Does this load on the initial page load though?

yezzz Over a year ago

this can also be done with css media queries, for example use it to set css to .respmenu-opn. As you don't change classes an open menu will close/reopen as you raise/lower window width: jsfiddle.net/76amgsb8/1

gdyrrahitis Over a year ago

Of course this can be done with CSS media queries, the OP's question though is about JavaScript

yezzz Over a year ago

it is tagged with CSS though ... but I should have put the comment under the question

rafahell · Accepted Answer · 2016-05-10 14:32:52Z

-1

use the code below:

 var window_width = $(window).width();
if (window_width < 767) {
    $(".respmenu-gen").removeClass("respmenu-opn").addClass("respmenu-cls");
}

answered May 10, 2016 at 14:32

rafahell

3151 silver badge7 bronze badges

2 Comments

Arman Haque Over a year ago

looked promising...but alas, no success

rafahell Over a year ago

insert the full code in jsfiddle or codepen to get a better help

Collectives™ on Stack Overflow

JS - Window width function not working

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related