Return to Snippet

Revision: 40016
at January 25, 2011 04:09 by alassiter


Initial Code
<div id="testimonials">
	<div id="testimony" >
	  <div id="show_testimonial" class="show_testimonial">
	  </div>
  	  
	<% @testimonials.each_with_index do |t, i| %>
           <div id="about_testimonial<%= i %>" style="display:none;">
    	   <div><%= t.body %></div>
    	   <div style="font-weight:bold;position:relative;bottom:0px;"><%= t.client_info %></div>
    	   </div>
        <% end %>
	</div>
</div>

<script type="text/javascript">
      
     //This script basically uses a blank div and fills it with the content of the hidden divs on the page. I'm sure it breaks on some browsers, but for us it worked. Let me know if you find a better way to do this: [email protected]
     // create an array of divs containing the content.
     var divs_to_fade = new Array();
     
     <% @testimonials.each_with_index do |t, i| %>
        divs_to_fade.push("about_testimonial"+<%= i %>);
     <% end %>
     
     // Set the starting testimony.
     $('show_testimonial').innerHTML = $(divs_to_fade[0]).innerHTML;
     
     // the starting index in the above array.  It should be set to the value of the div which doesn't have the CSS Display property set to "none"
     
     var i = 1;
                            
     // the number of milliseconds between swaps.  Default is five seconds.
     var wait = 8000;
      
     // the function that performs the fade
     function swapFade() {
             Effect.Fade('show_testimonial', { afterFinish: function() { changeSlide(); }, duration:1, from:1.0, to:0.0 });
     }
            
     function changeSlide(){
            $('show_testimonial').innerHTML = $(divs_to_fade[i]).innerHTML;
            Effect.Appear('show_testimonial', { duration:1, from:0.0, to:1.0 });
            
            i++;
            if (i == divs_to_fade.length) i = 0;
     }
                     
     // the onload event handler that starts the fading.
     function startPage() {
             timer = setInterval('swapFade()',wait);
     }
     function stopPage(){
       clearInterval(timer);
     }
     
     startPage();
      

     
</script>

Initial URL


Initial Description


Initial Title
Fade Appear Solution

Initial Tags


Initial Language
JavaScript