Slide-in & slide-out Scroller Help!



I wanna have a scroller box in which spaced messages can slide in and
out. And only two messages are displayed withine the box at one time.
Something like a marquee, but the srolling starts when user click
somewhere, and the speed slows down to zero when one message completely
slides out of the box.

I have implemented the scrolling speed control part as below. But I
don't know how to implement the above-mentioned box where only two
messages appear inside. Appreciate it if you could help me with the
code as I am new to JS.

<script language="JavaScript">

var inc=10
var scrollwidth="249px"
str = 'onClick = KeyAction(window.event.keyCode)'

'<div id="flyin1" style="position:absolute;width:' + scrollwidth +
';height:' + scrollheight + ';left:'+scrollwidth + ';"' + str + '>' +
message[0] + '</div>' +
'<div id="flyin2" style="position:absolute;width:' + scrollwidth +
';height:' + scrollheight + ';left:498px">' +
message[1] + '</div>' +
'<div id="flyin3" style="position:absolute;width:' + scrollwidth +
';height:' + scrollheight + ';left:747px">' +
message[2] + '</div>')

function animatein() {
if (parseInt( > 0) { = parseInt( - 30 + "px" = parseInt( - 30 + "px" = parseInt( - 30 + "px"
else { = "0px" = "249px" = "498px"
inc += 2
start = setTimeout("animatein()", inc)

function KeyAction(keyCode) {
crossobj1 = document.getElementById("flyin1")
crossobj2 = document.getElementById("flyin2")
crossobj3 = document.getElementById("flyin3")


BTW, it seems DIV positioning uses px, and I would like to put the
scrolling box inside a table eventually. How can I make sure the
positioning is aligned with the % width of a table header.

Thanks in advance!


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question