CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

How to disable or destroy a jQuery plugin function?

I have a gallery that uses the jQuery gridrotator effect. I want to enable the effect when I click on button "enable effect".

<button id="build">Enable Effect</button>
<script type="text/javascript">
    $("button#build").click(function(){
        $('#ri-grid').gridrotator();
    });
</script>

And the enablig effect works fine (see this test). To disable effect there is no a destroy method for this plugin. So I tried to return to false the function but doesn't work.

<button id="destroy">Disable Effect</button>
<script type="text/javascript">
    $("button#destroy").click(function(){
        $('#ri-grid').gridrotator(function(){
            return false;
        });
    });
</script>

How can I disable or destroy this function?
Thank you so much for any help! :)

Upvotes: 6

Views: 9022

Answers (5)

Antoine Eskaros
Antoine Eskaros

Reputation: 851

I made and tested a good workaround not the perfect solution but it worked. simply remove the item from Dom tree then reload it

        $('#ri-grid').html($('#ri-grid').html());

Upvotes: 6

Alpha Codemonkey
Alpha Codemonkey

Reputation: 3261

The gridrotator plugin does not seem to have a builtin disable feature.

Using .remove() will remove all bound events and jQuery data associated with the elements that are removed.

Try removing the element and inserting it back in its place.

$("button#destroy").click(function(){

  // remove plugin class so it doesn't rebind
  $("#ri-grid").removeClass("gridrotator");

  var $prev = $("#ri-grid").prev();
  if($prev.length) {

    // put back between siblings if necessary
    $prev.append($("#ri-grid").remove());

  } else {

    // or just re-add to its parent
    var $parent = $("#ri-grid").parent();
    $parent.prepend($("#ri-grid").remove());

  }

});

Upvotes: 1

SajithNair
SajithNair

Reputation: 3867

<button id="destroy">Disable Effect</button>
<script type="text/javascript">
    $("button#destroy").click(function(){
        $('#ri-grid').stop();
    });
</script>

Upvotes: 0

VisioN
VisioN

Reputation: 145398

Maybe there is a better way, but this hack seems to work:

$('#ri-grid').data('gridrotator').$items.length = 0;

Upvotes: 1

M B Parvez
M B Parvez

Reputation: 816

Hope this will make you smile -

<button id="destroy">Disable Effect</button>

<script type="text/javascript">
    $("button#destroy").click(function(){
        $('#ri-grid').gridrotator().stop();
    });
</script>

Know more on .stop() function - http://api.jquery.com/stop/

Upvotes: 0

Related Questions