To iterate over a <ul> list of items I wrote up the following javascript code. It requires both the prototype & scriptaculous javascript libraries and takes advantage of scriptaculous’s combination effects: Appear, Fade, Puff, BlindDown, BlindUp, SwitchOff, SlideDown, SlideUp, DropOut, Squish, Fold, Grow, and Shrink.

It’s envoked as follows where ‘list-ID’ is the ID attribute of the list, ‘Effect-Hide’ is the scriptaculous disappear effect (such as Fade), ‘Effect-Show’ is the appear effect (such as Appear), and Time-Interval is the length of time to show the <li> item before moving on to the next one.

1. walkList(list-ID, Effect-Hide, Effect-Show, Time-Interval);

So, here is the walkList Function. It adds an onload event, using addEvent which I borrowed from Scott Andrew, to first hide all the list items using hideAll(list-ID) then initiates the list iteration with startWalking

1. function walkList(listID,eff1,eff2,intval) {
2. addEvent(window, ‘load’, function() {
3. hideAll(listID);
4. startWalking(listID, eff1, eff2, intval);
5. }, false);
6. }

hideAll gets the list items, loops through, setting each to ‘ dispay=”none” ‘ to hide them all

1. function hideAll(listID) {
2. var ul =$(listID).getElementsByTagName(”LI”);
3. for(var i=0;i
   
4. ul[i].style.display=’none’;
5. }
6. }

startWalking applies the specified hide effect to one item and a show effect to the next one. Then uses setTimeout to schedule the next transition.

1. var showNum = 0;
2. var hideNum = 0;
3. function startWalking(listID, eff1, eff2, intval) {
4. var ul =$(listID).getElementsByTagName(”LI”);
5. eval(’Effect.’+eff1+’(ul[hideNum].id,{duration:.3});’);
6. eval(”window.setTimeout(\’Effect.”+eff2+”(\”"+ul[showNum].id+”\”)\’,1000);”);
7. hideNum = showNum;
8. if(showNum == (ul.length-1)) {
9. showNum=0;
10. }
11. else showNum++;
12. setTimeout(’startWalking(\'’+listID+’\',\'’+eff1+’\',\'’+eff2+’\',’+intval+’)',intval);
13. }

Here is the demo

This entry was posted on Thursday, December 7th, 2006 at 8:20 pm and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.