Slide-in & slide-out Scroller Help!

Discussion in 'Javascript' started by banyan, Nov 16, 2005.

  1. banyan

    banyan Guest

    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)'

    document.write(
    '<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(crossobj1.style.left) > 0) {
    crossobj1.style.left = parseInt(crossobj1.style.left) - 30 + "px"
    crossobj2.style.left = parseInt(crossobj2.style.left) - 30 + "px"
    crossobj3.style.left = parseInt(crossobj3.style.left) - 30 + "px"
    }
    else {
    crossobj1.style.left = "0px"
    crossobj2.style.left = "249px"
    crossobj3.style.left = "498px"
    clearTimeout(start)
    }
    inc += 2
    start = setTimeout("animatein()", inc)
    }

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

    </script>

    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!
    banyan, Nov 16, 2005
    #1
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Alex D.

    horizontal news scroller?

    Alex D., Aug 30, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    1,263
    Alex D.
    Aug 30, 2005
  2. Ian Hurst (Troyka)

    horizontal scroller with images

    Ian Hurst (Troyka), Feb 27, 2004, in forum: HTML
    Replies:
    8
    Views:
    2,720
    Toby A Inkster
    Feb 28, 2004
  3. clintonG

    News Scroller ???

    clintonG, Feb 22, 2007, in forum: ASP .Net
    Replies:
    2
    Views:
    495
  4. akshar108 via DotNetMonster.com

    get all word of slide through aspose.slide

    akshar108 via DotNetMonster.com, Oct 30, 2007, in forum: ASP .Net
    Replies:
    0
    Views:
    583
    akshar108 via DotNetMonster.com
    Oct 30, 2007
  5. Gerald Bauer
    Replies:
    0
    Views:
    246
    Gerald Bauer
    Aug 26, 2008
Loading...

Share This Page