CODEWITHSUNDEEP
javascriptjquery
user3191542
user3191542

Reputation: 29

Responsive jquery click function

i want for specific width, specific click animations but it's not working. Why?

Here an example:

From 0 - 959px > anim1 From 960 - 1279px > anim2 From 1280 - 1699 > anim3 From 1700 - open end > anim4

Here is my Code:

$(document).ready(function(){
if ($(window).width() > 959) {
    $("#mains").click(function(){
    anim1();
    });
}
});

$(document).ready(function(){
if ($(window).width() > 1279) {
    $("#mains").click(function(){
    anim2();
    });
}
});

$(document).ready(function(){
if ($(window).width() > 1699) {
    $("#mains").click(function(){
    anim3();
    });
}
});

$(document).ready(function(){
if ($(window).width() < 1700) {
    $("#mains").click(function(){
    anim4();
    });
}
});

Upvotes: 1

Views: 1210

Answers (5)

nnnnnn
nnnnnn

Reputation: 150050

Read through your existing code and think about what it will do if the window width happens to be 1750:

  • Your first if test with > 959 will be true so it will bind a click handler that does anim1().
  • The second if test with > 1279 will also be true so it will bind another click handler that does anim2().
  • The > 1699 test would also be true, binding a third click handler that does anim3().
  • The fourth if test would be false since it has < rather than >, but in fact for a width of 1750 you want anim4() to run.

So then a click would call the first three animations.

What you need is an if/else if/else if/else structure so that only one of the four animX() functions is used. Also you probably want to do the test inside the click handler so that it uses the window width at the time of the click, not the width at the time the page loads. So:

$(document).ready(function() {
  $("#mains").click(function() {
    var w = $(window).width();
    if (w < 960)
      anim1();
    else if (w < 1280)
      anim2();
    else if (w < 1700)
      anim3();
    else
      anim4();
  });
});

Note that at the beginning of the click handler I've put the $(window).width() into the (imaginatively named) w variable to save having to repeat those two function calls in the else if statements.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You are binding events on the basis of width size. I would recommend to check width in event handler and perform action accordingly

$(document).ready(function () {
    $("#mains").click(function () {
        if ($(window).width() > 959) {
            anim1();
        }
        if ($(window).width() > 1279) {
            anim2();
        }
        if ($(window).width() > 1699) {
            anim3();
        }
        if ($(window).width() < 1700) {
            anim4();
        }
    });
});

Upvotes: 1

Kokozaurus
Kokozaurus

Reputation: 639

It seems you have mistaken the conditionals. Also you can use just one document ready event handler and use an if else if statement to distinguish between cases. The statements should specifically set the width borders. Something like:

if ($(window).width() < 969 ) {
  anim1();
} else if ($(window).width() >= 970 && $(window).width() < 1200) {
  anim2();
}

The widths are as everyone can see examplary.

Except that there could be errors in anim* functions, but those errors would definitely mess up the code.

Upvotes: 1

Nouphal.M
Nouphal.M

Reputation: 6344

Try

$(document).ready(function(){
          if ($(window).width() > 1699) {
                 anim3();
           }else if($(window).width() > 1279){
                 anim2();
            }else if($(window).width() > 959){
                  anim1();
           } 
   });

Upvotes: 0

Kaloyan
Kaloyan

Reputation: 7352

You are binding the animation on $(document).ready() based on the screen size. For example when the DOM is ready and the window width is less than 1700 only the function with anim4() will be used. What you need to do is place the window width check inside a single binding. For example:

$(document).ready(function(){
    $("#mains").click(function() {
        if ($(window).width() < 959) {
            // do something
        } else if  ($(window).width() < 1700) {
            // do something else, etc.
        }
    });
});

Upvotes: 3

Related Questions