• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1661
  • Last Modified:

How can I make a div block rotate for a testimonials section? (Text rotator)

I have been combing the Internet for text rotators but none of them really meet my needs. I have a testimonials section on a site and I need it to rotate through all of them (about 60).

My testimonials section code looks like this:

<div id="Testimonials">
      <div><a href="Testimonials.aspx"><img src="images/header_small_testimonials.gif" style="padding-top:15px; padding-left:5px; border:0px;" /></a></div>
      <div id="TestimonialsText"><strong>Name</strong></div>
      <div style="color:#333333; font-size:10px; margin-bottom:5px; padding-left:5px;">Title<br />Company</div>
          <div style="padding-left:5px;">Text of testimonial <br /><a href="Testimonials.aspx">Read More</a>. </div>

*** I will be replacing inline styles with classes soon....just fyi

I need the ID #Testimonials div to rotate.

I have found ways to rotate words or sentences but the rotated text is placed within the JS and I cannot put div's inside of JS.

Any suggestions?

  • 2
1 Solution
IShivaAuthor Commented:
This is from a previous solution posted by Eternal Student. This is exactly what I need HOWEVER, can some edit the code so that the rotation is random? Currently, on refresh or load it starts at #1 then changes. (1,2,3 etc). I would like the order of rotation to be random.

Can anyone add that to this code?

Thanks much!!!
IShivaAuthor Commented:
*** here is the code***

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type="text/javascript">      
                  var mycontent=new Array()
                  mycontent[0]='<div id="one">Text1</div>'
                  mycontent[1]='<div id="two">Text2</div>'
                  mycontent[2]='<div id="three">Text3</div>'
                  mycontent[3]='<div id="four">Text4</div>'
                  var i=0
                  function altercontent(){
                        if (document.all)
                  else if (document.getElementById){
                        rng = document.createRange();
                        el = document.getElementById("dcontent");
                        htmlFrag = rng.createContextualFragment(mycontent[i]);
                  while (el.hasChildNodes()) el.removeChild(el.lastChild);
                  i=(i==mycontent.length-1)? 0 : i+1
                  setTimeout("altercontent()", 3000)

            <div id="dcontent" style="width:780px; background-color: #E2E2FC; padding: 5px"></div>

Change 'i=(i==mycontent.length-1)? 0 : i+1' to 'i=Math.floor(Math.random()*mycontent.length)'
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now