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.
- 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
- function walkList(listID,eff1,eff2,intval) {
- addEvent(window, ‘load’, function() {
- hideAll(listID);
- startWalking(listID, eff1, eff2, intval);
- }, false);
- }
hideAll gets the list items, loops through, setting each to ‘ dispay=”none” ‘ to hide them all
- function hideAll(listID) {
- var ul =$(listID).getElementsByTagName(”LI”);
- for(var i=0;i
- ul[i].style.display=’none’;
- }
- }
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.
- var showNum = 0;
- var hideNum = 0;
- function startWalking(listID, eff1, eff2, intval) {
- var ul =$(listID).getElementsByTagName(”LI”);
- eval(’Effect.’+eff1+’(ul[hideNum].id,{duration:.3});’);
- eval(”window.setTimeout(\’Effect.”+eff2+”(\”"+ul[showNum].id+”\”)\’,1000);”);
- hideNum = showNum;
- if(showNum == (ul.length-1)) {
- showNum=0;
- }
- else showNum++;
- setTimeout(’startWalking(\'’+listID+’\',\'’+eff1+’\',\'’+eff2+’\',’+intval+’)',intval);
- }
Here is the demo