CODEWITHSUNDEEP
jqueryhtml
Ernest Soo
Ernest Soo

Reputation: 194

Jquery window resize with condition not working

I have a function in my jQuery like this:

$(document).ready(function() {
  if($(window).width() < 768)
  {
     $(".dummy").focus(function(){alert("Dummy");})
  }
}

And also:

$(document).ready(function() {
    $(window).resize(function(){
        if($(window).width() < 768)
        {
            $(".dummy").focus(function(){alert("Dummy");})
        }
    }
}

Note: alert("Dummy"); is a representation of my function.

Scenario 1: When I launch my webpage in a browser with a viewport width of more than 768 and focus on .dummy, the alert("Dummy"); is not executed.

Scenario 2: However, if I launch my webpage in a viewport width of less that 768, and then resize the width of the browser to more than 768. The alert("Dummy"); is still executed when .dummy is focused.

Shouldn't it check for the condition if($(window).width() < 768) and not allow alert("Dummy"); to be executed when focused on .dummy?

What can I do ensure that alert("Dummy"); is not executed when focused on .dummy in a situation such as Scenario 2? Taking into consideration that the user might go through Scenario 1.

Upvotes: 0

Views: 77

Answers (1)

vzwick
vzwick

Reputation: 11064

You don't need to set the handler on resize. Just check for the window size at call time:

$(document).ready(function() {
    $(".dummy").focus(function(){
        if ($(window).width() < 768)
        {
            alert('dummy');
        }
    });
});

Upvotes: 5

Related Questions