cannot add links to changing/rotating text lines

ugly_betty · 09-03-2010, 11:17 AM

Hi all,

I hoping somebody can help me.

I'm trying to acheive a line of text (with multiple links on each line) that change at set intervals.

The code below seems to be working but I can only get working links on the first line that appears.

Please can somebody help a gal out?

xo

[CODE]
<html>
<head>
<title>Rotating Text</title>
<script type="text/javascript">
var rotatingTextElement;
var rotatingText = new Array();
var ctr = 0;

function initRotateText() {
rotatingTextElement = document.getElementById("textToChange");
rotatingText[0] = rotatingTextElement.innerHTML;
rotatingText[1] = "why won't you work!?!?!?";
rotatingText[2] = "purdy please";
setInterval(rotateText, 5000);
}
function rotateText() {
ctr++;
if(ctr >= rotatingText.length) {
ctr = 0;
}
rotatingTextElement.innerHTML = rotatingText[ctr];
}
window.onload = initRotateText;
</script>
</head>
<body>
<span id="textToChange">log into your <a href="http://www.hotmail.com/">please</a> policy.</a> | can you <a href="http://www.google.com"> me?</a> </span>
</body>
</html>

DaveyErwin · 09-03-2010, 11:40 AM

Quote:

Originally Posted by ugly_betty

Hi all,

I hoping somebody can help me.

I'm trying to acheive a line of text (with multiple links on each line) that change at set intervals.

The code below seems to be working but I can only get working links on the first line that appears.

Please can somebody help a gal out?

xo

Code:

<html>
<head>
<title>Rotating Text</title>
<script type="text/javascript">
var rotatingTextElement;
var rotatingText = new Array();
var ctr = 0;

function initRotateText() {
rotatingTextElement = document.getElementById("textToChange");
rotatingText[0] = rotatingTextElement.innerHTML; 
rotatingText[1] = "why won't you work!?!?!?";
rotatingText[2] = "purdy please";
setInterval(rotateText, 5000);
}
function rotateText() {
ctr++;
if(ctr >= rotatingText.length) {
ctr = 0;
}
rotatingTextElement.innerHTML = rotatingText[ctr];
}
window.onload = initRotateText;
</script>
</head>
<body>
<span id="textToChange">log into your <a href="http://www.hotmail.com/">please</a> policy.</a> | can you <a href="http://www.google.com"> me?</a> </span> 
</body>
</html>

Code:

<html>
<head>
<title>Rotating Text</title>

</head>
<body>
<span id="textToChange">log into your <a href="http://www.hotmail.com/">please</a> policy.</a> | can you <a href="http://www.google.com"> me?</a> </span> 
</body>
</html> 

<script type="text/javascript">
var rotatingTextElement;
var rotatingText = new Array();
var ctr = 0;

function initRotateText() {
rotatingTextElement = document.getElementById("textToChange");
rotatingText[0] = rotatingTextElement.innerHTML; 
rotatingText[1] = "why won't you <a href='http://www.msn.com'>work</a>!?!?!?";
rotatingText[2] = "purdy please";
rotatingText[3] = "because you said purdy";
rotatingText[4] = "here is an answer";
setInterval(rotateText, 5000);
}
function rotateText() {
ctr++;
if(ctr >= rotatingText.length) {
ctr = 0;
}
rotatingTextElement.innerHTML = rotatingText[ctr];
}
window.onload = initRotateText;
</script>

ugly_betty · 09-03-2010, 11:55 AM

Davey, THANKYOU SO MUCH for your help.

YOU are beyond awesome.

I appreciate this alot.

xoxo

ugly_betty · 09-03-2010, 12:23 PM

eeep, I have one more question.

How is it possible for me to change the font style and size on ALL of the lines?

:-)

DaveyErwin · 09-03-2010, 12:39 PM

Quote:

Originally Posted by ugly_betty

eeep, I have one more question.

How is it possible for me to change the font style and size on ALL of the lines?

:-)

Well you didn't say purdy !
But i give you this ...
(even though this is a CSS question)

Code:

<html>
<head>
<title>Rotating Text</title>

</head>
<body>
<span id="textToChange" style="color:red;">log into your <a href="http://www.hotmail.com/">please</a> policy.</a> | can you <a href="http://www.google.com"> me?</a> </span> 
</body>
</html> 

<script type="text/javascript">
var rotatingTextElement;
var rotatingText = new Array();
var ctr = 0;

function initRotateText() {
rotatingTextElement = document.getElementById("textToChange");
rotatingText[0] = rotatingTextElement.innerHTML; 
rotatingText[1] = "why won't you <a href='http://www.msn.com'>work</a>!?!?!?";
rotatingText[2] = "purdy please";
rotatingText[3] = "because you said purdy";
rotatingText[4] = "here is an answer";
setInterval(rotateText, 5000);
}
function rotateText() {
ctr++;
if(ctr >= rotatingText.length) {
ctr = 0;
}
rotatingTextElement.innerHTML = rotatingText[ctr];
}
window.onload = initRotateText;
</script>

Sciliano · 09-03-2010, 05:28 PM

Betty:

Here's a version which uses valid markup, is accessible, unobtrusive and pauses on mouseover:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">	
	
	var rotate = "";
	var nMessage = 0;	
	
	function rotateMessage(messageContainer,rotateDelay,messages){

		messageContainer.firstChild.data = messages[nMessage];	
		nMessage = nMessage == messages.length-1 ? 0 : nMessage + 1;			
		rotate = setTimeout
			(
			 function()
				{
				 rotateMessage(messageContainer,rotateDelay,messages)
				}
			 , rotateDelay * 1000 
			);	
	}

	function init(){		

		var rotateDelay = 3;  // 3 seconds;

		var messages = [];		
		var nDiv = document.getElementsByTagName('div');
		for (i=0; i<nDiv.length; i++)
			{
			 if (nDiv[i].className == "message_display")
				{
				 var messageContainer = nDiv[i];
				 var nItems = nDiv[i].getElementsByTagName('ul')[0].getElementsByTagName('li');
				 for (n=0; n<nItems.length; n++)
					{
					 messages[messages.length] = nItems[n].firstChild.data;
					}
				}
			}
		while(messageContainer.lastChild)
			{
			 messageContainer.removeChild(messageContainer.lastChild);
			}
		messageContainer.appendChild(document.createTextNode(' '));
		messageContainer.onmouseover = function()
			{
			 this.style.cursor = "wait";
			 clearTimeout(rotate);
			 this.onmouseout = function()
				{
				 this.style.cursor = "default";
				 rotate = setTimeout
					(
					 function()
						{
						 rotateMessage(messageContainer,rotateDelay,messages)
						}
					 , rotateDelay * 1000 * .25
					);
				}
			}	
		rotateMessage(messageContainer,rotateDelay,messages)
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script>
<style type="text/css">

	 body {background-color: #fffacd; margin-top: 60px;}
	.message_display {width: 500px; border: 1px solid black; text-align: center; 
	            	  font-family: tahoma; font-size: 12pt; background-color: #eee8aa;
		    	  font-weight: bold; padding: 3px; margin: auto; cursor: default;}
	.message_display ul {margin: 0px;}

</style>
</head>
	<body>
		
		<div class="message_display">
			<ul>
				<li>This is the first message</li>
				<li>This is the second message</li>
				<li>This is the third message</li>
				<li>This is the fourth message</li>
				<li>This is the fifth message</li>
			</ul>
		</div>		

	</body>
</html>

ugly_betty · 09-04-2010, 12:19 AM

Thanks Fellas,

Between both your responses, I am totally sorted.

Weeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!!!!!