CODEWITHSUNDEEP
jquery
sforcash
sforcash

Reputation: 429

Retrigger jQuery Plugin on Window Resize?

I'm using the PerfectScrollbar jQuery plugin to handle some overflow content. PerfectScrollbar doesn't play well with touch devices and with the way the site lays out at smaller viewport widths, it doesn't matter because I'm disabling the plugin anyway.

Long story short, I need to reinitialize the plugin in the event that a user has resized their browser window.

This is how I'm firing the plugin intially...

var minWidth = 800

if ( $(window).width() >= minWidth){
  $('#tasting-menu').perfectScrollbar({
  includePadding: true,
  wheelPropagation: true
});

I'm trying something along the lines of this to reinitialize but it's not right...

$(window.resize(function () {
if ( $(window).width() >= minWidth){
  $('#tasting-menu').perfectScrollbar({
    includePadding: true,
    wheelPropagation: true
    });
  }
});

I'm obviously a newbie at jQuery. Is this the proper way to do this and I just have my syntax screwed up or am I just going the wrong direction entirely?

Upvotes: 1

Views: 212

Answers (3)

Marius Darila
Marius Darila

Reputation: 873

This is how i would do it, I saw that you can pass "update" when you call perfectScrollbar so you dont need to call the initializer again http://noraesae.github.io/perfect-scrollbar/. Have fun and dont forget to add lo-dash to your script list if you want to test this :)

var initLayout, lazyLayout, minWidth;

minWidth = 800;

initLayout = function(options) {
  var currentWidth;
  if (options == null) {
    options = {
      includePadding: true,
      wheelPropagation: true
    };
  }
  currentWidth = $(window).width();
  if (currentWidth >= minWidth) {
    return $('#tasting-menu').perfectScrollbar(options);
  }
};

lazyLayout = _.debounce(function() {
  return initLayout('update');
}, 150);

$(window).on("resize", lazyLayout);

$(function() {
  return initLayout();
});

Upvotes: 1

Satinder singh
Satinder singh

Reputation: 10208

Try like this

$(window).on('resize', myFunctionName);

funtion myFunctionName(){
   if ( $(window).width() >= minWidth){
         $('#tasting-menu').perfectScrollbar({
         includePadding: true,
         wheelPropagation: true
       });
     }
}

Upvotes: 0

Nate Barbettini
Nate Barbettini

Reputation: 53680

I think a syntax error is causing your code to not fire. Change your code to:

$(window).resize(function () {
if ( $(window).width() >= minWidth){
    $('#tasting-menu').perfectScrollbar({
        includePadding: true,
        wheelPropagation: true
    });
    }
});

Upvotes: 1

Related Questions