Scrolling down marquee buttons

StackOverflow https://stackoverflow.com/questions/17570952

  •  02-06-2022
  •  | 
  •  

Question

Hello im trying to make a scrolling down text ( like marquee but with no space between the messages) the problem is that i want to have 2 buttons that will change the scrolling, for example if i click the button with the arrow pointing up the text will move up. Thanks in advance for any answers! Here is my code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<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" />
  <title></title>
<style type="text/css">

#marqueecontainer{
position: relative;
width: 260px; /*marquee width */
height: 360px; /*marquee height */
overflow: hidden;
background-color: white;
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.bottom)>(actualheight*(-1)+8))
cross_marquee.style.bottom=parseInt(cross_marquee.style.bottom)-copyspeed+"px"
else
cross_marquee.style.bottom="0px"
}

function initializemarquee(){
 cross_marquee=document.getElementById("vmarquee")
 cross_marquee.style.bottom=0

 marqueeheight=document.getElementById("marqueecontainer").offsetHeight
 actualheight=cross_marquee.offsetHeight;
 var div=cross_marquee.cloneNode(true);
 div.style.left='0px';
 div.style.bottom=actualheight+'px';
 cross_marquee.appendChild(div);
 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></head>

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


<p>Message 1 </p>

</div>
</div>
<input style="position: absolute; left: 902px; top: 153px;"   type="image" width="35" height="35" src="../images/arrow-button-up.png" onmouseover="changeMarquee('up')" onmouseout="changeMarquee('speedup')" id="upBtn" value="Marquee up" /> 
  <input style="position: absolute; left: 902px; top: 518px;"   type="image" width="35" height="35" src="../images/arrow-button-down.png" onmouseover="changeMarquee('down')"   onmouseout="changeMarquee('speeddown')" onfocus="" onclick="" id="downBbtn" value="Marquee down" />
</body>

</html>
Was it helpful?

Solution

Here's a JavaScript that might be able to help you out. http://jsfiddle.net/HZSVE/3/

Instead of doing pixel wise scrolling it takes the inner elements of the marquee and, appends the first element to the bottom for scrolling down or inserts the last element to the beginning for scrolling up.

var vmElm = document.getElementById("vmarquee");
var vmBtnDown = document.getElementById("vmdown");
var vmBtnUp = document.getElementById("vmup");

var startTime = 2000;
var scrollTime = 500;
var scrollDown = true;
var paused = false;

vmElm.onmousemove = function() {
    paused=true; 
};
vmElm.onmouseout = function() {
    paused=false; 
};
vmBtnDown.onclick = function() {
    scrollDown = true;
};
vmBtnUp.onclick = function() {
    scrollDown = false;
};
function vmScroll() {
    if(!paused) {
        var par = vmElm;
        var elms = par.getElementsByTagName("div");
        var elm;
        if(scrollDown) {
            elm = elms[0];
            par.removeChild(elm);
            par.appendChild(elm);
        } else {
            elm = elms[elms.length - 1];
            par.removeChild(elm);
            par.insertBefore(elm, elms[0]);
        }
    }
    setTimeout(vmScroll, scrollTime);
}

setTimeout(vmScroll, startTime);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top