Hello,

I'm trying to get a bit of javascript to work twice one a single page, what I'm trying to do is get a bunch of images scrolling, in 2 sets. If you may take a look here (The images within the "recent" and random "tabs").

What I did was duplicate the original code and edited the function names by adding "3" onto the end.

Code JavaScript:
gOverCWScroller = false;
 
function CWScroller(ulId, speed) {
 
	this.container = document.getElementById(ulId);
	this.container.Scroller = this;
	this.speed = speed;
 
	this.container.onmouseover = function(e) {
		gOverCWScroller = true;
	}
 
	this.container.onmouseout = function(e) {
		gOverCWScroller = false;
	}
 
	this.scroll = function() {
		if (gOverCWScroller == false) {
			var c = this.container.firstChild;
			var first = null;
			while (c) {
				if (c.tagName == 'LI') {
					first = c;
					break;
				}
				c = c.nextSibling;
			}
			var nodeSize = 78;	// Default
			var px = 0;
			nodeSize = first.clientWidth;
			if (first.style.marginLeft != '') {
				px = parseInt(first.style.marginLeft);
			}
			first.style.marginLeft = ( px - 1 ) + 'px';
			if ( parseInt(first.style.marginLeft) <= -(nodeSize) ) {
				first.style.marginLeft = '0px';
				this.container.removeChild(first);
				this.container.appendChild(first);
			}
		}
		setTimeout('document.getElementById(\'' + this.container.id + '\').Scroller.scroll()', this.speed);	
	}
 
	setTimeout('document.getElementById(\'' + ulId + '\').Scroller.scroll()', this.speed);
 
}

Code JavaScript:
gOverCWScroller3 = false;
 
function CWScroller3(ulId, speed) {
 
	this.container = document.getElementById(ulId);
	this.container.Scroller3 = this;
	this.speed = speed;
 
	this.container.onmouseover = function(e) {
		gOverCWScroller3 = true;
	}
 
	this.container.onmouseout = function(e) {
		gOverCWScroller3 = false;
	}
 
	this.scroll3 = function() {
		if (gOverCWScroller3 == false) {
			var c = this.container.firstChild;
			var first = null;
			while (c) {
				if (c.tagName == 'LI') {
					first = c;
					break;
				}
				c = c.nextSibling;
			}
			var nodeSize = 78;	// Default
			var px = 0;
			nodeSize = first.clientWidth;
			if (first.style.marginLeft != '') {
				px = parseInt(first.style.marginLeft);
			}
			first.style.marginLeft = ( px - 1 ) + 'px';
			if ( parseInt(first.style.marginLeft) <= -(nodeSize) ) {
				first.style.marginLeft = '0px';
				this.container.removeChild(first);
				this.container.appendChild(first);
			}
		}
		setTimeout('document.getElementById(\'' + this.container.id + '\').Scroller3.scroll3()', this.speed);	
	}
 
	setTimeout('document.getElementById(\'' + ulId + '\').Scroller3.scroll3()', this.speed);
 
}

This all works fine and dandy, however, I can only get one of the image sections to scroll. It's something to do with this:

Code HTML4Strict:
<script language="javascript" type="text/javascript">
CWScroller('scroller', 30, 'horizontal');
CWScroller3('scroller3', 30, 'horizontal');
</script>

If I leave out "CWScroller3('scroller3', 30, 'horizontal');" the recent section of images will scroll but the random images wont. If I put in "CWScroller3('scroller3', 30, 'horizontal');" it'll overwrite the the original recent section, and that won't scroll.

I've been picky my brains for a few days now and am unable to come up with a solution. I'd be thankful if anyone could take a look.

Cheers for reading,