CODEWITHSUNDEEP
jquery
frog
frog

Reputation: 23

Enable/Disable jquery call on resize

I am building a responsive site, and as such require different functionality depending on the size of the window.

So if the screen is less than 964px wide, I want to disable my jquery call. If it's more than 964px, I want to enable that same call.

This is what I got: http://jsfiddle.net/frogfacehead/2Mdem/1/

Problem is, the disable part doesn't work. Once it's been enabled, it doesn't disable even when the screen falls below 964px.

Any ideas?

Upvotes: 2

Views: 630

Answers (3)

greaterweb
greaterweb

Reputation: 571

The first problem is you are loading up a queue of hover/animations bindings to .test based on your resize event binding.

Your implementation could be improved (see below) but if you want to fire a function call when resize is complete, consider the following.

var resizeTimeout;
$win.resize(function() {
  clearTimeout(resizeTimeout);
  // handle normal resize as needed
  resizeTimeout = setTimeout(function() {
    // handle after finished resize
    checkwidth($win.width());
  }, 250); // delay by quarter second
});

You may consider this approach:

// pull hover binding out, setup once to prevent building up queue
$(".test").hover(function() {
  if( $(".test").data('annimate') ){
    $(this).animate({
      width: "100px"
    });
  }
}, function() {
  if( $(".test").data('annimate') ){
    $(this).animate({
      width: "50px"
    });
  }
});

function checkwidth(mywidth) {
  if (mywidth > 964) {
    $body.html('Viewport is <strong>' + mywidth + 'px</strong> wide. <span class="enable">[Enable Animation]</span>');
    // set flag to allow annimation
    $(".test").data('annimate', true);
  } else {
    $body.html('Viewport is ' + mywidth + 'px wide. <span class="disable">[Disable Animation]</span>');
    // set flag to prevent annimation
    $(".test").data('annimate', false);
  }
}

Upvotes: 1

anony
anony

Reputation: 41

When the screen size becomes greater than the 964px your are binding an animation to the .test element so to unbind it you need to do like this

else {
        $body.html('Viewport is ' + mywidth + 'px wide. <span class="disable">[Disable Animation]</span>');
        $(".test").unbind("hover");
    }

Upvotes: 3

Brad
Brad

Reputation: 163593

Rather than using all those resources to attach the hover function to that element as the size of the page changes, why not check the size of the page during those callback functions?

$(".test").hover(function() {
            if (width > 964) {
                $(this).animate({
                    width: "100px"
                })
            }
        }, etc.

The problem is that you add a function to handle the hover event, but that function never gets removed. You are repeatedly adding it, as the width of the page changes. Just add it once, and then do your checks for what should happen within the handler of that function. As a bonus to working correctly, it should be a bit more efficient.

Upvotes: 2

Related Questions