SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox and DocType issue

    hello,

    I'm having some trouble with a site I'm modernising and the crux of the problem is this....

    Here's some simple Javascript code:

    Code:
    <!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">
    <script language="JavaScript">
    <!--
    function Show_Stuff(Click_Menu, Click_Menu2)
    // Function that will swap the display/no display for
    // all content within span tags
    {
    var display2;
    if (Click_Menu.style.display == "none")
    {
    Click_Menu.style.display = "";
    Click_Menu2.style.display = "none";
    }
    else
    {
    
    Click_Menu.style.display = "none";
    Click_Menu2.style.display = "";
    }
    }
    -->
    </script>
    <span id="display1" name="display1">
    <a href="JavaScript:Show_Stuff(display2, display1)" class="menuoff">show 2s</a>
    <br>
    1111111111111111111111111111111111
    
    </span>
    
    <span id="display2" name="display2" style="display:none;">  
    
    <a href="JavaScript:Show_Stuff(display2, display1)" class="menuoff">Show 1s</a>
    <br />222222222222222222222222222
    </span>
    Now that code works fine in IE but doesn't work in FireFox, however if i remove the Doc Type declaration at the top everything becomes fine and dandy and it all works. Any idea why? I really don't want to put this site live will out a doctype as I want it to be a validated as possible, although using JS like that may not be in with the rules....

    Any ideas?

    Cheers people of the masses.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Try using <script type="text/javascript"> instead of it with the language attribute. And remove the <!-- comments. I'm pretty sure that it's because of them that Firefox is ignoring your javascript.

    Presumably you took out the <head>, <body> etc. to avoid bloat? Also, using a href="javascript:..." is nasty. Use the onclick attribute, or delve into unobtrusive javascript.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea I've trimmed it right back for displaying on here.

    Cheers for those comments, will give them a go now!

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Morning,

    I have tried all the above and still doesnt work in firefox, complains that display2 is not defined.

    Ive tried all sorts and had loads of looks around forums but cant find any decent code.

    I can get it working by changing the innerhtml of a span but i would much rather not do it that way as the contents of each span is huge.

    Here's updated code if anyone can shed some more light.

    Code:
    <!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">
    <head>
    <script language="JavaScript">
    function Show_Stuff(Click_Menu, Click_Menu2)
    {
    var display2;
    if (Click_Menu.style.display == "none")
    {
    Click_Menu.style.display = "";
    Click_Menu2.style.display = "none";
    }
    else
    {
    
    Click_Menu.style.display = "none";
    Click_Menu2.style.display = "";
    }
    }
    </script>
    </head>
    <body>
    <span id="display1" name="display1">
    <a href="#" onClick="javascript:Show_Stuff(display2, display1)" class="menuoff">show 2s</a>
    <br>
    1111111111111111111111111111111111
    </span>
    
    <span id="display2" name="display2" style="display:none;">  
    <a href="#" onClick="javascript:Show_Stuff(display2, display1)" class="menuoff">Show 1s</a>
    <br />222222222222222222222222222
    </span>
    </body>
    </html>

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok fully working code below....

    Code:
    <!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">
    <head>
    <script language="JavaScript">
    function Show_Stuff()
    {
    
    if (document.getElementById("display1").style.display == "none")
    {
    document.getElementById("display1").style.display = "inline";
    document.getElementById("display2").style.display = "none";
    }
    else
    {
    
    document.getElementById("display1").style.display = "none";
    document.getElementById("display2").style.display = "inline";
    }
    }
    </script>
    </head>
    <body>
    <span id="display1" name="display1" style="display:inline;">
    <a href="#" onClick="javascript:Show_Stuff()" class="menuoff">show 2s</a>
    <br>
    1111111111111111111111111111111111
    </span>
    
    <span id="display2" name="display2" style="display:none;">  
    <a href="#" onClick="javascript:Show_Stuff()" class="menuoff">Show 1s</a>
    <br />222222222222222222222222222
    </span>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •