Javascript Manual Horizontal Scroller.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
rapidz
Forum Newbie
Posts: 5
Joined: Mon Jul 24, 2006 5:59 am

Javascript Manual Horizontal Scroller.

Post by rapidz »

I've put a script together, but i'm quite new to javascript.

What i want to be able to do, is have the scroll on a loop, so that when the last bit of text has moved to the left, it then comes in from the right again.

I also want the scroller to start automatically when the page loads, and then function properly with the "left" and "right" buttons.

Many thanks in advance for any help.

rapidz...

Code: Select all

<html>
<div id="enclose" style="position: relative;width: 300; height: 100; overflow:hidden;" align=center>
<div id="scrollarea" style="position: absolute; Left: 0px; Top: 0px; width: 300;">
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
</div>
</div>
<br>
<a href="#" onmouseover="left()" onmouseout="clearTimeout(uppvar)" style="cursor: default;">left</a>&nbsp;<a href="#" onmouseover="right()" onmouseout="clearTimeout(nervar)" style="cursor: default;">right</a>


<script language="Javascript">
var speed=7;
var yta=document.getElementById("scrollarea");
var hojd=yta.offsetHeight;


function left(){


if(parseInt(yta.style.left)){
yta.style.left=parseInt(yta.style.left)+speed;
}
uppvar=setTimeout("left()",50)
}


function right(){


if(parseInt(yta.style.left)>=(hojd*(-1)+50)){
yta.style.left=parseInt(yta.style.left)-speed;
}
nervar=setTimeout("right()",50)
}
</script>
</body>
</html>
Post Reply