marque like with javascript

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

  •  02-06-2022
  •  | 
  •  

Question

Hello again i found a great script that does almost what i want the problem is that its not moving on its own when the page loads can we change it to do that? The idea was to make scrolling down messages i want to make it to make a loop so il have a message and it will move from top to bottom but it will never stop moving like a marquee thanks in advance! 

  <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

scrollStep=1

timerUp=""
timerDown=""

function toTop(id){
document.getElementById(id).scrollTop=0
}

function scrollDivDown(id){
clearTimeout(timerDown) 
document.getElementById(id).scrollTop+=scrollStep
timerDown=setTimeout("scrollDivDown('"+id+"')",10)
}

function scrollDivUp(id){
clearTimeout(timerUp)
document.getElementById(id).scrollTop-=scrollStep
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}

function toBottom(id){
document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight
}

function stopMe(){
clearTimeout(timerDown) 
clearTimeout(timerUp)
}

</script>

<style>
#display{
width:200px;
height:150px;
overflow:hidden;
text-align:left;
border:1px solid black;
}
</style>
</head>

<body>
<a href="#null" onclick="toTop('display')">Top</a> 
<a href="#null" onmouseover="scrollDivDown('display')" onmouseout="stopMe()">ScrollDown</a> 
<a href="#null" onmouseover="scrollDivUp('display')" onmouseout="stopMe()">Scroll Up</a>
<a href="#null" onclick="toBottom('display')">Bottom</a>
<div id="display">

<b>LAYER CONTENTS</b>

<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>End

</div>
</body>
</html>

i want to do something like this so it will make a loop:

function scrollDown(id){
clearTimeout(timerDown) 
document.getElementById(id).scrollTop+=scrollStep
if (document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight){
    document.getElementById(id).scrollTop=0
    }

}






<div id="display" onmouseout="scrollDown('display')" onmouseover="stopMe()">

and under this div its the messages

Was it helpful?

Solution 3

OK here i found a solution that worked perfect!! http://jscroller2.markusbordihn.de/

OTHER TIPS

Try window.onload around your code you want to run at page load.

window.onload = function() { ...yourcode... };

You can try to wrap your code into the following way into the

windows.load=function(){//Your Code}

Since the script is loading before the document is loaded

<script type="text/javascript">
window.load = function(){
scrollStep=1

timerUp=""
timerDown=""

function toTop(id){
document.getElementById(id).scrollTop=0
}

function scrollDivDown(id){
clearTimeout(timerDown) 
document.getElementById(id).scrollTop+=scrollStep
timerDown=setTimeout("scrollDivDown('"+id+"')",10)
}

function scrollDivUp(id){
clearTimeout(timerUp)
document.getElementById(id).scrollTop-=scrollStep
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}

function toBottom(id){
document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight
}

function stopMe(){
clearTimeout(timerDown) 
clearTimeout(timerUp)
}
};

</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top