jQuery window.width 'if' 'else if' 'else' statment not working

Question

function changeDrop() {
 var windowSize = $(window).width();

    if (windowSize > 450) {

              $('.menu-361').hover(
      function() {
            $('.menu-361 ul').show();
      },

      function() {
            $('.menu-361 ul').hide();
      });

        console.log("screen width is greater than 450px");

    }
    else if (windowSize <= 450) {

        $('.menu-361').on('hover', function () {
           //mousehover
         } , function(){
           //mouseout
         } );


        $('#dropbutton').click(function() {
        $('.menu-361 ul').toggle();
        $('#dropbutton p').toggle();
        });

        console.log("screen width is less than 450px");
    }

    else {}

 }

  changeDrop();
  $(window).resize(changeDrop);

After the if statment is true the bit of code is loaded in the memory i think. And when the window.width is <= 450 the code from the if statment or > 450 still runs. Any idea how to make this work?

http://tidalbania.com/tidnew/

The link in witch the demo is on the real site!

If you need a fiddle i can update the question.

If you call changeDrop() on window resize, you have to unbind previous handlers, or better set hanlder outside any other hanlder (except maybe ready one) and filter widow width inside it instead. BTW, your last else statement could never be reached here — A. Wolff
– A. Wolff, Commented Mar 14, 2014 at 18:56
The idea is when the browser windows is less than 450px the function hover still fires when the page gets loaded at less than 450px it does not but once it goes beyond 450px and back it still runs..! If i was clear! — Alen Saqe
– Alen Saqe, Commented Mar 14, 2014 at 18:56
Once you bind an event handler, it's not magically removed. Check the window width inside the event handler instead. — adeneo
– adeneo, Commented Mar 14, 2014 at 18:57
@AlenSaqe so see my previous comment, don't nest handlers, filter width inside click/hover handlers — A. Wolff
– A. Wolff, Commented Mar 14, 2014 at 18:57

Ketola · Accepted Answer · 2014-03-14 19:14:06Z

2

As others have mentioned, you should not bind event handlers on every change. This should suffice:

$('.menu-361').hover(hoverInOut);

$('#dropbutton').click(function() {
    $('.menu-361 ul').toggle();
    $('#dropbutton p').toggle();
});

function hoverInOut(event) {
    var windowSize = $(window).width();
    if (windowSize > 450) {
        if(event.type == "mouseenter")
            $('.menu-361 ul').show();
        else
            $('.menu-361 ul').hide();
    }
}

answered Mar 14, 2014 at 19:14

Ketola

2,76720 silver badges21 bronze badges

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

3 Comments

Alen Saqe Over a year ago

Yea thanks for the code. I was reading the comments and trying to make it work i'm not an expert at jQuery tho. Kudos to you

Ketola Over a year ago

Glad to hear it's working for you now. Do note that the #dropbutton can go "out of sync" if the menu is opened, screen is resized, and .menu-361 is then hovered. Resizing the window back down will have the button in wrong state. I considered this a minor issue, though, so I didn't handle reseting the button in hoverInOut()

Alen Saqe Over a year ago

yea that might be an issue if someone plays around all the time, i noticed it even before. Thought its really minor. I will take the challange and try to work it out myself. Thanks for the heads up and the answer.

Niet the Dark Absol · Accepted Answer · 2014-03-14 18:55:10Z

2

Well for starters, your code is essentially if A, else if not A, else which is redundant. Just if A, else is fine.

That aside, you are attaching a new event handler for every single time your code runs. That's a lot of event handlers! You are also never detaching your handlers, instead trying to re-add blank ones.

Take a moment to learn how event handlers work ^_^

answered Mar 14, 2014 at 18:55

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

1 Comment

Alen Saqe Over a year ago

I was just using if and else before but i tried it with different width values thats why the else if statment is there and the else is empty. Forgot to clear that out. I'll try to get it working based on your comments.

Alen Saqe · Accepted Answer · 2014-03-14 19:13:04Z

function changeDrop() {
 var windowSize = $(window).width();

    if (windowSize > 450) {
              $('.menu-361').hover(
      function() {
            $('.menu-361 ul').show();
      },

      function() {
            $('.menu-361 ul').hide();
      });

        console.log("screen width is greater than 450px");
    }

    else {          
        $('.menu-361').unbind('mouseenter mouseleave');

        $('#dropbutton').click(function() {
        $('.menu-361 ul').toggle();
        $('#dropbutton p').toggle();
        });

        console.log("screen width is less than 450px"); 
    } 
 }

 changeDrop();
 $(window).resize(changeDrop);

I think i fixed the issue adding the unbind ('mouseenter mouseleave') when width is less than 450px by removing the binded hover function.

Is this the way it should be done?

Collectives™ on Stack Overflow

jQuery window.width 'if' 'else if' 'else' statment not working

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related