Link to home
Start Free TrialLog in
Avatar of burnsj2
burnsj2

asked on

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

ASKER CERTIFIED SOLUTION
Avatar of alien109
alien109
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of burnsj2
burnsj2

ASKER

I think that will do it.  Thanks!