Vertical auto-scrolling a DIV layer?

**candypop** · 07-29-2006, 07:48 AM

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!

**mburt** · 07-29-2006, 02:33 PM

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>

**trane** · 09-25-2008, 08:52 PM

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?

**rangana** · 09-26-2008, 01:35 AM

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

**Nile** · 09-26-2008, 01:43 AM

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>

**Johnny5_Hull** · 09-30-2008, 10:30 AM

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.

**Johnny5_Hull** · 10-02-2008, 12:45 PM

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

Thread: Vertical auto-scrolling a DIV layer?

Thread Tools

Search Thread

Vertical auto-scrolling a DIV layer?

Can I "hide" the scroll bars?

Bookmarks

Bookmarks

Posting Permissions