Skip navigation
Currently Being Moderated

News feed box

Jan 30, 2011 6:59 AM

<style type="text/css">

 

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}

 

</style>

 

<script type="text/javascript">

 

 

var delayb4scroll=2000 //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.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"p x" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

 

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
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>

 


<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

 

<!--YOUR SCROLL CONTENT HERE-->

 

<h4>Your scroller contents</h4>

 

<!--YOUR SCROLL CONTENT HERE-->

 

</div>
</div>

 

 

This is the code i am using it seems to be working fine when i have only one of these on the page, but if add one more, then the second box does'nt work, infact the two get mixed up.. take a look at it http://www.haramausic.com/test.html, notice how the boxes are mixed up.

 

Please help. Thank you.

 
Replies
  • Currently Being Moderated
    Jan 30, 2011 11:36 AM   in reply to NeilSBob

    Well the problem with just putting 2 marquees on the same page is you aren't changing your variable names to make each one unique and therefore the script confuses the 2 marquees.

     

    The solution is to make 2 different marquee IDs:

     

    <style type="text/css">

     

    #marqueecontainer1{
    position: relative;
    width: 200px; /*marquee width */
    height: 200px; /*marquee height */
    background-color: white;
    overflow: hidden;
    border: 3px solid orange;
    padding: 2px;
    padding-left: 4px;
    }

     

    #marqueecontainer2{
    position: relative;
    width: 200px; /*marquee width */
    height: 200px; /*marquee height */
    background-color: white;
    overflow: hidden;
    border: 3px solid orange;
    padding: 2px;
    padding-left: 4px;
    }

     

    </style>

     

    Then you need to use the javascript to activate each one.  Something like this:

     

    function initializemarquee1(){
    cross_marquee=document.getElementById("vmarquee1")
    cross_marquee.style.top=0
    marqueeheight=document.getElementById("marqueecontainer1").offsetHeight
    actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
    if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    cross_marquee.style.height=marqueeheight+"px"
    cross_marquee.style.overflow="scroll"
    return
    }
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }

     

    function initializemarquee2(){
    cross_marquee=document.getElementById("vmarquee2")
    cross_marquee.style.top=0
    marqueeheight=document.getElementById("marqueecontainer2").offsetHeight
    actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
    if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    cross_marquee.style.height=marqueeheight+"px"
    cross_marquee.style.overflow="scroll"
    return
    }
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }

    and then you need to call both functions when the page loads:
    if (window.addEventListener)
    window.addEventListener("load", initializemarquee1, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializemarquee1)
    else if (document.getElementById)
    window.onload=initializemarquee1
    if (window.addEventListener)
    window.addEventListener("load", initializemarquee2, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializemarquee2)
    else if (document.getElementById)
    window.onload=initializemarquee2
    Of course this means you need to have 2 different marquees in the body too:
    <div id="marqueecontainer1" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
    <div id="vmarquee1" style="position: absolute; width: 98%;">
    <div id="marqueecontainer2" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
    <div id="vmarquee2" style="position: absolute; width: 98%;">

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points