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:
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:
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:
<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,