View Full Version : can't center fadin slideshow firefox

07-22-2011, 07:17 PM
1) Script Title: Ultimate Fade-in Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I am unable to center this slideshow in Firefox. I read previous thread/answer and experimented with some suggested changes, but they did not work for me.

<script language="JavaScript">
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
// -->
</script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

<center><script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [224, 168], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/100_1587.jpg", "", "", "Phase 1 of the build-out is underway."],
["images/100_1588.jpg", "", "", "Concrete base for cabinet."],
["images/100_1589.jpg", "", "", "Cabinet interior."],
["images/100_1590.jpg", "", "", "Cabinet exterior with switchbox (left) and AC (right)."],
["images/100_1591.jpg", "", "", "Pole mount for antenna (bottom left extension at the top of the tower)."],
["images/100_1592.jpg", "", "", "Side view."]//<--no trailing comma after very last image element!
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""


<body bgcolor="#000000" onload="FP_preloadImgs(/*url*/'button2.jpg', /*url*/'button3.jpg', /*url*/'button3B.jpg', /*url*/'button3C.jpg', /*url*/'button47.jpg', /*url*/'button48.jpg', /*url*/'button4D.jpg', /*url*/'button4E.jpg', /*url*/'button6C.jpg', /*url*/'button6D.jpg')">

<p align="center"><img border="0" src="rrbanner.jpg" width="982" height="248">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;<center><script type="text/javascript">

* Fading Scroller- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

var delay = 1000; //set delay between message change (in miliseconds)
var maxsteps=50; // number of steps to take to change from start color to endcolor
var stepdelay=80; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)

var fcontent=new Array();
begintag='<div style="font: normal 22px Verdana; text-align:center; padding: 10px">'; //set opening tag, such as font declarations
fcontent[0]="<b>WRSN 88.1 FM</b><br>Lebanon, Gallatin, Hartsville</br>";
fcontent[1]="<b>WRIM 89.9 FM</b><br>Cookeville, Sparta, McMinnville";"</a>";

var fwidth='700px'; //set scroller width
var fheight='60px'; //set scroller height

var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.

///No need to edit below this line/////////////////

var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;

/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
if (fadelinks)
colorfade(1, 15);
else if (ie4)

// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com

function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)

/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
if (fadelinks)
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);


/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");

if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)


<div style="position: absolute; width: 555px; height: 38px; z-index: 1; left: 220px; top: 260px" id="layer1">
<p align="center"><b><font color="#FFFFFF" face="Verdana" size="5">&quot;Touching Hearts, Saving Souls&quot;</font></b></div>

<p align="center">
<p align="center"><!--webbot bot="HTMLMarkup" startspan --><div style="width:100%; text-align:center; margin:auto"><!--webbot bot="HTMLMarkup" endspan -->
<div id="fadeshow1"/div>