CODEWITHSUNDEEP
javascriptjquery
Lanti
Lanti

Reputation: 2339

Unbinding a Jquery plugin completely from DOM on viewport resize

I have a slick slider for my images:

// Slick slider - Responsive
$(window).on('resize', function() {
  if ($(this).width() > 1600) {
    $('.images').slick({
      dots: false,
      infinite: true,
      speed: 300,
      slidesToShow: 20, // Set at least half of all slides
      centerMode: true,
      initialSlide: 0, // Fix for centerMode with 1
      variableWidth: true,

      arrows: true,
      draggable: true,
      swipeToSlide: true,
      slidesToScroll: 1,
      autoplay: false,
      autoplaySpeed: 3000
    });
  }
  else {
    $('.images').unbind(slick());
  };
});
$(document).ready(function() {
  $(window).resize();
});

If I refresh the page with a viewport less than 1600px (big size only for demo purposes), the slider not become active, works great. However if I change my browser's width bigger than 1600px and change it back to less than 1600px, the slider's code stays. I used slick slider's built-in responsive flags and unslick feature, but the problem was the same just like here: not completely clearing up it's code.

How can I completely remove it's code without refresh, only with viewport size change?

Edit:

Strange, but looks like this unbinding completely:

else {
  $('.images').slick('unslick');
};

However the documentation suggested way is not, just partly:

responsive: [
  {
    breakpoint: 1600,
    settings: 'unslick'
  }

Edit:

Although the documentation suggested way removing it too, but not re-binding when the browser's the viewport size reaching where it should be active.

EDIT2:

THiCE's solution modified that only use timer for resize event. This way I won't get any console error on load because of .slick('unslick'); hack:

$(document).ready(function() {
  $(window).on('load', function() {
    handleSlick();
    console.log('handleSlick() fired on load...');
  });
  var timer;
  $(window).on('resize', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      handleSlick();
      console.log('handleSlick() fired on resize...');
    }, 100);
    //console.log('jquery on window resize');
  });
  //handleSlick();
});

Upvotes: 0

Views: 415

Answers (1)

Thijs Kramer
Thijs Kramer

Reputation: 1117

Sometimes using a setTimeout does the trick: the resize event is fired lots of times during resizing. If you use a timer inside the resize callback that resets and starts everytime the resize event fires, you prevent those 'double' fires.

An example, for your case: 

  // Slick slider - Responsive
function bindSlick() {
  $('.images').slick({
    dots: false,
    infinite: true,
    // etc...
  });
}

function unbindSlick() {
  $('.images').slick('unslick');
}

function handleSlick() {
  if ($(window).width() > 1600) {
    bindSlick();
  } else {
    unbindSlick(); 
  }
}

$(document).ready(function() {
  var timer;
  $(window).on('resize', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      handleSlick();  
    }, 100);
  });
  handleSlick();
});

Upvotes: 1

Related Questions