Math.random -- don't want random

[fondaa93]

I am looking to make a simple text slideshow and know pretty much nothing about Javascript, but by searching Google I found almost exactly what I needed: http://www.tutcity.com/view/text-slideshow.8380.html I do not, however, like that it is set to show the quotations randomly -- I want them shown in order of [0] to [6]. I spent a long time Googleing but wasn't able to come up with an answer. So I'm hoping one of you gurus will know how to help me.

[thescientist]

how much do you know about arrays? http://www.w3schools.com/js/js_obj_array.aspThe basic concept with an ordered carousel/slideshow widget/feature is that you step though each index in an array, in this case an array of strings. Given the tutorial

quotations[0]= "I have not failed. I've just found 10,000 ways that won't work.<br/><b>Thomas Alva Edison</b>"quotations[1]= "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier.<br/><b>Bill Gates</b>"quotations[2]= "Computers make it easier to do a lot of things, but most of the things they make it easier to do don't need to be done.<br/><b>Andy Rooney</b>"quotations[3]= "Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.<br/><b>Albert Einstein</b>"quotations[4]= "Whether you think that you can, or that you can't, you are usually right.</br><b>Henry Ford</b>"quotations[5]= "I'm going to be a great movie star some day.<br/><b>Marilyn Monroe</b>"

we have an array with length 6, with indecies of 0, 1, 2, 3, 4, and 5. So, to count through the array, instead of randomly picking an index in the array, you would want to create a variable, call it currentIndex, which each time the setTimeout calls the display function, increments this value currentIndex++ and uses that to reference a member of the array.

quotations[currentIndex];

Note: one small thing to keep in mind is that once the currentIndex reaches the length of the array (6), at the point it will have "run out" of valid index references, and so will need to be reset to 0. so, basically, you just need to make a couple of modifications that require adding a variable to store the (global) value of currentIndex, and a couple of line changes to the display function (for incrementing) currentIndex and checking to make sure it isn't >= the length of the array.I'll let you digest that and see where we come out.

[fondaa93]

Oh my. "Digest it" was definitely the correct phrase.. At first, just about all your wrote was pretty much Greek to me, but for a couple hours I have been pouring over and researching what you wrote and am definitely understanding this whole thing a little more.No, I did not know anything about arrays.. I have been researching and experimenting with creating variables, as you suggest I create one and I had no idea even what a variable was. It has been somewhat helpful, although I am still rather confused and haven't been able to do what you suggested...

[thescientist]

what do you have so far? The code from that existing tutorial will work, so let's work with that since you are already familiar with it. Basically, just focus on the basic steps:1) create a variable to store the value of currentIndex. Could initially be set to 0 if you prefer. (giving a variable a value when you make it is considered best practices)2) modify display function to increment currentIndex instead of getting the value of a from math.randomhttp://www.w3schools.com/js/js_operators.asp3) after the incrementation, you need to use the length of the (quotations) array to make sure the value of currentIndex is not >= (greater than or equal to) the value of the length of the array.http://www.w3schools.com/js/js_if_else.aspSo take a crack at it, and come back with what you got and we'll take it from there. sound good?

[fondaa93]

Okay! Yeah that makes sense! And while you were typing out that I was typing out this reply: Well I tried a different combination of words in my Google search, starting from scratch, and found something that works great! I may rename some of it, but I tried it out and does just what I want it to. I don't know if this was what you were trying to show me all along or not..

<html><head><title>Text Slideshow in javascript</title><script type="text/javascript" language="javascript">var slideArray = new Array()slideArray[1]= "One";slideArray[2]= "Two";slideArray[3]= "Three";function firstSlide(){ document.getElementById('div_display').innerHTML=slideArray[1];setTimeout("secondSlide()",2000); }function secondSlide(){ document.getElementById('div_display').innerHTML=slideArray[2];setTimeout("thirdSlide()",2000); }function thirdSlide(){ document.getElementById('div_display').innerHTML=slideArray[3];setTimeout("fourthSlide()",2000); }</script></head><body><div id="div_display"><script type="text/javascript" language="javascript">firstSlide();</script></div></body></html>

If you don't mind, I am still stumped on how to change the format of the font, etc. This is what I was using for my regular html/css and I want the font in my slideshow to be the same:

#left p.comment {  margin: 0 20px;  padding-top: 20px;  font-size: 1.1em;  font-style: italic;}

Thanks soo much for all your help!

[thescientist]

Okay! Yeah that makes sense! And while you were typing out that I was typing out this reply: Well I tried a different combination of words in my Google search, starting from scratch, and found something that works great! I may rename some of it, but I tried it out and does just what I want it to. I don't know if this was what you were trying to show me all along or not..

<html><head><title>Text Slideshow in javascript</title><script type="text/javascript" language="javascript">var slideArray = new Array()slideArray[1]= "One";slideArray[2]= "Two";slideArray[3]= "Three";function firstSlide(){ document.getElementById('div_display').innerHTML=slideArray[1];setTimeout("secondSlide()",2000); }function secondSlide(){ document.getElementById('div_display').innerHTML=slideArray[2];setTimeout("thirdSlide()",2000); }function thirdSlide(){ document.getElementById('div_display').innerHTML=slideArray[3];setTimeout("fourthSlide()",2000); }</script></head><body><div id="div_display"><script type="text/javascript" language="javascript">firstSlide();</script></div></body></html>

If you don't mind, I am still stumped on how to change the format of the font, etc. This is what I was using for my regular html/css and I want the font in my slideshow to be the same:

#left p.comment {  margin: 0 20px;  padding-top: 20px;  font-size: 1.1em;  font-style: italic;}

Thanks soo much for all your help!

That is a perfectly acceptable solution (as it works and does what you want.) but you would probably agree that there's a lot of duplication, and no "wrapping" feature. You seem to have the idea down, so let's refine it to what I had in mind. (and I'll throw in the CSS fix for free! )

<html><head>  <title>Text Slideshow in javascript</title>  <script type="text/javascript"">	var quoteEle= document.getElementById('quotation');	var slideArray = new Array();	slideArray[0]= "One";	slideArray[1]= "Two";	slideArray[2]= "Three";	var arrayLength = slideArray.length;  //equals 3	var currentIndex = arrayLength;	   //will also equals 3  	function display(){	   currentIndex++;  //increments the value of currentIndex by 1, i.e. currentIndex = currentIndex + 1	   if(currentIndex >= arrayLength){  //wraps if currentIndex goes "out of bounds"		 currentIndex = 0;	   };	   var quote = slideArray[currentIndex];   //gets a quote at the index specified by currentIndex's value	   quoteEle.innerHTML = quote;	   setTimeout("display()" , 5000);	 }();											//sneaky part - () causes display to execute immediately, no need to call it explicitely  </script>  <style type="text/css">  #quotation{	margin: 0px 20px;	padding-top: 20px;	font-size: 1.1em;	font-style: italic;  }  </style>  </head><body><div id="div_display">  <p id="quotation"></p></div></body></html>

just off the top of my head, but let's see how it goesedit: you need to start the array indexes at 0. That's how computers count. I've changed my example to reflect this brief oversight.

[fondaa93]

Yes it's definitely repetitive, but it certainly looks more simple than the one you just gave me. haha Def a lot of stuff way over my head yet! :)For some reason the code you posted didn't work.. Dunno why.. But thank you for pointing out the requirement of starting array indexes at 0. Will certainly be good to remember for future reference. I wasn't sure if copying the #quotation part into my previous version would work, but I tried it and noticed that <p id="quotation"> and <script type="text/javascript" language="javascript"> don't get along..

[thescientist]

I imagine there might be an error or two in the code. It is simple enough to check for errors in the browser you are using. The biggest advantage that my code has versus your implementation was that you had to make a function for every single quotation. In this case you only need to define the array and it's values and the code will handle it without any modifications being made (no matter how big or small the array is). In this way it is highly reusable, and generic enough that it can be used in other applications without having to change anything to it.I know I threw an advanced concept at you (the self executing function - () ), but the rest is all just simple array traversal, which just comes after having had basic familiarity with arrays in general. Here's a little more conventional approach. We use window.onload to start display after the window has finished loading so we know that <p id="quotations"> exists, which was part of my problem in the first example. This example works though.

<html><head>  <title>Text Slideshow in javascript</title>  <script type="text/javascript"">	  var quoteEle= document.getElementById('quotation');	  var slideArray = new Array();	  slideArray[0]= "One";	  slideArray[1]= "Two";	  slideArray[2]= "Three";	  var arrayLength = slideArray.length;  //equals 3	  var currentIndex = arrayLength;	   //will also equals 3	  function display(){		currentIndex++;  //increments the value of currentIndex by 1, i.e. currentIndex = currentIndex + 1		if(currentIndex >= arrayLength){  //wraps if currentIndex goes "out of bounds"		  currentIndex = 0;		};			var quote = slideArray[currentIndex];   //gets a quote at the index specified by currentIndex's value	 	quoteEle.innerHTML = quote;	 	var t = setTimeout("display()" , 1000);	  };	    <script>    <style type="text/css">  #quotation{	margin: 0px 20px;	padding-top: 20px;	font-size: 1.1em;	font-style: italic;  }  </style></head><body><div id="div_display">  <p id="quotation"></p></div><script type="text/javascript">  window.onload = display();	 //when the window has loaded, call the display function								  </script>  </body></html>

[jeffman]

@thescientist: Are you sure you want this statement in the global space at the top of the document?var quoteEle= document.getElementById('quotation');

[fondaa93]

Oh dear.. This one isn't working either.. :)I do understand what you are saying about the advantage of that one over my previous one, though.

I help random guys who have no idea what they're doing all the time . . .

That would be me.. lol

[jeffman]

Oops. This won't work either:

<script type="text/javascript">  window.onload = display();								  </script>

As thescientist well knows, that will execute display as soon as the line of code is parsed, which is before the window has loaded. You might not notice te problem, since the rest of the doc has in fact loaded. Since that script is at the bottom of the page, simplifying it to this should work:

<script type="text/javascript">  display();								  </script>

[jeffman]

That statement I mentioned earlier:

var quoteEle= document.getElementById('quotation');

Try moving it to the top of your display function.

[fondaa93]

Are you sure? Maybe it's something with my computer..

[jeffman]

You would KNOW if something is wrong with your computer. :)Post the latest version of your document. I get a little nervous after a few changes have been made, but I don't know yet just what they look like.

[thescientist]

weird, the version I posted in post #8 seemed to work fine in Chrome

[fondaa93]

:)Uh, thescientist's code with <script type="text/javascript"> window.onload = display(); </script> changed to <script type="text/javascript"> display(); </script>andvar quoteEle= document.getElementById('quotation'); moved "to the top of your display function", but I wasn't sure where exactly that was but nothing worked so I put it nowhere.. lol<html><head> <title>Text Slideshow in javascript</title> <script type="text/javascript""> var slideArray = new Array(); slideArray[0]= "One"; slideArray[1]= "Two"; slideArray[2]= "Three"; var arrayLength = slideArray.length; //equals 3 var currentIndex = arrayLength; //will also equals 3 function display(){ currentIndex++; //increments the value of currentIndex by 1, i.e. currentIndex = currentIndex + 1 if(currentIndex >= arrayLength){ //wraps if currentIndex goes "out of bounds" currentIndex = 0; }; var quote = slideArray[currentIndex]; //gets a quote at the index specified by currentIndex's value quoteEle.innerHTML = quote; var t = setTimeout("display()" , 1000); }; <script> <style type="text/css"> #quotation{ margin: 0px 20px; padding-top: 20px; font-size: 1.1em; font-style: italic; } </style></head><body><div id="div_display"> <p id="quotation"></p></div><script type="text/javascript"> display(); </script> </body></html>

[fondaa93]

weird, the version I posted in post #8 seemed to work fine in Chrome

Okay that is weird.. Cuz I use Chrome, too.. What do you use to test it?

[thescientist]

@thescientist: Are you sure you want this statement in the global space at the top of the document?var quoteEle= document.getElementById('quotation');

for the sake of this example, I wasn't sure if it was that big of a deal or not. Normally I try and go all out and probably would have made a function with a display method, locally scoped variables, etc... maybe full-fledged self-execution, :)

[thescientist]

Okay that is weird.. Cuz I use Chrome, too.. What do you use to test it?

I saved all that code in it's own html file and in Chrome just wentFile -> open file; and let it do it's thing.

[fondaa93]

I saved all that code in it's own html file and in Chrome just wentFile -> open file; and let it do it's thing.

Uh, is it going to make a difference that my website is made of .php pages

[jeffman]

1. Make that line the FIRST line of display()2. The closing </script> tag for the top script is missing the / character.With those 2 changes, it works for me in FF4

[thescientist]

Uh, is it going to make a difference that my website is made of .php pages

not for the sake of getting this example to work. And probably not overall but that's a bridge we can get to after the scope of this specific topic is covered. If you have special requirements to be addressed, we can do that after we verify that you have a working copy of this code running on it's own, acting as a proof of concept.

[jeffman]

FWIW, I'm using Chrome 11.0.696.34 beta (Macintosh) and it throws an exception when quoteEle is defined before the <p> is written into the DOM. Works as expected when I move it into display().

[thescientist]

FWIW, I'm using Chrome 11.0.696.34 beta (Macintosh) and it throws an exception when quoteEle is defined before the <p> is written into the DOM. Works as expected when I move it into display().

oh bother. ah well. can't win em all!

[fondaa93]

Bleh it still didn't work. But before I saw your reply I had been searching on Google and came up with a way to modify my original rudimentary version... For some reason my margins aren't working correctly, but other than that..

	<h2 class="sidebar-heading">Testimonies:</h2><html><head>  <title>Testimonies</title><style type="text/css">#quote {  margin: 0 20px;  padding-top: 20px;  font-size: 1.1em;  text-align: left;  line-height: 1.8;}</style>  <script type="text/javascript" language="javascript">	var testimony = new Array()	testimony[1]= "<i>"First Testimony"</i>";	testimony[2]= "<i>"Second Testimony"</i>";	testimony[3]= "<i>"Third Testimony"</i>";	function firstTestimony()	   { document.getElementById('div_display').innerHTML=testimony[1];	   setTimeout("secondTestimony()",4000); }	function secondTestimony()	   { document.getElementById('div_display').innerHTML=testimony[2];	   setTimeout("thirdTestimony()",4000); }	function thirdTestimony()	   { document.getElementById('div_display').innerHTML=testimony[3];	   setTimeout("firstTestimony()",4000); }  </script></head><body>  <span id="quote">   <div id="div_display"><script type="text/javascript" language="javascript">firstTestimony();</script></div>  </span></body></html>

So I don't know where that puts us.... lol