Posted By

alassiter on 01/25/11


Tagged

prototype fade Scriptaculous appear


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

alassiter


Fade Appear Solution


 / Published in: JavaScript
 

  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  

You need to login to post a comment.