Advanced Search

Results 1 to 7 of 7

Thread: Vertical auto-scrolling a DIV layer?

  1. #1
    Join Date
    Jul 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Vertical auto-scrolling a DIV layer?

    Hello, I'm making a webpage right now and would like to have a little "News" DIV id on the right that has autoscrolling vertical text as soon as the page loads.

    I've tried searching for the correct code, and even tried to edit code that I had used before (trying to make it so it would scroll without the use of scroll buttons), but nothing has worked thus far. I'm just so frustrated now!

    Any help would be immensely appreciated!

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Is this what you're talking about?
    Code:
    <html>
    <head>
    <style type="text/css">
    .frame {
    font:12px arial;
    width:200;
    height:200;
    border:none;
    overflow:scroll;
    border:1px solid black;
    padding:5;
    }
    </style>
    <script language="javascript">
    i = 0
    var speed = 1
    function scroll() {
    i = i + speed
    var div = document.getElementById("news")
    div.scrollTop = i
    if (i > div.scrollHeight - 160) {i = 0}
    t1=setTimeout("scroll()",100)
    }
    </script>
    </head>
    <body onload="scroll()">
    <div class="frame" id="news">
    NEWS
    <br><hr>
    <br>Segment 1
    <br>Segment 2
    <br>Segment 3
    <br>Segment 4
    <br>Segment 5
    <br>Segment 6
    <br>Segment 7
    <br>Segment 8
    <br>Segment 9
    <br>Segment 10
    <br>Segment 11
    <br>Segment 12
    <br>Segment 13
    <br>Segment 14
    <br>Segment 15
    <br>Segment 16
    <br>Segment 17
    <br>Segment 18
    <br>Segment 19
    </div>
    <br><input type="button" value="Stop" onclick="clearTimeout(t1)">
    <br><input type="button" value="Start" onclick="scroll()">
    </body>
    </html>
    - Mike

  3. #3
    Join Date
    Sep 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Can I "hide" the scroll bars?

    I found this very useful, but would like to get rid of the scroll bars. I'd like to keep the start and stop buttons, or replace them with a simple Mouseover to stop the scroll. Is that possible?

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Try to change highlighted:
    Code:
    .frame {
    font:12px arial;
    width:200;
    height:200;
    border:none;
    overflow:scroll;
    border:1px solid black;
    padding:5;
    }
    ...into hidden
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. #5
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Here's the stop on mouseover:
    Code:
    <html>
    <head>
    <style type="text/css">
    .frame {
    font:12px arial;
    width:200;
    height:200;
    border:none;
    overflow:scroll;
    border:1px solid black;
    padding:5;
    }
    </style>
    <script language="javascript">
    i = 0
    var speed = 1
    function scroll() {
    i = i + speed
    var div = document.getElementById("news")
    div.scrollTop = i
    if (i > div.scrollHeight - 160) {i = 0}
    t1=setTimeout("scroll()",100)
    }
    </script>
    </head>
    <body onload="scroll()">
    <div class="frame" id="news">
    NEWS
    <br><hr>
    <br>Segment 1
    <br>Segment 2
    <br>Segment 3
    <br>Segment 4
    <br>Segment 5
    <br>Segment 6
    <br>Segment 7
    <br>Segment 8
    <br>Segment 9
    <br>Segment 10
    <br>Segment 11
    <br>Segment 12
    <br>Segment 13
    <br>Segment 14
    <br>Segment 15
    <br>Segment 16
    <br>Segment 17
    <br>Segment 18
    <br>Segment 19
    </div>
    <br><input type="button" value="Pause" onmouseover="clearTimeout(t1)" onmouseout="scroll()">
    </body>
    </html>
    Jeremy | jfein.net

  6. #6
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi, I have found this very useful thankyou.

    However, I am having trouble as the list I want to scroll is a UL that is quite long, and the scroller seems to stop half way and restart.

    I have tried changing the variables both individually and together, but to no avail. To now all I have suceeded in achieving is making it go faster. This did have the effect of getting through more lines, however at an unreadable speed.

    Is there a way to make it go further, or is there a limit on the length the list can be.

    Many thanks for any advice you can give.

  7. #7
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Is any one able to point me in the right direction on this one, as it's driving me crazy.

    I know it may seem simple to you, but to me its painful.

    Thanks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •