[Javascript] JS Marquee Scroller Question

[Roger Roelofs]

Tedd,

> At 4:42 PM +0000 8/3/06, Troy III Ajnej wrote:
>> In that case you should throw away the "marquee" tag
>> turn to javascript based solution. Seems to me that the proposed 
>> Roger Roelofs
>> and Chris Heilmann approach should work in most browsers even if
>> heavily CSS dependable: why don't you try it?
>
> Yep, I tried it.
>
> It worked once, scrolled off the page and kept going (probably still 
> is).
>
> see:  http://xn--ovg.com/marquee/index2.php
>
> I'm not a js expert in any fashion -- I looked at the code but can't 
> see the problem. The var maraginLeft is being reset to zero, but that 
> doesn't do anything.

This seemed like an interesting 'day off' project, so I had a go at 
something a little closer to your requirements.  It also allows for a 
different look for people with javascript disabled.  In my code, I set 
overflow: auto, so the user can scroll through the images.  I've tested 
in ff1.5, opera9 and safari1.3.x.  ie5/mac and iCab are problems at the 
moment.  The javascript manages to remove the scroll bars, but doesn't 
auto-scroll the images :-(  So much for graceful degradation...
Anyway, here's the relevant code.  If you choose to use it, let me know 
how testing in windows browsers goes.

------  html  ------
<div id="scroller">
    <ul>
	<li><img src="images/1.jpg"></li>
	<li><img src="images/2.jpg"></li>
	<li><img src="images/3.jpg"></li>
	<li><img src="images/4.jpg"></li>
	<li><img src="images/5.jpg"></li>
	<li><img src="images/6.jpg"></li>
	<li><img src="images/7.jpg"></li>
	<li><img src="images/8.jpg"></li>
	<li><img src="images/9.jpg"></li>
    </ul>
</div>

-------  css ------
	#scroller
		{
		height: 116px;
		width: 336px;
		overflow: scroll;
		}
	#scroller.autoscroll {
		overflow: hidden;
		height: 100px;
	}
	#scroller ul
		{
		margin: 0; padding: 0;
		display: block;
		width: 1208px;
		}
	#scroller li
		{
		display: inline;
		padding: 0;
	}
--------  js  --------
<script type="text/javascript">
// this script assumes the markup is a container with an id of 
'scroller'
// and inside that, a ul.
// set these two to control the speed of scrolling
var pxPerJump = 3;
var msecBetweenJump = 50;

var marginLeft = 0;
var resetTarget = 0;
var initialPos = 0;
var overlapIndex = 0;

function scrollerMove()
	{
	var el = document.getElementById("scroller");
	el = el.getElementsByTagName("UL")[0];
	if (el) {
		el.style.marginLeft = marginLeft + "px";
		marginLeft -= pxPerJump;
		el = el.childNodes[overlapIndex];
		if (el.offsetLeft <= initialPos)
			marginLeft = 0;
	}
}

function scrollerInit() {
	var el = document.getElementById("scroller");
	el.className = "autoscroll";
	scrollerWidth = el.offsetWidth;
	el = el.getElementsByTagName("UL")[0];
	var picWidths = 0;
	var overlapWidth = 0;
	var origLength = el.childNodes.length;
	var item;
	for (var i = 0; i < origLength; i++) {
		if ((initialPos == 0) && (el.childNodes[i].offsetLeft)) {
			initialPos = el.childNodes[i].offsetLeft
			overlapIndex = (origLength + i);
		}
		if (picWidths < scrollerWidth) {
			if (el.childNodes[i].offsetWidth)
				overlapWidth += el.childNodes[i].offsetWidth;
			item = el.childNodes[i].cloneNode(true);
			el.appendChild(item);
		}
		if (el.childNodes[i].offsetWidth)
			picWidths += el.childNodes[i].offsetWidth;
	}
	// set with of ul to total of all pics
	el.style.width = (picWidths + overlapWidth + 60) + "px";
	resetTarget = 0 - (picWidths + 20);
	var intervalID = window.setInterval(scrollerMove, msecBetweenJump);	
}

window.onload = scrollerInit;
-- 
Roger Roelofs
Datacomp Appraisal Services