...

View Full Version : cannot add links to changing/rotating text lines



ugly_betty
09-03-2010, 12:17 PM
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, 12:40 PM
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



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

<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, 12:55 PM
Davey, THANKYOU SO MUCH for your help.

YOU are beyond awesome.

I appreciate this alot.

xoxo

ugly_betty
09-03-2010, 01: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, 01:39 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?

:-)

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


<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, 06:28 PM
Betty:

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


<!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, 01:19 AM
Thanks Fellas,

Between both your responses, I am totally sorted.

Weeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!!!!! ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum