disable .click function on an anchor in jquery

Question

This is written in an external .js with jquery...

I have two windows that slide in and out of view like:

$(document).ready(function() {
  // hides gallery1 as soon as the DOM is ready  
  $('#gallery1').hide();  
  // shows the menu on click   
  $('#showgal1').click(function() {  
    $('#gallery1').delay(490).show('slide', {direction:'left'});
    $('#gallery2').hide('slide', {direction:'right'});
    //need code to disable showgal1 and enable showgal2
  });
  $('#showgal2').click(function() {  
    $('#gallery2').delay(490).show('slide', {direction:'right'});
    $('#gallery1').hide('slide', {direction:'left'});
    //need code to disable showgal2 and enable showgal1
  });
});

'gallery1' and 'gallery2' are DIV's with flash image galleries and 'showgal1' and 'showgal2' are id's of anchors...

looks like

<a href="#" id="showgal1">gallery 1</a>

I cannot find a way to disable the .click function when one is clicked and re-enable the other...

i want to disable 'showgal1' by default and when 'showgal2' event takes place it removes the attribute and makes 'showgal2' disabled until 'showgal1' is clicked...

the .attr('disabled','disabled') hasn't worked yet...

Answer 1

So you want to stop any action when a showgal is clicked if the associated gallery is already visible?

$('#showgal1').click(function(){
    if($('#gallery1').is(":visible"))
       return false;

    $('#gallery1').delay(490).show('slide', {direction:'right'});
    $('#gallery2').hide('slide', {direction:'left'});

});

$('#showgal2').click(function(){
    if($('#gallery2').is(":visible"))
       return false;
    $('#gallery2').delay(490).show('slide', {direction:'right'});
    $('#gallery1').hide('slide', {direction:'left'});

});

The first 2 lines of each click function will stop the function if the respective gallery is already visible.

Answer 2

Try this:

.attr('onclick','void(0)');

Answer 3

You could also just keep a variable in your code that keeps track of which is visible by div name. This will make it much easier to expand in the future if you need more panels. Just store the name of the currently visible on in the variable and make sure the clicked item is not that before doing anything.

Answer 4

I'm not sure if I fully understand your question, but I think you want to prevent the link from triggering the click handler if the gallery is already shown.

I would use jQuery's data function to store the gallery's active state as true/false:

$('#showgal1').click(function() {
    var $gal1 = $(this), $gal2 = $('#gallery2');
    if(!$('#gallery1').data('active')){
        $gal1.delay(490).show('slide', {direction:'left'}).data('active', true);
        $gal2.hide('slide', {direction:'right'}).data('active', false);
    }
});

Answer 5

You can add a class "disabled" to the link when it is clicked. Note that this won't disable the links by itself, nor will setting the disabled attribute as you've tried, as only form elements such as inputs and buttons can be disabled. But you can check inside your click handlers whether the class is there, and if it is, do nothing:

$("#showgal1").hide();
$("#showgal2").addClass("disabled");

// shows the menu on click   
$('#showgal1').click(function() {  
   if ($(this).hasClass("disabled")) return false;

   // Note the extra .addClass or .removeClass on the end
   $('#gallery1').delay(490).show('slide', {direction:'left'}).addClass("disabled");
   $('#gallery2').hide('slide', {direction:'right'}).removeClass("disabled");
});
$('#showgal2').click(function() {  
   if ($(this).hasClass("disabled")) return false

   $('#gallery2').delay(490).show('slide', {direction:'right'}).addClass("disabled");
   $('#gallery1').hide('slide', {direction:'left'}).removeClass("disabled");
});

The advantage of adding a class is that you can then use CSS to give it the appearance of a disabled button:

.disabled {
   color: grey;
}