[thelist] DHTML Scrolling Area
Lee Kowalkowski
lee.kowalkowski at googlemail.com
Fri Jan 11 04:48:40 CST 2008
On 10/01/2008, Noah St. Amand <noah at tookish.net> wrote:
> Given my lack of skills (and, as it happens, time), I'm going to go
> with easiest for now :-).
>
> > 1/ Add 100% horizontal padding either side so content enters from
> > right and leaves completely before it restarts.
>
> I had actually tried this. It works on the left side (i.e., the text
> starts outside the div), but not on the right -- it still resets as
> soon as the last character appears, rather than after it scrolls
> across. I've updated the example:
>
> <http://tookish.net/temp/scroll.html>
I think it was just a case of styling your elements so you actually
had the 400px space either side. Hopefully you can follow my changes:
<style type="text/css">
#scroll {
background-color: #000;
width: 400px;
height: 100px;
overflow: hidden;
white-space: nowrap;
font-size: 80px;
color: #FFF;
}
#scroll div {
text-align: center;
}
</style>
<script type="text/javascript">
var container = 'scroll';
var rate = 5;
function scrollContent() {
var box = document.getElementById(container);
var contents = box.getElementsByTagName('div')[0];
if (box.scrollLeft < (box.scrollWidth - box.offsetWidth)) {
box.scrollLeft = box.scrollLeft + 1;
box.onmouseover = function() {
clearInterval(scrollInterval);
};
box.onmouseout = function() {
scrollInterval = setInterval('scrollContent()', rate);
};
}
else {
box.scrollLeft = 0;
}
}
function initScroll() {
if (!document.getElementById) return;
if (document.getElementById(container)) {
var box = document.getElementById(container);
var contents = box.getElementsByTagName('div')[0];
contents.style.width = box.scrollWidth + box.offsetWidth * 2 + 'px';
}
scrollInterval = setInterval('scrollContent()', rate);
}
</script>
--
Lee
More information about the thelist
mailing list