Firefox 2.0 problem with Javascript

**mrhoo** · Apr 19 '07, 04:58 PM

All I see that is wrong is your script type.
<script language="javas cript">

Should be <script type="text/javascript">
IE doesn't care, because it uses jscript, but some other browsers need the
correct type

**Romulo NF** · Apr 19 '07, 05:35 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<style>
.box {width:50px; height:50px; border:1px solid #000}
</style>

<script> 

function hideLevel(id) { 
var thisLevel = document.getElementById(id); 
thisLevel.style.display = "none"; 
} 

function showLevel(id) { 
var thisLevel = document.getElementById(id); 
if ( thisLevel.style.display == "none") { 
thisLevel.style.display = "block"; 
} 
else { 
hideLevel(id); 
} 
} 

function hideAll() { 
hideLevel("layer1"); 
hideLevel("layer2"); 
hideLevel("layer3"); 

} 
</script> 

<body>

<div class="box" id="layer1"></div>
<div class="box" id="layer2"></div>
<div class="box" id="layer3"></div>

<a href="javascript:void(0)" onclick="hideAll()">Hide all</a>
<a href="javascript:void(0)" onclick="hideLevel('layer1')">Hide 1</a>
<a href="javascript:void(0)" onclick="hideLevel('layer2')">Hide 2</a>
<a href="javascript:void(0)" onclick="hideLevel('layer3')">Hide 3</a>
<a href="javascript:void(0)" onclick="showLevel('layer1')">Show 1</a>
<a href="javascript:void(0)" onclick="showLevel('layer2')">Show 2</a>
<a href="javascript:void(0)" onclick="showLevel('layer3')">Show 3</a>

</body>
</html>

everything worked just fine for me!

**blobb** · Apr 20 '07, 07:21 AM

here is my complete code:

Code:

ok. here is the complete code:

-------------------------------------------------------------------
<html>

<head>

<script language=javascript type='text/javascript'>

function hideDiv() 

{
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideShow').style.visibility = 'hidden';
} 
else { 
if (document.layers) { // Netscape 4 
document.hideShow.visibility = 'hidden'; 
} 
else { // IE 4 
document.all.hideShow.style.visibility = 'hidden'; 
} 
} 
} 

function showDiv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideShow').style.visibility = 'visible'; 
} 
else { 
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
</script>

<body onLoad = "javascript:hideDiv();">

<div>

<a href onClick="showDiv('hideShow');" style="cursor: hand">
<img src = "file://D:/webroot/site_pics/bo.jpg"></a>
</div>

<div id="hideShow">
<img src = "file://D:/webroot/site_pics/bo_big.jpg" onClick = "hideDiv('hideShow');">
</div>

</body>
</html>

----------------------------------------------------------------

interesting thing is that i have tried it without images, just with simple text - AND IT WORKS!
and when I insert images - no result.

**drhowarddrfine** · Apr 20 '07, 01:33 PM

This won't work:
<a href onClick="showDi v('hideShow');" style="cursor: hand">
The href isn't equal to anything. Also, change onClick to lower case.
In addition, 'hand' is not standard and IE only.

Other points:
1) I assume you are using a valid doctype? You will never get IE to pretend it's a modern browser without one.

You still need to change to this:
<script type="text/javascript">

**acoder** · Apr 20 '07, 02:04 PM

Originally posted by blobb

interesting thing is that i have tried it without images, just with simple text - AND IT WORKS!
and when I insert images - no result.

That means it does work.

Firefox will not let you access local files using Javascript whilst IE does.

I'm afraid the only solution is to use web images, not images from your hard drive.

Even so, you should correct your errors as drhowarddrfine pointed out.

**blobb** · Apr 21 '07, 07:12 AM

Originally posted by Romulo NF

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<style>
.box {width:50px; height:50px; border:1px solid #000}
</style>

<script> 

function hideLevel(id) { 
var thisLevel = document.getElementById(id); 
thisLevel.style.display = "none"; 
} 

function showLevel(id) { 
var thisLevel = document.getElementById(id); 
if ( thisLevel.style.display == "none") { 
thisLevel.style.display = "block"; 
} 
else { 
hideLevel(id); 
} 
} 

function hideAll() { 
hideLevel("layer1"); 
hideLevel("layer2"); 
hideLevel("layer3"); 

} 
</script> 

<body>

<div class="box" id="layer1"></div>
<div class="box" id="layer2"></div>
<div class="box" id="layer3"></div>

<a href="javascript:void(0)" onclick="hideAll()">Hide all</a>
<a href="javascript:void(0)" onclick="hideLevel('layer1')">Hide 1</a>
<a href="javascript:void(0)" onclick="hideLevel('layer2')">Hide 2</a>
<a href="javascript:void(0)" onclick="hideLevel('layer3')">Hide 3</a>
<a href="javascript:void(0)" onclick="showLevel('layer1')">Show 1</a>
<a href="javascript:void(0)" onclick="showLevel('layer2')">Show 2</a>
<a href="javascript:void(0)" onclick="showLevel('layer3')">Show 3</a>

</body>
</html>

everything worked just fine for me!

yes. this helped, thanks a lot, man!
as i understood, the problem was "javascript:voi d(0)" - i removed it once from the code, and my problem repeated.

**drhowarddrfine** · Apr 21 '07, 02:54 PM

btw, your doctype is incomplete and puts IE into quirks mode. New pages should always use the strict doctype, too. Use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

**blobb** · Apr 21 '07, 05:18 PM

Originally posted by drhowarddrfine

btw, your doctype is incomplete and puts IE into quirks mode. New pages should always use the strict doctype, too. Use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

i will use

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">

is this ok? cuz in strict i some table problems on the page...

**drhowarddrfine** · Apr 21 '07, 10:57 PM

Are transitioning older, deprecated code? Otherwise, fix your tables and use strict.

**blobb** · Apr 22 '07, 07:34 AM

i use tables, not the layers yet.
in strict mode there are some padding problems, so i changed it to <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">

you think i might have a lot of problems with it?

**drhowarddrfine** · Apr 22 '07, 11:13 AM

A doctype is not something to be changed. You always make the markup fit the doctype, not the doctype fit the markup. The doctype, essentially, is the set of rules you are coding to. You can't change the rules after you are done coding.

The padding issues are html/css and not javascript so you need to ask those questions there. But the complete code or a link is necessary.

**Shokarta** · Mar 24 '08, 12:03 AM

hi guys... i just did anything but it dont want to work on FireFox... any other browser working fine... i need some help :(

Code:

<script type="text/javascript">

var sliderwidth=400					//Specify the slider's width (in pixels)
var sliderheight=145					//Specify the slider's height (in pixels, pertains only to NS)
var slidespeed=4						//Specify the slider's scroll speed (larger is faster)
var pocet=14
var finalslide=""
var leftrightslide=new Array()			//Specify the slider's images


for (a=0;a<pocet;a++){
leftrightslide[a]="<a onclick={images.obr.src=\"images/"+a+".jpg\"}> <img src=images/"+a+".jpg border=1 height=\"50\"></a>"
}


var copyspeed=slidespeed
for (i=0;i<leftrightslide.length;i++)
finalslide=finalslide+leftrightslide[i]+"&nbsp;&nbsp;"
if (document.all){
document.write('<marquee id=ieslider scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>')
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
document.ns_slider01.visibility="show"
setTimeout("window.onresize=regenerate",450)
intializeleftrightslide()
}
if (document.all)
ieslider.scrollAmount=slidespeed
}
function intializeleftrightslide(){
document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
document.ns_slider01.document.ns_slider02.document.close()
thelength=document.ns_slider01.document.ns_slider02.document.width
scrollslide()
}
function scrollslide(){
if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){
document.ns_slider01.document.ns_slider02.left-=slidespeed
setTimeout("scrollslide()",100)
}
else{
document.ns_slider01.document.ns_slider02.left=sliderwidth
scrollslide()
}
}
window.onload=regenerate2

//-->
</script>


<ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide>
<layer name="ns_slider02" onMouseover="slidespeed=0;" onMouseout="slidespeed=copyspeed"></layer>
</ilayer>

<img src="images/0.jpg" border="1"  height="75%" alt="Fotos" name="obr">

it may be a problem in <layer> and <ilayer> at the end... im realy wondering how to make it works in firefox :(...

u can simply try it.. make some directory, in there place index.htm what include this script and make a subdirectory "images" what will include files from 0.jpg to 14.jpg

**acoder** · Mar 24 '08, 06:01 PM

Originally posted by Shokarta

it may be a problem in <layer> and <ilayer> at the end... im realy wondering how to make it works in firefox

Yes, you will need to replace the ilayer/layer with a div element. The code is also very old. To refer to elements use document.getEle mentById().

If you didn't write this code, just get a modern version of this script.

**drhowarddrfine** · Mar 25 '08, 02:19 PM

As acoder said, there is no such thing as <layer> or <ilayer>

Firefox 2.0 problem with Javascript

Firefox 2.0 problem with Javascript

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment