Need Help with Script not working in Firefox
My friend and I are trying to insert a marquee with a script that fades and image in and out at the top of our site. Please take a look at what is happening: http://www.fitwithz.com/Marquee.html in IE everything works fine, but when you take a look at it in Firefox it doesnt work correctly, the image is in front of the text and it doesnt go all the way across the screen like it does in IE. What needs to be done to fix this? And if it works in Firefox then when you increase the font size by clicking the larger font icon it messes up. Below are the 2 java scripts that we are using and the html.
All help/new ideas are greatly appreciated.
Thanks to all that reply
[JavaScript]
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["fading/back.jpg", "", ""] //plain image syntax
fadeimages[1]=["fading/girl.JPG", "", ""] //image with link syntax
fadeimages[2]=["fading/foodpyramid.jpg", "", ""] //image with link and target syntax
fadeimages[3]=["fading/girlstretching2.JPG", "", ""] //plain image syntax
fadeimages[4]=["fading/girlstretching2.JPG", "", ""] //image with link syntax
fadeimages[5]=["fading/leaning.jpg", "", ""] //plain image syntax
fadeimages[6]=["fading/workout.JPG", "", ""] //image with link syntax
fadeimages[7]=["fading/stabilityballworkout.JPG", "", ""] //plain image syntax
fadeimages[8]=["fading/nutrition.JPG", "", ""] //plain image syntax
var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
var fadebgcolor="white"
////NO need to edit beyond here/////////////
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DX ImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DX ImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
[/JavaScript]
Re: Need Help with Script not working in Firefox
Second Javascript
[JavaScript]
// Original JavaScript code by Duncan Crombie: dcrombie at chirp.com.au
// Please acknowledge use of this code by including this header.
var bites = document.cookie.split("; "); // break cookie into array of bites
function getCookie(name) { // use: getCookie("name");
for (var i=0; i < bites.length; i++) {
nextbite = bites[i].split("="); // break into name and value
if (nextbite[0] == name) // if name matches
return unescape(nextbite[1]); // return value
}
return null;
}
var today = new Date();
var expiry = new Date(today.getTime() + 1000 * 24 * 60 * 60 * 1000); // plus 1000 days
function setCookie(name, value) { // use: setCookie("name", value);
if (value != null && value != "")
document.cookie=name + "=" + escape(value) + "; expires=" + expiry.toGMTString() + "; path=/;";
bites = document.cookie.split("; "); // update cookie bites
}
myFontSize = 1;
function setupTextSizer() {
largeroff = new Image();
largeron = new Image();
largeroff.src = "layout/larger-off.gif";
largeron.src = "layout/larger-on.gif";
smalleroff = new Image();
smalleron = new Image();
smalleroff.src = "layout/smaller-off.gif";
smalleron.src = "layout/smaller-on.gif";
document.getElementById("makelarger").onmouseover = function(e) { document.getElementById("makelarger").src = largeron.src; };
document.getElementById("makelarger").onmouseout = function(e) { document.getElementById("makelarger").src = largeroff.src; };
document.getElementById("makesmaller").onmouseover = function(e) { document.getElementById("makesmaller").src = smalleron.src; };
document.getElementById("makesmaller").onmouseout = function(e) { document.getElementById("makesmaller").src = smalleroff.src; };
bites = document.cookie.split("; "); // update cookie bites
cookieSize = getCookie("myFontSize");
if(cookieSize && (cookieSize > 0.3) && (cookieSize < 2.1)) {
myFontSize = getCookie("myFontSize");
myFontSize=(Math.round(10*myFontSize))/10;
}
document.body.style.fontSize = myFontSize+"em";
}
function makelarger() {
if(myFontSize < 1.1) {
myFontSize=0+myFontSize+0.1;
myFontSize=(Math.round(10*myFontSize))/10;
document.body.style.fontSize = myFontSize+"em";
setCookie("myFontSize", myFontSize);
//parent.scroll(0, 60000); //Scroll to page bottom
}
}
function makesmaller() {
if(myFontSize > 0.8) {
myFontSize=0+myFontSize-0.1;
myFontSize=(Math.round(10*myFontSize))/10;
document.body.style.fontSize = myFontSize+"em";
setCookie("myFontSize", myFontSize);
pageShrink=true;
}
}
[/Javascript]
Re: Need Help with Script not working in Firefox
This is the html that is being used.
HTML Code:
<html>
<head>
<script type="text/javascript" src="js/TextSizer.js"></script>
<script type="text/javascript" src="js/fader2.js"></script>
<SCRIPT language=JavaScript type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</SCRIPT>
<link rel="stylesheet" href="layout.css" type="text/css" media="screen">
<style>
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor=ffffff >
<div id="fading-pics">
<marquee width="100%" behavior="scroll" direction="right" scrollamount="25" scrolldelay="0"> -->
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 278, 127, 0, 15000, 1, "R")
</script>
</marquee>
</div>
<div id="header-main2">
<div id="header-content">
<br>
<div align="center"><font class="header">Example of Problem</font></div>
</div>
<p id="white-blue-text">
<img src="layout/ResizeText.gif"><a href="javascript:makelarger();"><img id="makelarger" src="layout/larger-off.gif" alt="Increase Text" border="0" height="19"></a> <a href="javascript:makesmaller();"><img id="makesmaller" src="layout/smaller-off.gif" alt="Decrease Text" border="0" height="19"></a>
</p>
</div>
aaaaaaaaaaaaaaaaaaaaa<br>
bbbbbbbbbbbbbbbbbbbb
<script type="text/javascript">
//floatSetup();
setupTextSizer();
</script>
</body>
</html>
