BleepingComputer.com: Javascript Rotator

Not rotating by turning it 90 degrees this way or that...but I have a few phrases that i'd like to rotate through on a timer...for example when the page loads, this particular area will have text that says click now to get your special pizza. and then 1.5 minutes later, it changes to some other text that has been predetermined.

i just want to use text for this so i can style it with the css.

any thoughts?

TIA

Quote

Do you mean like how to do it? Sure. You use javascript to change the message. CSS is always applied to an element, so no matter the message, the CSS will be applied to it. I answered a thread on here at some point about changing text using Javascript. I can't remember where it was though.

using javascript, will i be able to add href links and such on the text that changes?

One question, do you want the rotation to be done when the page reloads, so users get different ads when they view the page, or have the page cycle through the ads?

You could try giving this a go: http://simplythebest.net/scripts/DHTML_scr...script_131.html

This post has been edited by KamakaZ: 04 March 2010 - 12:48 AM

that'd be great, however the content that will be cycling through is text with formatting...it looks like that script is only good for pics.


EDIT: I tried that code and attempted changing the pics for text with no luck

This post has been edited by Chip Smith: 04 March 2010 - 01:05 AM

What exactly did you do to the code to try and change it? We have no way possible to help you without knowing what you did. The script will do whatever you want it to do; all you are interested is the cycling mechanism. The code will have to be altered to change the text.

See if this helps.

Awesome, thank you groovicus.

I'm not extremely familiar with javascript coding, and I can make some sense of the given code. However, to clarify, how would I use plain text with links or images in that rotating script?

My best guess:

		<script type="text/javascript">
		var i=0,
			links = [
						'Some text goes here', 
						'Some text with [link]web address[/link] goes here', 
						'[img]image[/img] Some text with image goes here'
						],
			seconds = 10;

		function rotator(){
		   setTimeout("changeLink()", 1000 * seconds);
		}

		function changeLink(){
		   document.getElementById('myDiv').innerHTML = '<a href='+links[i]+'>' + links[i] + '</a>';
		   i+=1;			
		   if(i===links.length){
			  i=0;
		   }
		   rotator();		}
	   </script>

I'm sure my example is way off from what the actual markup is supposed to be in java language...but also, i wouldn't want each entry to be a link, only parts of the entry to be links, if necessary...I'm sure this is real confusing.

On a side note, I assume that I can style the 'myDiv' div in CSS to conform to the rest of the site?

Quote

Yes.

Quote

You are working with HTML and Javascript. Java is something completely different.

The stuff that is contained in the array can simply be HTML (enclosed in single quotes). For instance, the contents of your array could look like this:

   links = [ 'I am a Bing Link: <a href="http://www.bing.com">Click Here for Bing</a>',
				 'Click here for really cool things: <a href="www.bleepingcomputer.com">Malware Removal</a>',
				  .....
						],

Then all you would need to do is change your javascript just slightly:

   document.getElementById('myDiv').innerHTML = links[i];

If you want a link first, or an image, or whatever you want, just add the HTML representation to the array.

great! thanks! i'll give it a go and see what happens.


thanks again.

that worked great! now to be tacky, i'm trying to add a second instance of this rotator on a page.

I'm assuming that i need to change the div that's mentioned in the script (myDiv), change 'links', and 'rotator' all to be different names and then add it to the body onload....correct?

There are lots of different ways to do it. I don't think you can call two functions from onload though, so what you need to do is have it call a single function that in turn calls your rotator functions. Obviously the functions can not have the same name, so you might have one function called 'linkRotator', and another function called 'imageRotator', or something like that. Each rotator needs its own counter also.

Ok, it's all over my head as I don't know java language or where to start with all that.

On another thought...when this is setup, there's a 10 sec delay when nothing is displayed. can the script be changed to display the first item as soon as the page is loaded?

It is not Java. It is Javascript. they are completely unrelated.

If you want a link there to begin with, then put it in the div like you normally would.