469,336 Members | 5,816 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,336 developers. It's quick & easy.

Firefox 2.0 problem with Javascript

12
hi all,

i do the following JS code:

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript"> 
  2.  
  3. function hideLevel(id) { 
  4. var thisLevel = document.getElementById(id); 
  5. thisLevel.style.display = "none"; 
  6.  
  7. function showLevel(id) { 
  8. var thisLevel = document.getElementById(id); 
  9. if ( thisLevel.style.display == "none") { 
  10. thisLevel.style.display = "block"; 
  11. else { 
  12. hideLevel(id); 
  13.  
  14. function hideAll() { 
  15. hideLevel("layer1"); 
  16. hideLevel("layer2"); 
  17. hideLevel("layer3"); 
  18.  
  19. </script> 
  20.  
as you see, when i click on some link - the div layer is showing, when i click back - it is hiding.

Firefox is showing nothing. When I click on the link it shows for a milli-second, then disappears.

What can You suggest, please?
Apr 19 '07 #1
14 5322
mrhoo
428 256MB
All I see that is wrong is your script type.
<script language="javascript">

Should be <script type="text/javascript">
IE doesn't care, because it uses jscript, but some other browsers need the
correct type
Apr 19 '07 #2
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5.     <title>Untitled</title>
  6. </head>
  7.  
  8. <style>
  9. .box {width:50px; height:50px; border:1px solid #000}
  10. </style>
  11.  
  12. <script> 
  13.  
  14. function hideLevel(id) { 
  15. var thisLevel = document.getElementById(id); 
  16. thisLevel.style.display = "none"; 
  17.  
  18. function showLevel(id) { 
  19. var thisLevel = document.getElementById(id); 
  20. if ( thisLevel.style.display == "none") { 
  21. thisLevel.style.display = "block"; 
  22. else { 
  23. hideLevel(id); 
  24.  
  25. function hideAll() { 
  26. hideLevel("layer1"); 
  27. hideLevel("layer2"); 
  28. hideLevel("layer3"); 
  29.  
  30. </script> 
  31.  
  32. <body>
  33.  
  34. <div class="box" id="layer1"></div>
  35. <div class="box" id="layer2"></div>
  36. <div class="box" id="layer3"></div>
  37.  
  38. <a href="javascript:void(0)" onclick="hideAll()">Hide all</a>
  39. <a href="javascript:void(0)" onclick="hideLevel('layer1')">Hide 1</a>
  40. <a href="javascript:void(0)" onclick="hideLevel('layer2')">Hide 2</a>
  41. <a href="javascript:void(0)" onclick="hideLevel('layer3')">Hide 3</a>
  42. <a href="javascript:void(0)" onclick="showLevel('layer1')">Show 1</a>
  43. <a href="javascript:void(0)" onclick="showLevel('layer2')">Show 2</a>
  44. <a href="javascript:void(0)" onclick="showLevel('layer3')">Show 3</a>
  45.  
  46. </body>
  47. </html>
  48.  
  49.  
everything worked just fine for me!
Apr 19 '07 #3
blobb
12
here is my complete code:

Expand|Select|Wrap|Line Numbers
  1.  
  2. ok. here is the complete code:
  3.  
  4. -------------------------------------------------------------------
  5. <html>
  6.  
  7. <head>
  8.  
  9. <script language=javascript type='text/javascript'>
  10.  
  11. function hideDiv() 
  12.  
  13. {
  14. if (document.getElementById) { // DOM3 = IE5, NS6 
  15. document.getElementById('hideShow').style.visibility = 'hidden';
  16. else { 
  17. if (document.layers) { // Netscape 4 
  18. document.hideShow.visibility = 'hidden'; 
  19. else { // IE 4 
  20. document.all.hideShow.style.visibility = 'hidden'; 
  21.  
  22. function showDiv() { 
  23. if (document.getElementById) { // DOM3 = IE5, NS6 
  24. document.getElementById('hideShow').style.visibility = 'visible'; 
  25. else { 
  26. if (document.layers) { // Netscape 4
  27. document.hideShow.visibility = 'visible';
  28. }
  29. else { // IE 4
  30. document.all.hideShow.style.visibility = 'visible';
  31. }
  32. }
  33. }
  34. </script>
  35.  
  36. <body onLoad = "javascript:hideDiv();">
  37.  
  38. <div>
  39.  
  40. <a href onClick="showDiv('hideShow');" style="cursor: hand">
  41. <img src = "file://D:/webroot/site_pics/bo.jpg"></a>
  42. </div>
  43.  
  44. <div id="hideShow">
  45. <img src = "file://D:/webroot/site_pics/bo_big.jpg" onClick = "hideDiv('hideShow');">
  46. </div>
  47.  
  48. </body>
  49. </html>
  50.  
  51. ---------------------------------------------------------------- 

interesting thing is that i have tried it without images, just with simple text - AND IT WORKS!
and when I insert images - no result.
Apr 20 '07 #4
drhowarddrfine
7,435 Expert 4TB
This won't work:
<a href onClick="showDiv('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">
Apr 20 '07 #5
acoder
16,027 Expert Mod 8TB
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.
Apr 20 '07 #6
blobb
12
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5.     <title>Untitled</title>
  6. </head>
  7.  
  8. <style>
  9. .box {width:50px; height:50px; border:1px solid #000}
  10. </style>
  11.  
  12. <script> 
  13.  
  14. function hideLevel(id) { 
  15. var thisLevel = document.getElementById(id); 
  16. thisLevel.style.display = "none"; 
  17.  
  18. function showLevel(id) { 
  19. var thisLevel = document.getElementById(id); 
  20. if ( thisLevel.style.display == "none") { 
  21. thisLevel.style.display = "block"; 
  22. else { 
  23. hideLevel(id); 
  24.  
  25. function hideAll() { 
  26. hideLevel("layer1"); 
  27. hideLevel("layer2"); 
  28. hideLevel("layer3"); 
  29.  
  30. </script> 
  31.  
  32. <body>
  33.  
  34. <div class="box" id="layer1"></div>
  35. <div class="box" id="layer2"></div>
  36. <div class="box" id="layer3"></div>
  37.  
  38. <a href="javascript:void(0)" onclick="hideAll()">Hide all</a>
  39. <a href="javascript:void(0)" onclick="hideLevel('layer1')">Hide 1</a>
  40. <a href="javascript:void(0)" onclick="hideLevel('layer2')">Hide 2</a>
  41. <a href="javascript:void(0)" onclick="hideLevel('layer3')">Hide 3</a>
  42. <a href="javascript:void(0)" onclick="showLevel('layer1')">Show 1</a>
  43. <a href="javascript:void(0)" onclick="showLevel('layer2')">Show 2</a>
  44. <a href="javascript:void(0)" onclick="showLevel('layer3')">Show 3</a>
  45.  
  46. </body>
  47. </html>
  48.  
  49.  
everything worked just fine for me!
yes. this helped, thanks a lot, man!
as i understood, the problem was "javascript:void(0)" - i removed it once from the code, and my problem repeated.
Apr 21 '07 #7
drhowarddrfine
7,435 Expert 4TB
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">
Apr 21 '07 #8
blobb
12
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.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

is this ok? cuz in strict i some table problems on the page...
Apr 21 '07 #9
drhowarddrfine
7,435 Expert 4TB
Are transitioning older, deprecated code? Otherwise, fix your tables and use strict.
Apr 21 '07 #10
blobb
12
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.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

you think i might have a lot of problems with it?
Apr 22 '07 #11
drhowarddrfine
7,435 Expert 4TB
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.
Apr 22 '07 #12
hi guys... i just did anything but it dont want to work on FireFox... any other browser working fine... i need some help :(


Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. var sliderwidth=400                    //Specify the slider's width (in pixels)
  4. var sliderheight=145                    //Specify the slider's height (in pixels, pertains only to NS)
  5. var slidespeed=4                        //Specify the slider's scroll speed (larger is faster)
  6. var pocet=14
  7. var finalslide=""
  8. var leftrightslide=new Array()            //Specify the slider's images
  9.  
  10.  
  11. for (a=0;a<pocet;a++){
  12. leftrightslide[a]="<a onclick={images.obr.src=\"images/"+a+".jpg\"}> <img src=images/"+a+".jpg border=1 height=\"50\"></a>"
  13. }
  14.  
  15.  
  16. var copyspeed=slidespeed
  17. for (i=0;i<leftrightslide.length;i++)
  18. finalslide=finalslide+leftrightslide[i]+"&nbsp;&nbsp;"
  19. if (document.all){
  20. document.write('<marquee id=ieslider scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>')
  21. ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
  22. ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
  23. }
  24. function regenerate(){
  25. window.location.reload()
  26. }
  27. function regenerate2(){
  28. if (document.layers){
  29. document.ns_slider01.visibility="show"
  30. setTimeout("window.onresize=regenerate",450)
  31. intializeleftrightslide()
  32. }
  33. if (document.all)
  34. ieslider.scrollAmount=slidespeed
  35. }
  36. function intializeleftrightslide(){
  37. document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
  38. document.ns_slider01.document.ns_slider02.document.close()
  39. thelength=document.ns_slider01.document.ns_slider02.document.width
  40. scrollslide()
  41. }
  42. function scrollslide(){
  43. if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){
  44. document.ns_slider01.document.ns_slider02.left-=slidespeed
  45. setTimeout("scrollslide()",100)
  46. }
  47. else{
  48. document.ns_slider01.document.ns_slider02.left=sliderwidth
  49. scrollslide()
  50. }
  51. }
  52. window.onload=regenerate2
  53.  
  54. //-->
  55. </script>
  56.  
  57.  
  58. <ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide>
  59. <layer name="ns_slider02" onMouseover="slidespeed=0;" onMouseout="slidespeed=copyspeed"></layer>
  60. </ilayer>
  61.  
  62. <img src="images/0.jpg" border="1"  height="75%" alt="Fotos" name="obr">
  63.  
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
Mar 24 '08 #13
acoder
16,027 Expert Mod 8TB
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.getElementById().

If you didn't write this code, just get a modern version of this script.
Mar 24 '08 #14
drhowarddrfine
7,435 Expert 4TB
As acoder said, there is no such thing as <layer> or <ilayer>
Mar 25 '08 #15

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

12 posts views Thread by Howard Kaikow | last post: by
3 posts views Thread by niconedz | last post: by
6 posts views Thread by Mark Olbert | last post: by
4 posts views Thread by lmarceglia | last post: by
11 posts views Thread by minnesotti | last post: by
8 posts views Thread by Matt Kruse | last post: by
3 posts views Thread by SAL | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.