Entry
How do I script a vertically scrolling ticker for NN4, NN6, IE4+ and Opera?
Dec 23rd, 2001 13:07
Martin Honnen,
Here is one solution that allows you to place the ticker inline in
your page by using an img element as the placeholder to which the
absolutely positioned element is moved. At least with NN6 and IE4+ the
img placeholder is not necessary but if you want to have the same page
layout for all named browser this seems an easy and cheap solution.
The page below is more a proof of concept than a worked out dhtml
presentation.
<html>
<head>
<title>
vertical ticker
</title>
<style type="text/css">
#scrollBox {
position: absolute;
overflow: hidden;
width: 200px; height: 16px;
background-color: lightblue;
}
#scrollContent {
position: absolute;
}
</style>
<script type="text/javascript">
var pos = 0;
var step = -5;
var delay = 50;
var tid;
function getImagePosition (img) {
if (document.layers)
return {x: img.x, y: img.y };
else {
var coords = {x: 0, y: 0 };
while (img) {
coords.x += img.offsetLeft;
coords.y += img.offsetTop;
img = img.offsetParent;
}
return coords;
}
}
function scrollContent () {
pos += step;
var contentHeight;
if (document.layers) {
window.document.scrollBox.document.scrollContent.top = pos;
contentHeight =
window.document.scrollBox.document.scrollContent.document.height;
boxHeight = window.document.scrollBox.clip.height;
}
else if (document.all) {
document.all.scrollContent.style.top = pos + 'px';
contentHeight = document.all.scrollContent.offsetHeight;
boxHeight = document.all.scrollBox.offsetHeight;
}
else if (document.getElementById) {
document.getElementById('scrollContent').style.top = pos + 'px';
contentHeight =
document.getElementById('scrollContent').offsetHeight;
boxHeight = document.getElementById('scrollBox').offsetHeight;
}
if (pos < -contentHeight)
pos = boxHeight;
}
function init () {
var imgCoords = getImagePosition(document.placeHolder);
if (document.layers) {
document.scrollBox.left = imgCoords.x;
document.scrollBox.top = imgCoords.y;
document.scrollBox.clip.width = 200;
document.scrollBox.clip.height = 16;
document.scrollBox.bgColor = 'lightblue';
document.scrollBox.visibility = 'show';
}
else if (document.all) {
document.all.scrollBox.style.left = imgCoords.x + 'px';
document.all.scrollBox.style.top = imgCoords.y + 'px';
document.all.scrollBox.style.visibility = 'visible';
}
else if (document.getElementById) {
document.getElementById('scrollBox').style.left = imgCoords.x
+ 'px';
document.getElementById('scrollBox').style.top = imgCoords.y
+ 'px';
document.getElementById('scrollBox').style.visibility = 'visible';
}
tid = setInterval('scrollContent()', delay);
}
</script>
</head>
<body onload="init();">
<p>
Kibology for all
</p>
<p>
All for Kibology.
<img name="placeHolder" width="200" height="16"
src="1x1Transparent.gif" alt="place holder" />
</p>
<div id="scrollBox">
<div id="scrollContent">
<script type="text/javascript">
for (var i = 0; i < 100; i++)
document.write(i + ' Kibology<br \/>');
</script>
</div>
</div>
</body>
</html>
