/    Sign up×
Community /Pin to ProfileBookmark

horizontal scroller fix

hi guys,
i have changed this javascript code to scroll left and right, when the text scrolls left if continues to loop the text on mouse over. When the text scrolls right it does not loop. Could any one help me figure out the scroll to the right to loop. Any help would be great! thanks guys.

heres the code:

Article = new Array;
i=0;

/* DEFINE SCROLLER ELEMENTS
Define new scroller elements here in the following format.
Article[i] = new Array (“display text”, “URL”, “frame target to load link in”);i++

Note: If you do not want the item to be a link, change the URL value to “none”.
*
/
Article[i] = new Array (‘<img src=”haed01.jpg” width=”43″ height=”43″>’, “none”, “_blank”);i++

Article[i] = new Array (‘<img src=”haed01.jpg” width=”43″ height=”43″>’, “www.beta.alviarmani.com”, “_blank”);i++
Article[i] = new Array (‘<img src=”haed01.jpg” width=”43″ height=”43″>’, “www.beta.alviarmani.com”, “_blank”);i++
Article[i] = new Array (‘<img src=”haed01.jpg” width=”43″ height=”43″>’, “www.beta.alviarmani.com”, “_
blank”);i++
Article[i] = new Array (‘<img src=”haed01.jpg” width=”43″ height=”43″>’, “www.beta.alviarmani.com”, “_blank”);i++
Article[i] = new Array (‘<img src=”haed01.jpg” width=”43″ height=”43″>’, “www.beta.alviarmani.com”, “_
blank”);i++
Article[i] = new Array (‘<img src=”haed01.jpg” width=”43″ height=”43″>’, “www.beta.alviarmani.com”, “_blank”);i++
Article[i] = new Array (‘<img src=”haed01.jpg” width=”43″ height=”43″>’, “www.beta.alviarmani.com”, “_
blank”);i++

////// SCROLLER CONFIGURATION ///////////////////////////////////////////////////////////////////

orientation = “horizontal” // Orientation of scroller (Horizontal or vertical)
scrollerWidth = “350” // Width of entire scroller.
scrollerHeight = “50” // Height of Scroller.
borderWidth = 0 // Width of border. (use 0 for no border).
borderColour = “#006600” // Colour of scroller border. (Use either hexadecimal or text values. e.g. “#FF0000” or “Red”)
backColour = “none” // Colour of scroller background. (Use either hexadecimal or text values. e.g. “#FF0000” or “Red”)
staticColour = “#000000” // Colour of scroller items that are NOT a link. (including scrollerDivider characters)
stopScroll = 1 // Pause the scroller on mouseOver. (use 0 for no.)
textAlignment=”left” // Alignment of each scroller item. Only really makes a difference on vertical scroller
// (center, left, right, justify)

// Scroller Links
linkFont = “arial” // Font of scroller links;
linkWeight = “normal” // Weight of scroller links;
linkColour = “#000080” // Colour of scroller links
linkSize = “10” // Size of links (in points)
linkDecoration = “none” // Decoration of links. (underline, overline, none)

// Scroller Links On MouseOver
slinkFont = “arial” // Font of scroller links;
slinkWeight = “normal” // Weight of scroller links;
slinkColour = “#cc3333” // Colour of scroller links
slinkSize = “10” // Size of links (in points)
slinkDecoration = “underline” // Decoration of links. (underline, overline, none)

scrollerDivider = “&nbsp; &nbsp;” // Character to place between each scroller item.
// <img> tags can be used if an image is required.
// Use “0” for nothing. For Vertical scrollers, it is best to use “<br>”

/*
Because Netscape version 4 does not support this scroller, configure the values below so NS4 users do not see an error.
In the scroller’s place will be a static title which can be a link if require. The appearance of the static text (colour, scroller border etc)
will be exactly the same as for the working version in other browsers.
*
/
ns4Text = “Click Here to visit the alviarmani”; // Alternative text to display in Netscape 4.
ns4URL = “http://www.alviarmani.com“; // URL of link in NS4. If no URL is required, enter “none”
ns4Target = “_top”; // Frame target for link in NS4

////// DO NOT EDIT BELOW THIS LINE ///////////////////////////////////////////////////////////////////

//Browser Sniffer
var isIE = (document.getElementById && document.all)?true:false;
var isNS4 = (document.layers)?true:false;
var isNS6 = (document.getElementById && !document.all)?true:false;
var timer;

style='<style type=”text/css”>’;
style+=’p{font-family:’+linkFont+’; color:’+staticColour+’; font-size:’+linkSize+’pt; font-weight:’+linkWeight+’; text-align:’+textAlignment+’}’;
style+=’a.rcScroller,a.rcScroller:active,a.rcScroller:visited{color:’+linkColour+’;text-decoration:’+linkDecoration+’; font-weight:’+linkWeight+’}’;
style+=’a.rcScroller:hover{color:’+slinkColour+’;text-decoration:’+slinkDecoration+’; font-weight:’+slinkWeight+’}’;
style+=’rcScrollerHoverNS{color:red;text-decoration:’+slinkDecoration+’; font-weight:’+slinkWeight+’}’;
style+='</style>’;
document.writeln(style);

// Build the scroller and place it on the page
function buildScroller()
{
if(isNS4){
scroller='<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”‘+scrollerWidth+'” bgcolor=”‘+borderColour+'”><tr><td>’
scroller+='<table border=”0″ cellpadding=”3″ cellspacing=”1″ width=”100%” height=”‘+scrollerHeight+'” bgcolor=”‘+backColour+'”><tr><td align=”center” nowrap><p>’;
if(ns4URL.toLowerCase()!=”none”){scroller+='<a href=”‘+ns4URL+'” class=”rcScroller” target=”‘+ns4Target+'”>’+ns4Text+'</a>’;}
else{scroller+=ns4Text;}
scroller+='</p></td></tr></table></td></tr></table>’

}else{
scroller='<table border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width:’+scrollerWidth+’;height:’+scrollerHeight+’;border:’+borderWidth+’px solid ‘+borderColour+’;background-color:’+backColour+'”>’;
scroller+='<tr valign=”middle”><td><div id=”div” style=”‘;
if(orientation.toLowerCase()==”vertical”){scroller+=’height:’+scrollerHeight+’;’;}
scroller+=’width:’+scrollerWidth+’; position:relative; background-color:’+backColour+’; overflow:hidden”>’;
scroller+='<div id=”div1″ style=”position:relative; left:0; z-index:1″>’;
scroller+='<table border=”0″ name=”table” id=”table”‘;
if(orientation.toLowerCase()==”vertical”){scroller+=’style=”width:’+scrollerWidth+'”‘;}
scroller+=’><tr>’;
y=0;
while (y<4)
{
for (x=0; x<(Article.length); x++)
{
if(orientation.toLowerCase()==”vertical”){scroller+='<tr>’;}
scroller+='<td ‘;
if(orientation.toLowerCase()==”horizontal”){scroller+=’nowrap’;} if(stopScroll==1){scroller+=’ onMouseOver=”stopScroller();” onMouseOut=”stopScroller()”‘;}
scroller+=’><p>’;
if(Article[x][1].toLowerCase()!=”none”){scroller+='<a class=”rcScroller” href=”‘+Article[x][1]+'” target=”‘+Article[x][2]+'” >’+Article[x][0]+'</a>’;
}else{scroller+=Article[x][0];}

scroller+='</p></td>’;

if(orientation.toLowerCase()==”vertical”){scroller+='</tr>’;}

if(scrollerDivider.toLowerCase() != “none”){scroller+='<td nowrap><p>’+scrollerDivider+'</p></td>’;}
}
y++
}
scroller+='</tr></table></div></div></td></tr></table>’;

}
document.writeln(scroller);
}
// Ensure the width of the scroller is divisible by 2. This allows smooth flowing of the scrolled content
function setWidth(scroll)
{
tableObj=(isIE)?document.all(“table”):document.getElementById(“table”);
obj=(isIE)?document.all.div1:document.getElementById(“div1”);

objWidth=(orientation.toLowerCase()==”horizontal”)?getOffset(tableObj,”width”):getOffset(tableObj,”height”);
HalfWidth=Math.floor(objWidth*2);
newWidth = (HalfWidth*
2)-2;
obj.style.width=newWidth
if(scroll==1) moveLayerLeft(obj, newWidth);
if(scroll==2) moveLayerRight(obj, newWidth);

}

// Move the layer by one pixel to the left
function moveLayerLeft(obj, width)
{

maxLeft = (0-(width/2)+2)/2
if(orientation.toLowerCase()==”horizontal”){
obj.style.left=(parseInt(obj.style.left) <= maxLeft)?0:parseInt(obj.style.left)-1

}else{
if(obj.style.top==””){obj.style.top=0;}
// alert(obj.style.top)
if (parseInt(obj.style.top)<(0-(width/2)+6)){
obj.style.top = 0
}else{
obj.style.top = parseInt(obj.style.top)-1
}
}
timer = setTimeout (“moveLayerLeft(obj, “+width+”);”, 3);
}

// Move the layer by one pixel to the left
function moveLayerRight(obj, width)
{

maxRight = (0-(width/2)+2)/2
if(orientation.toLowerCase()==”horizontal”){
obj.style.left=(parseInt(obj.style.left) <= maxRight)?0:parseInt(obj.style.left)+1

}else{
if(obj.style.top==””){obj.style.top=0;}
// alert(obj.style.top)
if (parseInt(obj.style.top)<(0-(width/2)+6)){
obj.style.top = 0
}else{
obj.style.top = parseInt(obj.style.top)+1
}
}
timer = setTimeout (“moveLayerRight(obj, “+width+”);”, 3);
}

// Get width and height of layer
function getOffset(obj, dim)
{
if(dim==”width”)
{
oWidth = obj.offsetWidth
return oWidth
}

else if(dim==”height”)
{
oHeight = obj.offsetHeight
return oHeight
}

}

function stopScroller()
{
clearTimeout(timer)

}

function runScroller(){
if(!isNS4){stopScroller()}
}

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@LeeUSep 20.2007 — Not sure but maybe you need to change
[CODE]
maxRight = (0-(width/2)+2)/2
if(orientation.toLowerCase()=="horizontal"){
obj.style.left=(parseInt(obj.style.left) <= maxRight)?0arseInt(obj.style.left)+1[/CODE]

to
[CODE]
maxRight = (0-(width/2)+2)/2
if(orientation.toLowerCase()=="horizontal"){
obj.style.[B]right[/B]=(parseInt(obj.style.[B]right[/B]) <= maxRight)?0arseInt(obj.style.right)+1[/CODE]
Copy linkTweet thisAlerts:
@kristy79authorSep 21.2007 — I tried obj.style.right but it didnt scroll at all. you think it needs to be defined. althought i do know its in the library
×

Success!

Help @kristy79 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...