Categories
Blog Coding

Remove jQuery plugins at runtime

A good friend of mine asked me last week how she could remove jCarouselLite on the fly, after it had been instantiated. Allow me to share with you guys how to do this, and hopefully show you a trick or two along the way.

As you may know, a typical jCarouselLite plugin is instantiated as such:
$(function() { $(".anyClass").jCarouselLite({ btnNext: ".next", btnPrev: ".prev"}); });

where “.anyClass” is the name of your gallery container, “.prev” and “.next” are the gallery’s previous and next navigation links, respectively.


Removing the plugin at runtime is fairly simple once you understand what is involved:
$('.anyClass').jCarouselLite = null;
$('.prev').unbind('click');
$('.next').unbind('click');

These 3 lines allow you to re-initialize jCarouselLite later on within the same page. Pretty simple and neat, isn’t it?
Let’s decompose what just happened so you may get a better understanding.
$('.anyClass').jCarouselLite = null; removes the jCarouselLite instance from our gallery. In other words, you will have to reinitialize jCarouselLite if you want to reuse it on this page for this gallery.
This isn’t all, however. When jCarouselLite is initialized, it creates what we call event bindings.
Whenever you destroy the jCarouselLite instance the bindings are still lingering and problems will start occurring if you re-initialize jCarouselLite on the same page, for the same gallery, as the click events on the navigation links will have been bound twice.
To prevent this issue from occurring, we add the two following lines:
$('.prev').unbind('click');
$('.next').unbind('click');

Which brings me to one last pro-tip about dealing with groups and bindings.
There are two main ways to deal with group bindings in jQuery:
– The first one is fairly common. It consists of using a common class to all elements of a similar group.
$('.clickable').bind('click', function(){ alert("Hi, I'm clickable!"); });
$('.clickable').unbind('click');

In the code above, all elements of the class “clickable” will have the mouse click event bound (then unbound) to them.

There is however a second, more mystical way to do this in jQuery: Namespacing.
Let’s say you create an instant link preview feature that you want to disable and re-enable at will on your page. We will call our namespace “linkPreview”.
Here’s the event binding to our namespace:
$('a').bind('mouseover.linkPreview', myPreviewFunction);

And the event unbinding, just as easily:
$('a').unbind('mouseover.linkPreview');

This makes it easy to unbind only specific events from our elements. In this case, all other mouseover events would still be bound to our page links. Isn’t this amazing?


By jonaphin

Sr. Software Engineer / Project Lead at Adobe Systems, Inc.

6 replies on “Remove jQuery plugins at runtime”

Dude… I was having so much trouble with jCarouselLite, since there was no method or way of destroying it. I kept re-initializing the plugin without unbinding the methods, which caused the carousel to go back and forth over and over again. Don’t know why I haven’t thought of this!

Thanks a lot, man. You saved me from a lot, and I mean, A LOT of trouble.

Hi,

I’m having trouble using the method you’ve described.

I have a site showing full screen background images which I am cycling through using jCarouselLite.

When the window is re-sized I want to re-instantiate the plugin so as to reflect the new window size. I’ve tried setting it to null (I have no next or previous yet) but when I re-size the window the slides continue to slide. The resize event is called correctly as I have tried it with an alert.

Any ideas?

There are two factors to take into account:
1/ You want to remove the carousel right when the window starts resizing
2/ You want to re-instantiate jCarouselLite right after the window has been resized.

I haven’t seen your code, but this is how I would handle it:

// The following code should be wrapped inside your $(document).ready()
var afterResizeTimer; // will help us reinstantiate when resizing has ended

$(window).resize(function(){
// Remove jCarouselLite - You could use a boolean flag so it only happens
// on the first loop iteration
removeJCarouselLite();

// while resizing, we clear the timeout to make sure
// it does not fire while still resizing
clearTimeout(afterResizeTimer);

// resets the timeout of the re-instantiation
afterResizeTimer = setTimeout(instantiateJCarouselLite, 50);
});

// ... 50ms have passed? instantiateJCarouselLite is called!

I hope it’s clear enough, and please let us know how you ended up solving your issue 🙂

I would request your help, I am instantiating the jcarousellite plugin in the media query less than 767px, where it would scroll and would like to destroy on the unmatch so that it would show the contents statically. I do not have a .next and .prev buttons and the scolling happens automatically on 767, it keeps scrolling and that is where I would like to destroy and show the contents statically. Actually its a simple with 3 when the carousel has not been attached to the div. Once it is instantiated, a lot of styles gets added to the div and the ul which I would get back to the normal state once it is more than 767 px. Thank you.