Removing a Jquery Function on Click

Question

I am using hoverizr http://www.iliasiovis.com/hoverizr/

Below is my code. I want $("a.hamburg>img") and $("a.karlsruhe>img") to toggle the hoverizr function so when they are clicked the function is removed and full color image is shown and when clicked again the function is added.

$( document ).ready(function() {
$("a.hamburg>img").hoverizr();
$("a.karlsruhe>img").hoverizr();
});

EDIT: On hover its goes color and hover out b/w again , that is fine, but on click it should be color and stay color that is what i want to achieve

do you mean you want the same effect as this plugin but on click instead of on hover? — Abhas Tandon
– Abhas Tandon, Commented Apr 23, 2014 at 17:55
no i mean on hover its goes color and hover out b/w again , that is fine, but on click it should be color and stay color — Neox
– Neox, Commented Apr 23, 2014 at 17:59
@adeneo but there is always a possibility to hack the plugins if you know how they work... — Abhas Tandon
– Abhas Tandon, Commented Apr 23, 2014 at 18:25

Abhas Tandon · Accepted Answer · 2014-04-23 19:00:57Z

1

Idea: The plugin works by overlaying a canvas element over the image. The canvas generated by plugin has a class .canv This fact can be used to remove the effect generated by plugin. Following code handles a click event on the element and removes the required canvas when the event is triggered and thus it removes the effect generated by the plugin.

$(document).ready(function() {
  $("a.hamburg>img").hoverizr();
  $("a.karlsruhe>img").hoverizr();
  $("a.hamburg>img,a.karlsruhe>img").click(function(){
     $(this).closest(".canv").remove();
  });
});

If you want to call it again on toggle try:

    var toggle=true;
    $(document).ready(function() {
      $("a.hamburg>img").hoverizr();
      $("a.karlsruhe>img").hoverizr();
      $("a.hamburg>img,a.karlsruhe>img").click(function(){
         if(toggle){
          $(this).closest(".canv").remove();
          toggle=false;
         }else{
            $(this).hoverizr();
            toggle=true;
         }
      });
    });

edited Apr 23, 2014 at 19:00

answered Apr 23, 2014 at 18:05

Abhas Tandon

1,88916 silver badges26 bronze badges

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

2 Comments

Neox Over a year ago

works thanks, but what if i want to show it again on click , like clicktoggle?

Léo Lam Over a year ago

This seems to be a code-only answer. If you could explain how this works or resolves the OP's problem, this would make this answer more useful!

Collectives™ on Stack Overflow

Removing a Jquery Function on Click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related