Fade Appear Solution


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <div id="testimonials">
  2. <div id="testimony" >
  3. <div id="show_testimonial" class="show_testimonial">
  4. </div>
  5.  
  6. <% @testimonials.each_with_index do |t, i| %>
  7. <div id="about_testimonial<%= i %>" style="display:none;">
  8. <div><%= t.body %></div>
  9. <div style="font-weight:bold;position:relative;bottom:0px;"><%= t.client_info %></div>
  10. </div>
  11. <% end %>
  12. </div>
  13. </div>
  14.  
  15. <script type="text/javascript">
  16.  
  17. //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]
  18. // create an array of divs containing the content.
  19. var divs_to_fade = new Array();
  20.  
  21. <% @testimonials.each_with_index do |t, i| %>
  22. divs_to_fade.push("about_testimonial"+<%= i %>);
  23. <% end %>
  24.  
  25. // Set the starting testimony.
  26. $('show_testimonial').innerHTML = $(divs_to_fade[0]).innerHTML;
  27.  
  28. // 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"
  29.  
  30. var i = 1;
  31.  
  32. // the number of milliseconds between swaps. Default is five seconds.
  33. var wait = 8000;
  34.  
  35. // the function that performs the fade
  36. function swapFade() {
  37. Effect.Fade('show_testimonial', { afterFinish: function() { changeSlide(); }, duration:1, from:1.0, to:0.0 });
  38. }
  39.  
  40. function changeSlide(){
  41. $('show_testimonial').innerHTML = $(divs_to_fade[i]).innerHTML;
  42. Effect.Appear('show_testimonial', { duration:1, from:0.0, to:1.0 });
  43.  
  44. i++;
  45. if (i == divs_to_fade.length) i = 0;
  46. }
  47.  
  48. // the onload event handler that starts the fading.
  49. function startPage() {
  50. timer = setInterval('swapFade()',wait);
  51. }
  52. function stopPage(){
  53. clearInterval(timer);
  54. }
  55.  
  56. startPage();
  57.  
  58.  
  59.  
  60. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.