PDA

View Full Version : Scroller Problem



meGa
08-31-2007, 03:38 PM
Hi Guys,

i have a problem with a javascript scroller. The problem is that the scroller is not working on firefox it just works on IE and Opera. Maybe you can see in the following code why:



<!--
var marqueeTimer = null;
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='Bilder/designs/1.jpg'>", "#", "_blank");i++
Article[i] = new Array ("<img src='Bilder/designs/3.jpg'>", "#", "_blank");i++




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

orientation = "Horizontal" // Orientation of scroller (Horizontal or vertical)
scrollerWidth = "586px" // Width of entire scroller.
scrollerHeight = "83px" // 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 = "#ffffff" // 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 = "verdana, arial" // Font of scroller links;
linkWeight = "normal" // Weight of scroller links;
linkColour = "#ffffff" // Colour of scroller links
linkSize = "10" // Size of links (in points)
linkDecoration = "none" // Decoration of links. (underline, overline, none)

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

scrollerDivider = "&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 = "ss"; // Alternative text to display in Netscape 4.
ns4URL = "ss"; // URL of link in NS4. If no URL is required, enter "none"
ns4Target = "_self"; // Frame target for link in NS4

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

var isIE = ( window.ActiveXObject ) ? true : false;
var isNS4 = ( document.layers ) ? true : false;
var isGecko = ( window.GeckoActiveXObject ) ? true : false; // Firefox, Mozilla, K-Meleon, Seamonkey, NS >= 6 ...

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><td valign="middle"><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="setWidth()"';}
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()
{
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
moveLayer(obj, newWidth);

}

// Move the layer by one pixel to the left
function moveLayer(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
}
}
marqueeTimer = setTimeout ("moveLayer(obj, "+width+");", 1);
}

// 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(marqueeTimer)
}

function runScroller(){
if(!isNS4){setWidth()}
}
////// END OF SCRIPT ///////////////////////////////////////////////////////////////////
//-->


ps: sorry for my english i am from germany

jscheuer1
08-31-2007, 05:37 PM
This will:


<!--
var marqueeTimer = null;
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='Bilder/designs/1.jpg'>", "#", "_blank");i++
Article[i] = new Array ("<img src='Bilder/designs/3.jpg'>", "#", "_blank");i++




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

orientation = "Horizontal" // Orientation of scroller (Horizontal or vertical)
scrollerWidth = "586px" // Width of entire scroller.
scrollerHeight = "83px" // 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 = "#ffffff" // 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 = "verdana, arial" // Font of scroller links;
linkWeight = "normal" // Weight of scroller links;
linkColour = "#ffffff" // Colour of scroller links
linkSize = "10" // Size of links (in points)
linkDecoration = "none" // Decoration of links. (underline, overline, none)

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

scrollerDivider = "&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 = "ss"; // Alternative text to display in Netscape 4.
ns4URL = "ss"; // URL of link in NS4. If no URL is required, enter "none"
ns4Target = "_self"; // Frame target for link in NS4

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

var isIE = ( window.ActiveXObject ) ? true : false;
var isNS4 = ( document.layers ) ? true : false;
var isGecko = ( window.GeckoActiveXObject ) ? true : false; // Firefox, Mozilla, K-Meleon, Seamonkey, NS >= 6 ...

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><td valign="middle"><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="setWidth()"';}
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()
{
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+'px';
moveLayer(obj, newWidth);

}

// Move the layer by one pixel to the left
function moveLayer(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+'px';
}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+'px';
}
}
marqueeTimer = setTimeout ("moveLayer(obj, "+width+");", 1);
}

// 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(marqueeTimer)
}

function runScroller(){
if(!isNS4){setWidth()}
}
////// END OF SCRIPT ///////////////////////////////////////////////////////////////////
//-->

meGa
08-31-2007, 05:50 PM
thanks this really do work