Scroller Problem
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:
ps: sorry for my english i am from germanyCode:<!-- 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 = " " // 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 /////////////////////////////////////////////////////////////////// //-->
CSS Codes
Reply With Quote
Bookmarks