[thelist] DHTML Scrolling Area

[Lee Kowalkowski]

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