I have a horizontal scrollbox (PARENT DIV) that contains nested divs. These nested divs are results that are appended to the parent div dynamically (user doing a search). These dynamically appended divs can be scrolled horizontally by clicking on "previous" or "next" which scrolls every 3 items (411px left or right). I'm using the animate function to scroll. My problem is, when the user clicks the "previous" or "next" multiple times, the scroll goes beyond the end of the last div or the first div. I'm trying to prevent any more animation or clicks when it reaches the last item or the first item. I have it working correctly when the user clicks slowly (one click at a time after animation stops), but when the user clicks "previous" or "next" quickly (as in queueing the clicks up), it scrolls beyond the endpoint or startpoint. How would I prevent this from happening? My jquery block is below along with the sample html:
// move object right 411px regardless of current position
$scrollRightR.click(function(event){
event.preventDefault();
var $results = $('#ajax-matched-results');
var $leftArrow = $('#scrollLeft-results');
var $rightArrow = $('#scrollRight-results');
var position = parseInt($results.css('left').replace(/px/g, ""));
var cLength = $results.children().length;
var x = 3;
var totalResults = cLength / x;
var roundedNumber = Math.round(totalResults);
var divLength = totalResults * 411;
var scrollLength = roundedNumber * 411;
var correctLength = divLength - 411;
var greyLength = -divLength + 822;
var totalLength = -correctLength;
if (position > totalLength){
$results.animate({"left": "-=411px"}, "slow");
$leftArrow.show();
$leftArrow.css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left.png) left center no-repeat"});
$leftArrow.hover(
function() {
$leftArrow.css({color:"#999999", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
},
function() {
$leftArrow.css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left.png) left center no-repeat"});
}
)
}
});
// disable right arrow when reaching end
$scrollRightR.click(function(){
var $results = $('#ajax-matched-results');
var $rightArrow = $('#scrollRight-results');
var position = parseInt($results.css('left').replace(/px/g, ""));
var cLength = $results.children().length;
var x = 3;
var totalResults = cLength / x;
var roundedNumber = Math.round(totalResults);
var divLength = totalResults * 411;
var scrollLength = roundedNumber * 411;
var correctLength = divLength - 411;
var greyLength = -divLength + 822;
var totalLength = -correctLength;
if (position <= greyLength){
$results.animate({"left": "-=0px"}, "slow");
$rightArrow.hide();
return false;
}
});
// move object left 411px if not already at 0
$scrollLeftR.click(function(event){
event.preventDefault();
var $results = $('#ajax-matched-results');
var $rightArrow = $('#scrollRight-results');
var position = parseInt($results.css('left').replace(/px/g, ""));
var cLength = $results.children().length;
var x = 3;
var totalResults = cLength / x;
var roundedNumber = Math.round(totalResults);
var divLength = totalResults * 411;
var scrollLength = roundedNumber * 411;
var correctLength = divLength - 411;
var totalLength = -correctLength;
if (position != 0){
$results.animate({"left": "+=411px"}, "slow");
$rightArrow.show();
$rightArrow.css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right.png) right center no-repeat"});
$rightArrow.hover(
function() {
$rightArrow.css({color:"#999999", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
},
function() {
$rightArrow.css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right.png) right center no-repeat"});
}
)
}
});
// disable left arrow when reaching end
$scrollLeftR.click(function(){
var $results = $('#ajax-matched-results');
var $leftArrow = $('#scrollLeft-results');
var position = parseInt($results.css('left').replace(/px/g, ""));
var cLength = $results.children().length;
var x = 3;
var totalResults = cLength / x;
var roundedNumber = Math.round(totalResults);
var divLength = totalResults * 411;
var scrollLength = roundedNumber * 411;
var correctLength = divLength - 411;
var greyLength = -divLength + 822;
var totalLength = -correctLength;
if (position >= 0 || position == -411){
$results.animate({"left": "+=0px"}, "slow");
$leftArrow.hide();
return false;
}
});
The HTML:
<div id="ajax-matched-results" class="matched-results-items" style="left: 0px;">
<div class="match-0 video-matched-results" href="video/51/"></div>
<div class="match-1 video-matched-results" href="video/64/"></div>
<div class="match-2 video-matched-results" href="video/65/"></div>
<div class="match-3 video-matched-results" href="video/79/"></div>
<div class="match-4 video-matched-results" href="video/97/"></div>
<div class="match-5 video-matched-results" href="video/126/"></div>
<div class="match-6 video-matched-results" href="video/128/"></div>
<div class="match-7 video-matched-results" href="video/227/"></div>
<div class="match-8 video-matched-results" href="video/51/"></div>
<div class="match-9 video-matched-results" href="video/97/"></div>
<div class="match-10 video-matched-results" href="video/51/"></div>
<div class="match-11 video-matched-results" href="video/97/"></div>
</div>
I'm at my wits end with this...I tried stop() and every type of if statement but to no avail. Any help would be much obliged!