By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,566 Members | 1,778 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,566 IT Pros & Developers. It's quick & easy.

crazy looping javasript...but why???

100+
P: 110
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.

Expand|Select|Wrap|Line Numbers
  1. ---- the ajax response which adds the items to the carousel-----
  2. var handleSuccess = function(callbackResponse)
  3. {
  4.     var start = callbackResponse.argument[0];
  5.     var numResults = callbackResponse.argument[1];
  6.     var carousel = callbackResponse.argument[2];
  7.  
  8.       if(callbackResponse.responseText !== undefined) {
  9.         theList = eval( '(' + callbackResponse.responseText + ')' );
  10.         for(var i=0; i< theList.ResultSet.totalResultsReturned; i++) {
  11.             result = theList.ResultSet.Result[i];
  12.             carousel.addItem(start+i, fmtInnerHTML(result, i, seed));
  13.  
  14.         // Image click will scroll to the corresponding carousel item.
  15. YAHOO.util.Event.addListener('goto-'+i, 'click', function(evt)  { alert(this.index+start)
  16.  carousel.scrollTo(this.index+start);
  17. }, {carousel:carousel,index:i}, true);
  18.         }
  19.         showButtons();
  20.      }
  21. };
  22.  
  23. ---- the scrollTo function ----
  24. scrollTo: function(newStart) {
  25.         this._position(newStart, true);
  26.     },
  27.  
  28. ---- the  _position function called from ScrollTo ----
  29. _position: function(newStart, showAnimation) {
  30.         // do we bypass the isAnimated check?
  31.         if(newStart > this.firstVisible) {
  32.             var inc = newStart - this.firstVisible;
  33.             this._scrollNextInc(this, inc, showAnimation);
  34.         }
  35.          else if(newStart < this.firstVisible) {
  36.             var dec = this.firstVisible - newStart;
  37.             this._scrollPrevInc(this, dec, showAnimation);
  38.         }
  39.         else if(newStart = this.firstVisible) {
  40.             alert('you are already here!');
  41.         }
  42.     },
  43. ----- the scrollTo function -----
  44.  
  45.  
ABSOLUTELY ANY advise on this would be great. I'm at a total loss.
Nov 14 '07 #1
Share this Question
Share on Google+
2 Replies


100+
P: 110
Digging into this issue further, I realized the following code might be useful as well.

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. _scrollPrevInc: function(carousel, dec, showAnimation) {
  4.  
  5.         var currLastVisible = carousel.lastVisible;
  6.         var newStart = carousel.firstVisible - dec;
  7.         newStart = (newStart <= 1) ? 1 : (newStart);
  8.         var newDec = carousel.firstVisible - newStart;
  9.         carousel.priorFirstVisible = carousel.firstVisible;
  10.         carousel.firstVisible = newStart;
  11.  
  12.         // if prev is enabled && we are now at position 1, then disable
  13.         if((carousel.prevEnabled === true) && (carousel.firstVisible == 1)) {
  14.             carousel._disablePrev();
  15.         }
  16.         // if the next button is disabled and end is < size, then enable it
  17.         if((carousel.nextEnabled === false) && 
  18.                         ((carousel.firstVisible + carousel.numVisible - 1) < carousel.size)) {
  19.             carousel._enableNext();
  20.         }
  21.  
  22.         // if we are decrementing
  23.         if(newDec > 0) {            
  24.             if(carousel._isValidObj(carousel.loadPrevHandler)) {
  25.                 carousel.lastVisible = carousel.firstVisible + carousel.numVisible - 1;
  26.  
  27.                 carousel.currSize = (carousel.lastVisible > carousel.currSize) ?
  28.                                             carousel.lastVisible : carousel.currSize;
  29.  
  30.                 var alreadyCached = carousel._areAllItemsLoaded(carousel.firstVisible, 
  31.                                     currLastVisible);
  32.  
  33.                 var revealOffset = (this.revealAmount > 0) ? 1:0;
  34.                 carousel.loadPrevHandlerEvt.fire(carousel.firstVisible+revealOffset, 
  35.                                     carousel.lastVisible, alreadyCached);
  36.             }
  37.  
  38.             if(showAnimation) {
  39.                  var prevParams = { points: { by: [carousel.scrollAmountPerInc*newDec, 0] } };
  40.                  if(carousel.isVertical()) {
  41.                      prevParams = { points: { by: [0, carousel.scrollAmountPerInc*newDec] } };
  42.                  }
  43.  
  44.                  carousel.scrollPrevAnim = new YAHOO.util.Motion(carousel.carouselList,
  45.                                  prevParams, 
  46.                                    carousel.cfg.getProperty("animationSpeed"), carousel.animationMethod);
  47.                 if(carousel._isValidObj(carousel.animationCompleteHandler)) {
  48.                     carousel.scrollPrevAnim.onComplete.subscribe(this._handleAnimationComplete, [carousel, "prev"]);
  49.                 }
  50.                 carousel.scrollPrevAnim.animate();
  51.             } else {
  52.                 if(carousel.isVertical()) {
  53.                     var currY = YAHOO.util.Dom.getY(carousel.carouselList);
  54.                     YAHOO.util.Dom.setY(carousel.carouselList, currY + 
  55.                             carousel.scrollAmountPerInc*newDec);                
  56.                 } else {
  57.                     var currX = YAHOO.util.Dom.getX(carousel.carouselList);
  58.                     YAHOO.util.Dom.setX(carousel.carouselList, currX + 
  59.                             carousel.scrollAmountPerInc*newDec);
  60.                 }
  61.             }
  62.         }
  63.  
  64.         return false;
  65.     },
  66.  
  67. _scrollNextInc: function(carousel, inc, showAnimation) {
  68.  
  69.         var currFirstVisible = carousel.firstVisible;
  70.  
  71.         var newEnd = carousel.firstVisible + inc + carousel.numVisible - 1;
  72.         newEnd = (newEnd > carousel.size) ? carousel.size : newEnd;
  73.         var newStart = newEnd - carousel.numVisible + 1;
  74.         inc = newStart - carousel.firstVisible;
  75.         carousel.priorFirstVisible = carousel.firstVisible;
  76.         carousel.firstVisible = newStart;
  77.  
  78.         // if the prev button is disabled and start is now past 1, then enable it
  79.         if((carousel.prevEnabled === false) && (carousel.firstVisible > 1)) {
  80.             carousel._enablePrev();
  81.         }
  82.         // if next is enabled && we are now at the end, then disable
  83.         if((carousel.nextEnabled === true) && (newEnd == carousel.size)) {
  84.             carousel._disableNext();
  85.         }
  86.  
  87.         if(inc > 0) {
  88.             if(carousel._isValidObj(carousel.loadNextHandler)) {
  89.                 carousel.lastVisible = carousel.firstVisible + carousel.numVisible - 1;
  90.  
  91.                 carousel.currSize = (carousel.lastVisible > carousel.currSize) ?
  92.                                             carousel.lastVisible : carousel.currSize;
  93.  
  94.                 var alreadyCached = carousel._areAllItemsLoaded(currFirstVisible, 
  95.                                         carousel.lastVisible);
  96.                 var revealOffset = (this.revealAmount > 0) ? 1:0;
  97.                 carousel.loadNextHandlerEvt.fire(carousel.firstVisible, 
  98.                                             carousel.lastVisible+revealOffset, alreadyCached);
  99.             }
  100.  
  101.             if(showAnimation) {
  102.                  var nextParams = { points: { by: [-carousel.scrollAmountPerInc*inc, 0] } };
  103.                  if(carousel.isVertical()) {
  104.                      nextParams = { points: { by: [0, -carousel.scrollAmountPerInc*inc] } };
  105.                  }
  106.  
  107.                  carousel.scrollNextAnim = new YAHOO.util.Motion(carousel.carouselList, 
  108.                                  nextParams, 
  109.                                    carousel.cfg.getProperty("animationSpeed"), carousel.animationMethod);
  110.                 if(carousel._isValidObj(carousel.animationCompleteHandler)) {
  111.                     carousel.scrollNextAnim.onComplete.subscribe(this._handleAnimationComplete, [carousel, "next"]);
  112.                 }
  113.                 carousel.scrollNextAnim.animate();
  114.             } else {
  115.                 if(carousel.isVertical()) {
  116.                     var currY = YAHOO.util.Dom.getY(carousel.carouselList);
  117.  
  118.                     YAHOO.util.Dom.setY(carousel.carouselList, 
  119.                                 currY - carousel.scrollAmountPerInc*inc);
  120.                 } else {
  121.                     var currX = YAHOO.util.Dom.getX(carousel.carouselList);
  122.                     YAHOO.util.Dom.setX(carousel.carouselList, 
  123.                                 currX - carousel.scrollAmountPerInc*inc);
  124.                 }
  125.             }
  126.  
  127.         }
  128.  
  129.         return false;
  130.     },
  131.  
Nov 15 '07 #2

100+
P: 110
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.
Nov 15 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.