Funky Firefox opacity slide show

justinbarneskin · #1 11-03-2009, 10:35 PM

I'm almost sure this must be a problem of style that I don't know.
Works in IE but firefox, what is the problem???
Please, help me Spock?

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD><TITLE>FirefoxFade</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>
* {margin:0; padding:0;}

</STYLE>
<SCRIPT type="text/javascript">
var imgs=[]; 	var taup; var baut; var fadeSpeed=20;
function WeSat(x){	taup=document.getElementById('tap'); baut=document.getElementById('bot');
 for(i=1;i<9;i++){var newSpan=document.createElement("span");		i==8 ? onlo='onload="play()"': onlo='';
	imgs.push(x+'.GIF.'+i+'.jpg');
	newImg='<img src="'+imgs[imgs.length-1]+'" style="height:40px;width:50px;border:1px solid green" '+onlo+' alt="'+i+'" title="'+i+'" >';
	document.getElementById("thumb").appendChild(newSpan);
	document.getElementById("thumb").getElementsByTagName('span')[document.getElementById("thumb").getElementsByTagName('span').length-1].innerHTML=newImg;
	}
}

function play(){ di=document.getElementById('thumb').getElementsByTagName('img');	startFrom=0;  

		if(navigator.appName!='Microsoft Internet Explorer'){taup.style.opacity=1}
								else{taup.filters.item(0).opacity=100}
baut.src=taup.src=imgs[startFrom];
setTimeout("fadePlay()",50)
}

function fadePlay(){ 
	if(navigator.appName!='Microsoft Internet Explorer'){ if(taup.style.opacity!=0){ taup.style.opacity-=.05; setTimeout("fadePlay()",fadeSpeed)}
							else{ 		nextPlay()	}		
	}
	else{			if(taup.filters.item(0).opacity>0){	taup.filters.item(0).opacity-=5;setTimeout("fadePlay()",fadeSpeed);	}
							else{		nextPlay()	}	
	}
}

function nextPlay(){ di[startFrom].style.border='1px solid red'; taup.src=imgs[startFrom];
	if(navigator.appName!='Microsoft Internet Explorer'){taup.style.opacity=1;}
							else{taup.filters.item(0).opacity=100}

	startFrom++;	 if(startFrom<di.length){ baut.src=imgs[startFrom];  fadePlay()  }
			else{for(i=0;i<di.length;i++){di[i].style.border='1px solid green';}}
}


</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto" onload="WeSat('http://sat.wrh.noaa.gov/satellite/4km/NW/animation/WV4NW')">
<img id="bot"  style="position:absolute;top:0px;left:0px;" src="" alt="bottom">
<img id="tap"  style="opacity:1;position:absolute;top:0px;left:0px;filter:alpha(opacity=100);" src="" alt="top">

<div id="thumb" style="position:absolute;bottom:3px;font-size:10px;top:500px"></div>



<input type=button onclick="play()" value="rePlay" style="position:absolute;top:3px;right:3px;width:100px">

</BODY></HTML>

justinbarneskin · #2 11-04-2009, 07:31 PM

You big dummy. You don't have a clue to what you are doing. Why don't I just write it for you.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD><TITLE>FirefoxFade</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>
* {margin:0; padding:0;}
.thum{height:40px;width:50px}
</STYLE>
<SCRIPT type="text/javascript">
 var fadeSpeed=20; loadCount=0
function WeSat(x){
 for(i=1;i<9;i++){var newIMG=document.createElement("img");	
  if(navigator.appName!='Microsoft Internet Explorer'){
	newIMG.setAttribute("class", "thum" );
	}
  else{	newIMG.setAttribute("className", "thum");	}
	newIMG.setAttribute("onload",loadCount++);
	newIMG.setAttribute("border", "1px solid green");
	newIMG.setAttribute("title", i);
	newIMG.setAttribute("src", ''+x+'.GIF.'+i+'.jpg');
	document.getElementById("thumb").appendChild(newIMG);
	}
if(loadCount==document.getElementById('thumb').getElementsByTagName('img').length){play()}
}

function play(){ di=document.getElementById('thumb').getElementsByTagName('img');	startFrom=0;  

		if(navigator.appName!='Microsoft Internet Explorer'){document.images[1].style.opacity=1}
								else{document.images[1].filters.item(0).opacity=100}
document.images[0].src=document.images[1].src=di[startFrom].src;
setTimeout("fadePlay()",50)
}

function fadePlay(){ 
	if(navigator.appName!='Microsoft Internet Explorer'){ if(document.images[1].style.opacity!=0){document.images[1].style.opacity-=.05; setTimeout("fadePlay()",fadeSpeed)}
							else{ 		nextPlay()	}		
	}
	else{			if(document.images[1].filters.item(0).opacity>0){document.images[1].filters.item(0).opacity-=5;setTimeout("fadePlay()",fadeSpeed);	}
							else{		nextPlay()	}	
	}
}

function nextPlay(){ di[startFrom].style.border='1px solid red'; document.images[1].src=di[startFrom].src;
	if(navigator.appName!='Microsoft Internet Explorer'){document.images[1].style.opacity=1;}
							else{document.images[1].filters.item(0).opacity=100}
setTimeout("playIt()",1)
}
function playIt(){
	startFrom++;	 if(startFrom<di.length){ document.images[0].src=di[startFrom].src;  fadePlay()  }
			else{for(i=0;i<di.length;i++){di[i].style.border='1px solid green';}}
}
</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto" onload="WeSat('http://sat.wrh.noaa.gov/satellite/4km/NW/animation/WV4NW')">
<img style="position:absolute;top:0px;left:0px;" src="" alt="bottom">
<img style="opacity:1;position:absolute;top:0px;left:0px;filter:alpha(opacity=100);" src="" alt="top">

<div id="thumb" style="position:absolute;bottom:3px;left:3px;font-size:10px;"></div>
<div style="position:absolute;top:3px;right:3px;width:100px">
	<input type=button onclick="play()" value="rePlay" >
</div>

</BODY></HTML>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)