Disable Anchor onclick

Question

Possible Duplicate:
How to enable or disable an anchor using jQuery?

I've got an onclick on an anchor which causes 2 divs to change their width (typical concept of sidebar toggling whilst enlarging the content). However, if I click this anchor and click it again whilst the animation is still playing, it will start the animation over from where the divs currently are (e.g. sideDiv is usually at 200px width, content at 1000px width, if i start the animation the sideDiv should go to 0 and the content to 1200, however, if I click again whilst side is at 100 and content at 1100, they'll toggle back to 300 and 900, which is not what I want).

So, logically I'll need to disable the anchor-onclick for the time the animation is played and enable it again, I know this procedure for buttons, is there anything similar for anchors?

Here's my code:

function toggleSideBar(e) {
        barWidth = $('#resizableBar').width();
        if ($('#content').width() >= "900") {
            $('#content').animate({ width: ($('#content').width() - barWidth) }, 200, function () {
                $('#resizableBar').animate({ width: "show" }, { duration: 200, queue: true});
            });
        }
        else {
            $('#resizableBar').animate({ width: "hide" }, 200, function () {
                $('#content').animate({ width: ($('#content').width() + barWidth) }, { duration: 200, queue: true });
            });

        }
    }

Here's the anchor:

<a id="btnSideDivSlide" onclick="toggleSideBar(this)" href="#">Sideslide</a>

Thanks,

Dennis

score 2 · Accepted Answer · answered May 19 '11 at 11:04

Something like this might work:

   var _isAnimating;

   function toggleSideBar(e) {
    if (_isAnimating) return;

    barWidth = $('#resizableBar').width();
    if ($('#content').width() >= "900") {
        _isAnimating = true;
$('#content').animate({ width: ($('#content').width() - barWidth) }, 200, function () {
            $('#resizableBar').animate({ width: "show" }, { duration: 200, queue: true,    complete: function(){  _isAnimating = false; }});
        });
    }
    else {
 _isAnimating = true;
        $('#resizableBar').animate({ width: "hide" }, 200, function () {
            $('#content').animate({ width: ($('#content').width() + barWidth) }, { duration:   200, queue: true, complete: function(){  _isAnimating = false; } });
        });

    }
}

(Not sure if my syntax is perfect, but you get the idea)

score 1 · Answer 2 · answered May 19 '11 at 11:00

1

You could check at the beginning of your function whether the animation is running, and if so don't start it. A global boolean would do the trick.

answered May 19 '11 at 11:00

Mr47

2,655
1
19
25

Could you please specify how to achieve this? I'm rather new to jQuery (and JavaScript in general). – Dennis Röttger May 19 '11 at 11:01

score 1 · Answer 3 · answered May 19 '11 at 11:01

1

In jQuery, the following will disable the onclick:

$("#btnSideDivSlide").unbind("click");

Then once its finished you can rebind:

$("#btnSideDivSlide").click(function(){
    toggleSideBar(this);
});

If you put this following in your code, you could eliminate the onlcick event attribute from your HTMl altogether:

$(document).ready(function(){
    $("#btnSideDivSlide").click(function(){
        toggleSideBar(this);
    });
});

This is called 'late binding' and helps to eliminate obstrusive JavaScript such as onlick= from your HTML.

answered May 19 '11 at 11:01

James Wiseman

29,946
17
95
158

Thanks, how would I bind it again? – Dennis Röttger May 19 '11 at 11:02
Unfortunately this doesn't work, I unbind the onclick at the beginning of the function and rebind it at the end, but I am still able to click multiple times ( + let the animation start over with the current div-positions). – Dennis Röttger May 19 '11 at 11:05
Found this other SO article which might help: http://stackoverflow.com/questions/1164635/how-to-enable-or-disable-an-anchor-using-jquery – James Wiseman May 19 '11 at 11:19

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

0

try

HTML

<a id="btnSideDivSlide" href="#">Sideslide</a>

jQuery

$('#btnSideDivSlide').bind ('click' , function () {
  toggleSideBar(this);
})

edited Jun 20 '20 at 09:12

Community

1
1

answered May 19 '11 at 11:12

xkeshav

53,360
44
177
245

by doing this we are only binding once – xkeshav May 19 '11 at 11:14

Disable Anchor onclick

4 Answers4

HTML

jQuery

Linked