Using DHTML clipping to scroll messages
The messages will scroll around. I have decided to make each one a link that can be clicked on.
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
In this scroller, I have given each message its own link style.
Netscape 4 will use inline stylesheets in this scroller, because it is the last one on the
page.
The scrolling is done using layers where possible. In DOM or Layers browsers, the layer contents can be easily re-written or moved. In order to produce the scrolling effect, the layer is moved upwards inside a statically clipped layer. I could use dynamic clipping, but that requires more code. In Opera 5 and 6, where clipping and re-writing are not permitted, I use iframes. Iframes can be easily re-written and scrolled, where the scroll window produces the equivalent of a clipping effect. Opera 6.04/win seems to have problems with this, but other versions are OK. Why do I not just use iframes for all browsers (like I used to) I hear you ask? Well, with iframes, some browsers will require an initial iframe page, because they do not support the about:blank URL syntax. This can lead to all sorts of timing issues relating to page loading times. Some older browsers will not allow the iframe content to be re-written or scrolled, like Konqueror, Safari and Opera 6.04/win.
Clipping is easier. Clipping hides parts of an absolutely positioned element. Only a small rectangle is shown, the coordinates of which can be changed. With basic scrollers, in order to scroll, the element is referenced as with DHTML and then it is moved upwards. As it is moved upwards, the clip rectangle is moved downwards, diplaying a lower portion of the element and creating a scrolling effect. By holding the absolutely positioned element in a relatively positioned element, it will behave like a normal inline element like a paragraph. The border is created by holding the scroller inside a table in layers browsers and a <div> element with a border in non layers browsers.
![[Diagram of how a scroller based on clipping works]](scroller.gif)
With this scroller, I use a div that is positioned absolutely and clipped to the size of the scroller. Within that, I put another div that is also positioned absolutely, which is moved to produce the scrolling effect. That way, I only have to move the inner div to produce the scrolling effect. There is no need to adjust the clipping because the clipping is done by the containing div that never moves.
As with all scrollers based on clipping, if you put this scroller in a table cell, you must make sure that the bottom of the table cell is at least the height of the text in the scroller, plus the height of the scroller below the bottom of the scroller. Failure to do so will cause Gecko based browsers to start moving bits of the table around. Non-layers browsers other than Opera 5 & 6 may create scrollbars if the scroller is placed too near to the bottom of the browser window (about the same distance as the table bug that affects Gecko based browsers).
In theory, this script can control an unlimited number of scrollers. In practice, Netscape 4 will ignore the stylesheets on all scrollers except the last. As with most of the Netscape 4 bugs, there is absolutely no reason for this, and it is a very annoying bug. The links will revert to the default link colour for the main page - as found in the <body ...> tag, not stylesheets. The only workaround if you want more than one scroller is to style the text of all except the last scroller with normal HTML, although you will have no control over underlines, eg.
<a href="blah"><b><font color="#007700">Link text</font></b></a>
As with many of my generic scripts, everything is configurable:
height, width and background colour of the scroller, border thickness and colour, scroller speed,
pause length and position, the number and style of the messages.