• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 220
  • Last Modified:

Javascript single to multiple instances

Hi,
I have the attached code.  It scrolls text horizontal to create a marquee.  The original version will only scroll one string of text per page since its using getElementById.  How can I make it scroll any number of elements?  The snippet that actually holds the text to be scrolled is this:

<div id="marqueecontainer">
<span id="vmarquee" style="position: absolute; width: 98%;"><nobr>
TEXT TO SCROLL HERE
</nobr></span>
<span id="vmarquee2" style="position: absolute; width: 98%;"></span>
</div>

Thanks,

<style type="text/css">
 
#marqueecontainer{
position: relative;
width: 100px%; /*marquee width */
height: 15px; /*marquee height */
 
color:#4a4a4a;
overflow: hidden;
border: none;
padding: 1px;
 
text-align:left;
font-size:11px;
}
 
 
</style>
 
<script type="text/javascript">
 
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var delayb4scroll=1000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
 
////NO NEED TO EDIT BELOW THIS LINE////////////
 
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
 
function scrollmarquee(){
if (parseInt(cross_marquee.style.left)<(actualwidth*(-1)+4))
cross_marquee.style.left=(parseInt(cross_marquee2.style.left)+actualwidth+4)+"px"
if (parseInt(cross_marquee2.style.left)<(actualwidth*(-1)+4))
cross_marquee2.style.left=(parseInt(cross_marquee.style.left)+actualwidth+4)+"px"
cross_marquee2.style.left=parseInt(cross_marquee2.style.left)-copyspeed+"px"
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
}
 
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee2=document.getElementById("vmarquee2")
cross_marquee.style.left=0
marqueewidth=document.getElementById("marqueecontainer").offsetWidth
actualwidth=cross_marquee.firstChild.offsetWidth
cross_marquee2.style.left=actualwidth+4+'px'
cross_marquee2.innerHTML=cross_marquee.innerHTML
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
 
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>

Open in new window

0
burnsj2
Asked:
burnsj2
1 Solution
 
alien109Commented:
you could try something like this... rather than requiring unique id's for the messages, you can just supply as many as you need, as long as they are spans with the class of "message".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Language" content="en-us" />
 
	<title></title>
 
	<style type="text/css">
	#marquee {
		width:120px;
		height:19px;
		overflow:hidden;
		white-space:nowrap;
		position:relative;
		border:1px solid #000;
	}
 
	#messages {
		position:absolute;
		white-space:nowrap;
	}
 
	.message {
		margin-right:10px;
	}
	</style>
 
	<script type="text/javascript">
 
	var initDelay = 1000;
	var speed = 10;
 
	function initMarquee()
	{
		document.getElementById("messages").style.left = "0px";
		setTimeout(updateMarquee, initDelay);
 
	}
 
	function updateMarquee()
	{
		var messages = document.getElementById("messages");
		var messagesList = messages.getElementsByTagName("span");
		var firstMessage = messagesList[0];
 
		var pos = parseInt(messages.style.left) - 1;
		var lmWidth = firstMessage.offsetWidth;
 
		messages.style.left = pos+"px"
 
		if(-pos >= lmWidth + 10)
		{
			messagesList[0].parentNode.appendChild(messagesList[0]);
			messages.style.left = "0px";
		}
		setTimeout(updateMarquee, speed);
	}
 
	</script>
 
</head>
<body onload="initMarquee();">
 
<div id="marquee">
	<div id="messages"><span class="message">This is message 1</span><span class="message">This is message 2</span><span class="message">This is message 3</span></div>
</div>
 
</body>
 
</html>

Open in new window

0
 
burnsj2Author Commented:
I think that will do it.  Thanks!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now