Prevent Multiple click for single action in jquery !

Question

i have this javascript code :

var next = jQuery('#next') ;
        var prev = jQuery('#prev') ;
        var Scroller = jQuery('#Scroller') ;
        var ScrollerTable = Scroller.children('table').width() ; 
        next.click(function(){
        console.log('width of scroller table ' + ScrollerTable) ;
                var offsetLeft = parseInt(Scroller.css("left")) ;
                console.warn(offsetLeft) ;
                if(offsetLeft == 0)
                {
                    Scroller.animate({left : -140 } , 1000 ) ;
                }else{
                    console.warn(offsetLeft) ;
                    if(ScrollerTable <= offsetLeft  )
                    {
                        console.warn(offsetLeft) ;
                        alert('you are reached the end of scroller use the other btn') ;
                        return false ;
                    }else{
                        Scroller.animate({left : offsetLeft-140 } , 1000) ;
                    }
                }

        });
        prev.click(function(){

                var offsetLeft = parseInt(Scroller.css("left")) ;
                console.warn('offsetLeft in backward ' + offsetLeft) ;
                if(offsetLeft != 0 || offsetLeft > 0 )
                {
                    Scroller.animate({left : offsetLeft +140 } , 1000 ) ;
                }else{
                    jQuery(this).css('cursor' , 'none') ;
                    return false ;
                }
        });

when user click on next or perv multiple animation will not completely complete and offsetLeft value is not correct ! what can i do to prevent that

my second question is when user click on next btn the scroller div scrolled to -140px left this action must iterate until to reach to end of slides then i must disable the next btn . so i get scrollerTable width in a variable and check it with offsetLeft Value but it's not working !

and here is html

<table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
        <div style="border:#ccc 1px solid ; padding:1px" class="scroll">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="2%"><img src="../images/dum/scroll_left.gif" width="20" height="165" id="prev" style="cursor:pointer" /></td>
                <td width="96%" valign="top">
                    <div style="width:720px; height:165px ;  position:relative ; overflow:hidden " id="Container">
                        <div style="position:absolute ; left:0" id="Scroller">
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    {foreach from=$products item=p}
                                        <td>
                                            <div style="border:#ccc 2px solid ; padding:0px;margin:20px;">
                                                <img src="imgsize.php?w=100&h=100&img=../uploads/product/{$p.xproductid}.jpg" />
                                                <div style="background-color:#ccc ;text-align:center ; padding:5px; ">{$p.xproductname}</div>
                                            </div>
                                        </td>    
                                    {/foreach}
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
                <td width="2%"><img src="../images/dum/scroll_right.gif" width="20" height="165" id="next"/></td>
              </tr>
            </table>

It would also be better to use valid HTML, avoid nested tables, and not abuse tables for layout. — Quentin
– Quentin, Commented Jun 19, 2009 at 13:47

Carl · Accepted Answer · 2009-06-19 13:44:02Z

2

If I understand you right, you could introduce a couple of variables that could help you out.

var nextInProgress=false;
var prevInProgress=false;

Then, you could do something like this:

next.click(function(){
    if(!nextInProgress){
        nextInProgress=true;
        ...
        nextInProgress=false;
    }
});
prev.click(function(){
    if(!prevInProgress){
        prevInProgress=true;
        ...
        prevInProgress=false;
    }
});

Then, while your next.click() or prev.click() functions are in progress, a user clicking that button again will yield nothing unless the action has completed.

As for your second question: are you using the jQuery element.width() function? If that's not giving you an expected value, you may have to do some other width calculations, such as determining the tables CSS left and CSS right attribute values, and subtracting, right-left to get the width. That may work, but maybe I misunderstood your question.

answered Jun 19, 2009 at 13:44

Carl

1,7261 gold badge17 silver badges25 bronze badges

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

1 Comment

Carl Over a year ago

Bummer. Sorry I couldn't help on that one.

ScottyDont · Accepted Answer · 2009-06-19 13:56:51Z

0

If you want to use your own code, consider using the callback argument on your animation call.

On the click event for the button:

disable the left button (with an .attr("disabled","disabled") or some other method)
trigger your animation
in the callback argument of .animate() re-enable the button. The callback function won't execute until the animation finishes. (If you have more complicated animation you may need to use an animation queue.)

Or, you could just use Ariel Flesler's serialScroll plugin since he's done the hard work already.

answered Jun 19, 2009 at 13:56

ScottyDont

1,2071 gold badge9 silver badges17 bronze badges

1 Comment

mehdi Over a year ago

@Thumbkin in Ariel Flesler's site if i click multiple the animation will not complete !

Collectives™ on Stack Overflow

Prevent Multiple click for single action in jquery !

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related