How to disable or destroy a jQuery plugin function?

Question

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! :)

You need to unbind any events and remove any nodes or classes added by the plugin. What do you want the end result to be? Do you want the images to still display, just not animate? — Evan Davis
– Evan Davis, Commented Mar 1, 2014 at 19:23

Antoine Eskaros · Accepted Answer · 2015-07-29 01:17:44Z

6

+50

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());

edited Jul 29, 2015 at 1:17

answered Jul 29, 2015 at 0:40

Antoine Eskaros

8717 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ServerSideSkittles Over a year ago

Its not perfect but its good enough for me, thanks for your time :)

Antoine Eskaros Over a year ago

you are welcome :) , If you find a better workaround please post it

VisioN · Accepted Answer · 2014-03-01 19:34:05Z

1

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

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

edited Mar 1, 2014 at 19:34

answered Mar 1, 2014 at 19:28

VisioN

146k35 gold badges287 silver badges291 bronze badges

Comments

Alpha Codemonkey · Accepted Answer · 2014-03-01 20:11:30Z

1

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());

  }

});

edited Mar 1, 2014 at 20:11

answered Mar 1, 2014 at 19:35

Alpha Codemonkey

3,27123 silver badges27 bronze badges

4 Comments

Mustapha Aoussar Over a year ago

Thank you so much! but works only on click and then the animation restarts.

Mustapha Aoussar Over a year ago

I'll try to create the destroy method for this plugin.

Alpha Codemonkey Over a year ago

updated to remove 'gridrotator' class so the plugin doesn't rebind to it after its removed and inserted

ServerSideSkittles Over a year ago

Any progress? I have tried this but it only cuts out the animation before it starts again.

M B Parvez · Accepted Answer · 2014-03-01 19:32:29Z

0

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/

answered Mar 1, 2014 at 19:32

M B Parvez

8166 silver badges16 bronze badges

Comments

SajithNair · Accepted Answer · 2014-03-01 19:35:07Z

0

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

answered Mar 1, 2014 at 19:35

SajithNair

3,8771 gold badge20 silver badges23 bronze badges

1 Comment

Mustapha Aoussar Over a year ago

Thank you! but doesn't stop the animation.

Collectives™ on Stack Overflow

How to disable or destroy a jQuery plugin function?

5 Answers 5

2 Comments

Comments

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related