- Download Files
Click Here to Download
the HTML source.
This code allows you to create a vertically-scrolling text box of information – such as a news ticker – to your website quickly and easily. It does not use an IFRAME so the scrolling content is actually part of your document, making it more Search Engine friendly and easier do produce by simply populating it with content from your database. This makes it XHTML Strict as well.
The DHTML vertical scroller script has been tested with the following Windows browsers, if you experience any problems, please let me know:
- Google Chrome 2
- Firefox 3
- Internet Explorer 7
- Opera 9.50
- Safari 3
The vertical scroller works by having two DIVs, one inside the other. The outer DIV acts as a display frame for the scrolling content, while the inner one holds the content itself. First of all, then, we need two DIVs:
<div id="scrollBox" class="scrollBox">
<div id="scrollTxt" class="scrollTxt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae
enim eu mauris rhoncus malesuada. Suspendisse et tellus diam, et ullamcorper
nisl. In nec nibh dolor, et auctor nibh. Duis pretium faucibus bibendum.
Suspendisse eget leo in eros faucibus consequat a id nisl. Quisque cursus
lacinia consectetur. Nam mattis sagittis diam, ac posuere risus porttitor
<a href="#" onmouseover="scrStop();" onmouseout="scrMove();">MOUSE HERE</a>
sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Phasellus tincidunt eros at risus consectetur feugiat.
Etiam id erat vel lectus pharetra posuere. Maecenas rhoncus est vel lectus
posuere dictum. Curabitur rhoncus ligula laoreet nisl rutrum sit amet
convallis purus tincidunt. Ut ullamcorper lorem eu odio tempus placerat.
Proin cursus semper elit sed pharetra. Nam convallis, quam vitae facilisis
varius, ligula purus egestas justo, vitae eleifend metus turpis ac felis.
Aliquam tempus nisi id ligula semper sed porta odio dictum.
</div>
</div>
As you can see, the two DIVs are nested, and I’ve filled our example scroller with typical Lorem Ipsum text just to pad things out.
Our next step is to apply some CSS styles to the boxes to ensure they appear one inside the other. We do this by adding a small stylesheet in our document’s header:
<style type="text/css">
.scrollBox {
/* The box displaying the scrolling content */
position: absolute;
top: 30px;
left: 200px;
width: 180px;
height: 200px;
border: 1px dashed #aaaaaa;
overflow: hidden;
}
.scrollTxt {
/* the box that actually contains our content */
font: normal 12px sans-serif;
position: relative;
top: 200px;
}
</style>
For this example, the box is positioned at coordinates 200,30 from the top-left, but you can essentially do whatever you want with it.
All that remains now is to animate the inner box, moving it inside the constraints of the outer box and looping when it is no longer visible. We accomplish this with JavaScript, but there’s an important point that needs making here, and that is: You don’t know the height of your content until it is loaded.
What this means is that we don’t know how far the scrolling content inside the box has to travel until we’ve loaded it. The box may be showing five lines of text or it may be showing fifty, we don’t know, and so we need to calculate the content height once the page has finished loading. Normally, you would use:
<body onload="doScroll();">
Which would only fire once the page had loaded all elements. For this example, however, I have called the doScroll(); function immediately after displaying the nested DIVs, since the box only contains text and already has a font assigned to it, and therefore the height of the inner box is already finalised.
Here’s the JavaScript required to get the height of the scrolling content and start the scroll loop:
<script type="text/javascript">
var scrollSpeed =1; // number of pixels to change every frame
var scrollDepth =200; // height of your display box
var scrollHeight=0; // this will hold the height of your content
var scrollDelay=25; // delay between movements.
var scrollPos=scrollDepth; // current scroll position
var scrollMov=scrollSpeed; // for stop&start of scroll
function doScroll() {
if(scrollHeight==0) { getHeight(); }
scrollPos-=scrollMov;
if(scrollPos< (0-scrollHeight)) { scrollPos=scrollDepth; }
document.getElementById('scrollTxt').style.top=scrollPos+'px';
setTimeout('doScroll();', scrollDelay);
}
function getHeight() {
scrollHeight=document.getElementById('scrollTxt').offsetHeight;
}
function scrMove() { scrollMov=scrollSpeed; }
function scrStop() { scrollMov=0; }
</script>
As you can see, doScroll(); calls itself automatically once it’s started, so all that is required is a single call to set it rolling. You can change the variables in the JavaScript so speed up the scroll or change the frequency of movement by adjusting scrollSpeed and scrollDelay accordingly.
Update:
I’ve added a link in the sample content that will stop the scrolling when you put your mouse over it. This is achieved using two functions, scrStop() and scrMove() which stop and restart the scrolling text, and are placed in onmouseover=”" and onmouseout=”" respectively. You can add these so that your users don’t have to chase a link as it scrolls up the page.
You can see the code working by clicking the link in the ‘Download Files’ box at the top of the page. It will open the document in a new window, and all you need to do is view the source code. Please leave any comments or questions below, and feel free to rate this post while you’re here – I might even respond at some point.
