Entry
How can I scroll a text across the page?
How can I scroll a text in a certain area?
Mar 5th, 2000 00:17
Martin Honnen,
To scroll text on a page you put it into a layer/absolutely positioned
element with css and then use JavaScript to move that layer
periodically. You need to measure window and layer dimensions to have
some limit when to reverse or restart scrolling. The following code
positions a text on the right side of the page and scrolls it up till
it vanishes then starts scrolling it in from the bottom of the page. It
works with NN4 and IE4/5 and contains experimental code for NN6 but
that currently lack precise tools of measuring the layer dimensions.
<HTML>
<HEAD>
<STYLE>
#scrollingText {
position: absolute;
visibility: hidden;
top: 0px;
width: 200px;
background-color: orange;
layer-background-color: orange;
color: white;
}
</STYLE>
<SCRIPT>
var tid;
function initScrolling () {
var left = window.innerWidth ? window.innerWidth - 200 :
document.body.clientWidth - 200;
if (document.layers) {
document.scrollingText.left = left;
document.scrollingText.clip.width = 200;
document.scrollingText.visibility = 'show';
}
else {
var st = document.all ? document.all.scrollingText :
document.getElementById('scrollingText');
st.style.left = left + 'px';
st.style.visibility = 'visible';
}
tid = setInterval('scrollText()', 100);
}
function scrollText () {
if (document.layers) {
var st = document.scrollingText;
st.top -= 10;
if (st.top + st.clip.height < 0)
st.top = window.innerHeight;
}
else if (document.all) {
var st = document.all.scrollingText;
st.style.pixelTop -= 10;
if (st.style.pixelTop + st.offsetHeight < 0)
st.style.pixelTop = document.body.clientHeight;
}
else if (document.getElementById) {
var st = document.getElementById('scrollingText');
if (!st.style.top) st.style.top = '0px';
st.style.top = (parseInt(st.style.top) - 10) + 'px';
if (parseInt(st.style.top) + 30 * 24 < 0)
st.style.top = window.innerHeight;
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="initScrolling()">
<DIV ID="scrollingText">
<SCRIPT>
for (var i = 0; i < 30; i++)
document.write(i + ': Kibology for all. All for Kibology<BR>');
</SCRIPT>
</DIV>
</BODY>
</HTML>
If you want to scroll your text only in a limited region of the page
and not across the whole page you stuff it into a containing layer and
move the text inside the layer (again the NN6 part of the code lacks
precise means to find out when the layer vanishes but the NN4 and IE4/5
code works):
<HTML>
<HEAD>
<STYLE>
#scrollContainer {
position: absolute;
visibility: visible;
overflow: hidden;
top: 100px; left: 100px;
width: 200px; height: 200px;
clip: rect (0 200 200 0);
background-color: orange;
layer-background-color: orange;
}
#scrollingText {
position: absolute;
top: 0px;
width: 200px;
color: white;
}
</STYLE>
<SCRIPT>
var tid;
function initScrolling () {
tid = setInterval('scrollText()', 100);
}
function scrollText () {
if (document.layers) {
var st = document.scrollContainer.document.scrollingText;
st.top -= 10;
if (st.top + st.clip.height < 0)
st.top = document.scrollContainer.clip.height;
}
else if (document.all) {
var st = document.all.scrollingText;
st.style.pixelTop -= 10;
if (st.style.pixelTop + st.offsetHeight < 0)
st.style.pixelTop = document.all.scrollContainer.offsetHeight;
}
else if (document.getElementById) {
var st = document.getElementById('scrollingText');
if (!st.style.top) st.style.top = '0px';
st.style.top = (parseInt(st.style.top) - 10) + 'px';
if (parseInt(st.style.top) + 30 * 30 < 0)
st.style.top = 200 + 'px';
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="initScrolling()">
<DIV ID="scrollContainer">
<DIV ID="scrollingText">
<SCRIPT>
for (var i = 0; i < 30; i++)
document.write(i + ': Kibology for all. All for Kibology<BR>');
</SCRIPT>
</DIV>
</DIV>
</BODY>
</HTML>
