Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    cannot add links to changing/rotating text lines

    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>

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by ugly_betty View Post
    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>

  • Users who have thanked DaveyErwin for this post:

    ugly_betty (09-03-2010)

  • #3
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Davey, THANKYOU SO MUCH for your help.

    YOU are beyond awesome.

    I appreciate this alot.

    xoxo

  • #4
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    eeep, I have one more question.

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

    :-)

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by ugly_betty View Post
    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>

  • Users who have thanked DaveyErwin for this post:

    ugly_betty (09-04-2010)

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    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>
    Last edited by Sciliano; 09-03-2010 at 06:15 PM.

  • Users who have thanked Sciliano for this post:

    ugly_betty (09-04-2010)

  • #7
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks Fellas,

    Between both your responses, I am totally sorted.

    Weeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!!!!!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •