crazy looping javasript...but why???

[pedalpete]

Hi All,

I'm using Bill Scott's YUI carousel v5.6, and I've run into a crazy looping javascript for some reason, and I can't seem to get around it.

The carousel loads a bunch of items, 7 of which are visible, and then via ajax it loads more and ads them to them on to the list as it goes.
If a user selects one of the items, that item scrolls to the middle and is highlighted.

I've got all this working, except that when a user clicks, the item scrolls and is highlighted, and then it loops through that same script and scrolls to another item (sometimes 3 or 4 times). Nothing in here tells it to loop, so I am at a total loss as to why it would do this.

I've included an alert, and it does get called after each scroll, and when a loop occurs, the alert is called multiple times and displays the proper index+start value, so that all works, but nothing is being clicked.

As an example of the error, I was on #7,
- I clicked on #5
- alert showed 5
-carousel scrolled to 5
-alert showed 8
-carousel scrolled to 8
-alert showed 11
-carousel scrolled to 11
- that for some reason ended the loop.
That was all from ONE click. It should have just gone to 5 and stopped.

I've only included the code which I think is affecting this rather than having somebody look through ALL of my code. I don't think I've missed anything.

---- the ajax response which adds the items to the carousel-----
var handleSuccess = function(callbackResponse)
{
    var start = callbackResponse.argument[0];
    var numResults = callbackResponse.argument[1];
    var carousel = callbackResponse.argument[2];
 
      if(callbackResponse.responseText !== undefined) {
        theList = eval( '(' + callbackResponse.responseText + ')' );
        for(var i=0; i< theList.ResultSet.totalResultsReturned; i++) {
            result = theList.ResultSet.Result[i];
            carousel.addItem(start+i, fmtInnerHTML(result, i, seed));
 
        // Image click will scroll to the corresponding carousel item.
YAHOO.util.Event.addListener('goto-'+i, 'click', function(evt)  { alert(this.index+start)
 carousel.scrollTo(this.index+start);
}, {carousel:carousel,index:i}, true);
        }
        showButtons();
     }
};
 
---- the scrollTo function ----
scrollTo: function(newStart) {
        this._position(newStart, true);
    },
 
---- the  _position function called from ScrollTo ----
_position: function(newStart, showAnimation) {
        // do we bypass the isAnimated check?
        if(newStart > this.firstVisible) {
            var inc = newStart - this.firstVisible;
            this._scrollNextInc(this, inc, showAnimation);
        }
         else if(newStart < this.firstVisible) {
            var dec = this.firstVisible - newStart;
            this._scrollPrevInc(this, dec, showAnimation);
        }
        else if(newStart = this.firstVisible) {
            alert('you are already here!');
        }
    },
----- the scrollTo function -----
 
 

ABSOLUTELY ANY advise on this would be great. I'm at a total loss.

[pedalpete]

Digging into this issue further, I realized the following code might be useful as well.

 
 
_scrollPrevInc: function(carousel, dec, showAnimation) {
 
        var currLastVisible = carousel.lastVisible;
        var newStart = carousel.firstVisible - dec;
        newStart = (newStart <= 1) ? 1 : (newStart);
        var newDec = carousel.firstVisible - newStart;
        carousel.priorFirstVisible = carousel.firstVisible;
        carousel.firstVisible = newStart;
 
        // if prev is enabled && we are now at position 1, then disable
        if((carousel.prevEnabled === true) && (carousel.firstVisible == 1)) {
            carousel._disablePrev();
        }
        // if the next button is disabled and end is < size, then enable it
        if((carousel.nextEnabled === false) && 
                        ((carousel.firstVisible + carousel.numVisible - 1) < carousel.size)) {
            carousel._enableNext();
        }
 
        // if we are decrementing
        if(newDec > 0) {            
            if(carousel._isValidObj(carousel.loadPrevHandler)) {
                carousel.lastVisible = carousel.firstVisible + carousel.numVisible - 1;
 
                carousel.currSize = (carousel.lastVisible > carousel.currSize) ?
                                            carousel.lastVisible : carousel.currSize;
 
                var alreadyCached = carousel._areAllItemsLoaded(carousel.firstVisible, 
                                    currLastVisible);
 
                var revealOffset = (this.revealAmount > 0) ? 1:0;
                carousel.loadPrevHandlerEvt.fire(carousel.firstVisible+revealOffset, 
                                    carousel.lastVisible, alreadyCached);
            }
 
            if(showAnimation) {
                 var prevParams = { points: { by: [carousel.scrollAmountPerInc*newDec, 0] } };
                 if(carousel.isVertical()) {
                     prevParams = { points: { by: [0, carousel.scrollAmountPerInc*newDec] } };
                 }
 
                 carousel.scrollPrevAnim = new YAHOO.util.Motion(carousel.carouselList,
                                 prevParams, 
                                   carousel.cfg.getProperty("animationSpeed"), carousel.animationMethod);
                if(carousel._isValidObj(carousel.animationCompleteHandler)) {
                    carousel.scrollPrevAnim.onComplete.subscribe(this._handleAnimationComplete, [carousel, "prev"]);
                }
                carousel.scrollPrevAnim.animate();
            } else {
                if(carousel.isVertical()) {
                    var currY = YAHOO.util.Dom.getY(carousel.carouselList);
                    YAHOO.util.Dom.setY(carousel.carouselList, currY + 
                            carousel.scrollAmountPerInc*newDec);                
                } else {
                    var currX = YAHOO.util.Dom.getX(carousel.carouselList);
                    YAHOO.util.Dom.setX(carousel.carouselList, currX + 
                            carousel.scrollAmountPerInc*newDec);
                }
            }
        }
 
        return false;
    },
 
_scrollNextInc: function(carousel, inc, showAnimation) {
 
        var currFirstVisible = carousel.firstVisible;
 
        var newEnd = carousel.firstVisible + inc + carousel.numVisible - 1;
        newEnd = (newEnd > carousel.size) ? carousel.size : newEnd;
        var newStart = newEnd - carousel.numVisible + 1;
        inc = newStart - carousel.firstVisible;
        carousel.priorFirstVisible = carousel.firstVisible;
        carousel.firstVisible = newStart;
 
        // if the prev button is disabled and start is now past 1, then enable it
        if((carousel.prevEnabled === false) && (carousel.firstVisible > 1)) {
            carousel._enablePrev();
        }
        // if next is enabled && we are now at the end, then disable
        if((carousel.nextEnabled === true) && (newEnd == carousel.size)) {
            carousel._disableNext();
        }
 
        if(inc > 0) {
            if(carousel._isValidObj(carousel.loadNextHandler)) {
                carousel.lastVisible = carousel.firstVisible + carousel.numVisible - 1;
 
                carousel.currSize = (carousel.lastVisible > carousel.currSize) ?
                                            carousel.lastVisible : carousel.currSize;
 
                var alreadyCached = carousel._areAllItemsLoaded(currFirstVisible, 
                                        carousel.lastVisible);
                var revealOffset = (this.revealAmount > 0) ? 1:0;
                carousel.loadNextHandlerEvt.fire(carousel.firstVisible, 
                                            carousel.lastVisible+revealOffset, alreadyCached);
            }
 
            if(showAnimation) {
                 var nextParams = { points: { by: [-carousel.scrollAmountPerInc*inc, 0] } };
                 if(carousel.isVertical()) {
                     nextParams = { points: { by: [0, -carousel.scrollAmountPerInc*inc] } };
                 }
 
                 carousel.scrollNextAnim = new YAHOO.util.Motion(carousel.carouselList, 
                                 nextParams, 
                                   carousel.cfg.getProperty("animationSpeed"), carousel.animationMethod);
                if(carousel._isValidObj(carousel.animationCompleteHandler)) {
                    carousel.scrollNextAnim.onComplete.subscribe(this._handleAnimationComplete, [carousel, "next"]);
                }
                carousel.scrollNextAnim.animate();
            } else {
                if(carousel.isVertical()) {
                    var currY = YAHOO.util.Dom.getY(carousel.carouselList);
 
                    YAHOO.util.Dom.setY(carousel.carouselList, 
                                currY - carousel.scrollAmountPerInc*inc);
                } else {
                    var currX = YAHOO.util.Dom.getX(carousel.carouselList);
                    YAHOO.util.Dom.setX(carousel.carouselList, 
                                currX - carousel.scrollAmountPerInc*inc);
                }
            }
 
        }
 
        return false;
    },
 

[pedalpete]

the simplest route is always the best. there seemed to be a problem with the YUI event listener.

I changed to a simple onClick event and the problem seems to be fixed.