www.webdeveloper.com
Results 1 to 8 of 8

Thread: How to Rotate/Slideshow Text DIVs on page?

  1. #1
    Join Date
    Feb 2013
    Posts
    5

    How to Rotate/Slideshow Text DIVs on page?

    I am trying to modify the script below to slideshow/rotate through a handful of text DIVs.

    I need these DIVs to appear in order-- div 1, then div 2, then div 3. Each would appear for 5 seconds, then show the next div... but in order.

    The script below works well for Random divs, but I need them to be in order-- div 1, div 2, div 3... each time.
    Code:
    <div id="d1" style="display:none;">some text 1</div>
    <div id="d2" style="display:none;">some text 2</div>
    <div id="d3" style="display:none;">some text 3</div>
    
    <script type="text/javascript">
    divs = ['d1','d2','d3'];
    
    function hideDivs() {
    for (var i=0; i<divs.length; i++)
    document.getElementById(divs[i]).style.display = 'none';
    }
    
    function showDiv() {
    hideDivs(); //hide them all before we show the next one.
    var randomDiv = divs[Math.floor(Math.random()*divs.length)];
    var div = document.getElementById(randomDiv).style.display =
    'block';
    
    setTimeout(showDiv,500); //set a delay before showing the next div
    }
    
    showDiv();
    </script>

  2. #2
    Join Date
    Feb 2013
    Posts
    46
    try not getting a random div and getting the next div until there are none, then get the first again.
    http://jsfiddle.net/K6dzD/

  3. #3
    Join Date
    Feb 2013
    Posts
    5
    Quote Originally Posted by s-p-n View Post
    try not getting a random div and getting the next div until there are none, then get the first again.
    Hmm. Would I just do something like this:

    Code:
    function showDiv() {
    hideDivs(); //hide them all before we show the next one.
    var randomDiv = divs[1,2,3)];
    var div = document.getElementById(randomDiv).style.display =
    'block';

  4. #4
    Join Date
    Feb 2013
    Posts
    46
    'divs[1,2,3)];' that is not javascript, and I can't tell what you meant to put instead. Did you look at the code in the jsfiddle?

  5. #5
    Join Date
    Feb 2013
    Posts
    5
    I couldn't figure out how to do this in all the JavaScript resources I looked for.
    1,2,3 was my last futile attempt. I guess neither of us can figure this one out.

  6. #6
    Join Date
    Feb 2013
    Posts
    5
    I'm trying to rotate out 3 text-based DIV tags, one after the other.

    Div 1 should appear for 5 seconds...
    Then Div 2 should appear for 5 seconds...
    Then Div 3 should appear for 5 seconds...

    The script I posted rotates out these DIV tags randomly. The script works, but I need to tweak it so it does what I need.

    I need the script to show div 1, div 2, div 3-- in that order, not randomly.

    I can't figure out how to do that.

  7. #7
    Join Date
    Feb 2013
    Posts
    46
    Did you see the link I gave you?? Here's another: http://jsfiddle.net/K6dzD/embedded/result/

    I'll post it again, since it appears you missed the first time. This is the solution to your problem:
    http://jsfiddle.net/K6dzD/light/

  8. #8
    Join Date
    Feb 2013
    Posts
    5
    Quote Originally Posted by s-p-n View Post
    Did you see the link I gave you?? Here's another: http://jsfiddle.net/K6dzD/embedded/result/

    I'll post it again, since it appears you missed the first time. This is the solution to your problem:
    http://jsfiddle.net/K6dzD/light/

    Thanks. I actually can't get this script to work on my site. It appears blank when I embed it in the homepage. It works in JSFiddle. But, I need to have each DIV ID tag a separate DIV. My CSS stylesheet gives each DIV an h2 title with a div id="headline". Each DIV tag has formatted text, a few images, an h2 heading, and some text. I can't seem to add rich text to the script you posted.

    I can't imagine what I'm doing wrong here, and have nearly through the PC out the window more than a few times. I've probably just been staring at the page so long that I'm missing something obvious and that's why it's not working.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles