JDev

Here is how you could do a text-based slideshow in Prototype/Script.aculo.us:

We declare a JavaScript array:

var students = new Array ("Audrey", "John", "Mark", "Benny", "Peter");  

We need a div with an id of ‘panel’ that will contain the slideshow.

document.observe(’dom:loaded’ , function() {
     i=0;
     new PeriodicalExecuter(cycle, 5  //5-second interval
     );
 });
 
function cycle(){                          
         $(’panel’ ).visualEffect  (’BlindUp’,
              { duration: 1,             
              fps: 50,           
            afterFinish: function() {           
            $(’panel’).update(students[i]); //the div is still invisible at this point
            $(’panel’ ).visualEffect  (’BlindDown’,
              { duration: 1,
                fps: 50,
                queue:’end’
              }
            );        
         }
       });
        
        i++;
        if(i==students.length)
             i=0; //restart the slideshow
 }

This code will display all the elements of the array, one by one, automatically at a 5-second  interval.

An excellent explanation can be found here.

We are going to show how to create lists with alternate colors in Prototype and Jquery.

Let’s say you have an HTML list with with the ‘result‘ id, and you want it to have alternating colors. 

First, create a css class that displays a list item in a different color:

li.alternate { color:green;} 

In Prototype, you use the following syntax:

document.observe(’dom:loaded’ , function(){
    $$(’#result li:nth-child(2n)’ ).invoke(’addClassName’ , ‘alternate’ );
});

Jquery uses the following syntax:

$(document).ready(function(){       
    $("#result li:nth-child(even)").addClass("alternate");           
});