Javascript Rotator

#1 Chip Smith

Member

Group: Members
Posts: 27
Joined: 29-September 09

Posted 03 March 2010 - 09:20 PM

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

#2 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 03 March 2010 - 09:45 PM

Quote

any thoughts?

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.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#3 Chip Smith

Member

Group: Members
Posts: 27
Joined: 29-September 09

Posted 03 March 2010 - 10:41 PM

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

#4 KamakaZ

Senior Member

Group: Members
Posts: 548
Joined: 26-August 08
Gender:Male
Location:Victoria

Posted 04 March 2010 - 12:48 AM

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

If I am helping you and don't reply in 24 hours please send me a PM

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.

#5 Chip Smith

Member

Group: Members
Posts: 27
Joined: 29-September 09

Posted 04 March 2010 - 01:04 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

#6 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 04 March 2010 - 01:41 PM

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.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#7 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 05 March 2010 - 01:12 PM

See if this helps.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#8 Chip Smith

Member

Group: Members
Posts: 27
Joined: 29-September 09

Posted 05 March 2010 - 04:49 PM

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?

#9 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 05 March 2010 - 05:24 PM

Quote

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

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.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#10 Chip Smith

Member

Group: Members
Posts: 27
Joined: 29-September 09

Posted 05 March 2010 - 05:26 PM

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

thanks again.

#11 Chip Smith

Member

Group: Members
Posts: 27
Joined: 29-September 09

Posted 05 March 2010 - 09:20 PM

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?

#12 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 05 March 2010 - 10:04 PM

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.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#13 Chip Smith

Member

Group: Members
Posts: 27
Joined: 29-September 09

Posted 07 March 2010 - 02:17 AM

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?

#14 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,522
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 07 March 2010 - 08:51 AM

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.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens