473,395 Members | 2,798 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

How to Rotate/Slideshow Text DIVs on page?

6
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.


Expand|Select|Wrap|Line Numbers
  1. <div id="d1" style="display:none;">some text 1</div>
  2. <div id="d2" style="display:none;">some text 2</div>
  3. <div id="d3" style="display:none;">some text 3</div>
  4.  
  5. <script type="text/javascript">
  6. divs = ['d1','d2','d3'];
  7.  
  8. function hideDivs() {
  9. for (var i=0; i<divs.length; i++)
  10. document.getElementById(divs[i]).style.display = 'none';
  11. }
  12.  
  13. function showDiv() {
  14. hideDivs(); //hide them all before we show the next one.
  15. var randomDiv = divs[Math.floor(Math.random()*divs.length)];
  16. var div = document.getElementById(randomDiv).style.display =
  17. 'block';
  18.  
  19. setTimeout(showDiv,500); //set a delay before showing the next div
  20. }
  21.  
  22. showDiv();
  23. </script>
Feb 28 '13 #1
10 2130
Rabbit
12,516 Expert Mod 8TB
Please use code tags when posting code.

All you need to do is get rid of the random part and use a variable to track which sequential div to use next.
Feb 28 '13 #2
oooo
6
Thanks. How would I go about doing that? Nothing I've tried has worked, and I can't find anything that's a 'how to' about this online.
Feb 28 '13 #3
Rabbit
12,516 Expert Mod 8TB
Please post one of the things you've tried so I can see where you went wrong.
Feb 28 '13 #4
oooo
6
Here's the most recent thing I tried.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. divs = ['d1','d2','d3'];
  3.  
  4. function hideDivs() {
  5. for (var i=0; i<divs.length; i++)
  6. document.getElementById(divs[i]).style.display = 'none';
  7. }
  8.  
  9.  
  10. function showDiv() {
  11. hideDivs(); //hide them all before we show the next one.
  12. var Div1 = document.getElementById(d1).style.display =
  13. 'block';
  14. var Div2 = document.getElementById(d2).style.display =
  15. 'block';
  16. var Div3 = document.getElementById(d3).style.display =
  17. 'block';
  18.  
  19. setTimeout(showDiv,5000); //set a delay before showing the next div
  20. }
  21.  
  22. showDiv();
  23.  
Feb 28 '13 #5
Rabbit
12,516 Expert Mod 8TB
For one thing, you hide them all, and then right away you display them all. You also need a variable to keep track of where you are in the sequence so you know which one to display.
Feb 28 '13 #6
oooo
6
I'm beyond lost.

Did I at least display a specific div right in this code?
Feb 28 '13 #7
Rabbit
12,516 Expert Mod 8TB
If you're this lost, it would benefit you to work through a javascript tutorial before trying to write javascript. I recommend the one on w3schools.

You didn't display one correctly. You need to put the name of the div in quotes.
Feb 28 '13 #8
oooo
6
I'm just trying to edit an existing open source script, not write one. I've read tutorials and books, but I don't understand how to edit this script to do what we need it to.

I'll try adding quotes to this
Expand|Select|Wrap|Line Numbers
  1. var Div3 = document.getElementById('d3').style.display =
  2. 'block';
Feb 28 '13 #9
Rabbit
12,516 Expert Mod 8TB
Please use code tags when posting code.

All that will do is make d3 visible. You still need to create a variable to track the next div you need to make visible.

You should be aware that editing a javascript necessitates that you write javascript. Therefore, learning and knowing the basics of javascript will greatly help your attempts in editing javascript.
Feb 28 '13 #10
oooo
6
Ah. I guess I should change my question to be:

"are there any open source scripts already out there that do what I am looking for here?"
Feb 28 '13 #11

Sign in to post your reply or Sign up for a free account.

Similar topics

7
by: yawnmoth | last post by:
i'm trying to display text while a page is loading using a method similar to the following: <? ob_end_flush(); echo 'AAA<br>'; flush(); sleep(10); echo 'BBB'; ?>
16
by: juglesh | last post by:
Hello, I need to look through the text on a page and replace certain words with an image or other word something like: read document find all instances of the word "blah" change all...
1
by: Rex B | last post by:
I need to rotate a text box, can't figure out how. Can anyone point me in the right direction? -- - - Rex Burkheimer WM Automotive Fort Worth TX
2
by: Guoqi zheng | last post by:
Dear sir, I am using the default paging function of datagrid. Below is my code. <PagerStyle NextPageText="&gt;&gt;&gt;" PrevPageText="&lt;&lt;&lt;" HorizontalAlign="Center" Mode="NumericPages"></PagerStyle> ...
1
by: RC | last post by:
First, this is a SVG issue, not 100% of XML issue. But I can't find SVG group to post this. Since SVG is XML file, I post here hopefully someone know both SVG and XML can help. Here is my SVG...
4
by: Michael | last post by:
Hi, I have some wierdness that I can't figure out. Take a look at www.members.iinet.net.au/~melacey This is a very much cut down page to where I saw the problem, but it seems to illustrate it,...
1
by: =?Utf-8?B?cHJhYmh1XzI3Xzg0?= | last post by:
hi i am creating many radio RadioButtonList dynamically in page load.its working find.now i want to select a text in radio button(Autopostback is true for radio buttonlist) and find that text in...
2
by: mccanaveras | last post by:
Hello, I don't know how I can rotate a text 45 or 90º. I'm looking forward to have an answer because I'm in a hurry. Thanking you in anticipation for your cooperation
17
by: handique | last post by:
Hi, I have javascript code for rotating images, but the rotation starts only when mouse is placed over the image. But i want to rotate images automatically when the page loads. Can any guide me in...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.