SitePoint Sponsor

User Tag List

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

    script compatibility problem

    Hi,
    I've been attempting to make the script below compatible on firefox, without success. It workds as intended in IE7, but fails in ff.

    I would appreciate any input to help achieve this.

    many thanks.

    <script>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    td{border:3px solid red;}
    </style>
    <script type="text/javascript">
    function hideShow(el_id){
    var el=document.getElementById(el_id);
    if(el_id.style.display!="none"){
    el_id.style.display="none";
    }else{
    el_id.style.display="";
    }
    }
    </script>
    </head>
    <body onLoad="hideShow(row1);return false;">


    <table width="100%" border="0">
    <tr>
    <td colspan="3"> <a href="#" onclick="hideShow(row1);return false;">Hide/Show Row 2</a></td>
    </tr>
    <tr id="row1">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>bottom row </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>
    </script>

  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)
    It should be:
    Code:
    onclick="hideShow('row1');return false;"
    as row1 is a string and not a variable. The same in your onload event in the body (onload should be in lowercase).

    I think you should try to investigate unobtrusive javascript (google it).

    Also, I hope the <script> and </script> before the DOCTYPE and after the </html> aren't normally there.

    Oh, and are you actually going to be displaying tabular data (data in rows and columns)? Or is the table just for layout purposes? If it's for layout purposes, you should not be using a table.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Raffles,
    Appreciate your input.

    <code>
    onclick="hideShow('row1');return false;"
    </code>

    breaks it and it doesn't work at all then.

    sorry, the <script> tags before and after were my error, I meant to use <code> to present code in this forum.

    Yes, this will be displaying tabular data.

    I have found that removing the doctype allows this to work in firefox ? I realise this is not the 'solution'.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Internet Explorer automatically creates variables for identified elements and named elements, which has always been a bad feature.
    You need to explicitly create those variables for the script to work properly.

    Raffles is right, pass the text value 'row1' to the function.

    The problem lies in the function itself. After getting the element from the passed identifier, you went on on to use the passed identifier as if it were an element. Confusing, and no wonder you were having such troubles.

    Here's a version of your hideShow function that works properly.

    Code javascript:
    function hideShow(id){
        var el = document.getElementById(id);
        if (el.style.display != "none") {
            el.style.display = "none";
        } else {
            el.style.display = "";
        }
    }

    Call it with hideShow('row1') and you should be much the better improved.
    Last edited by paul_wilkins; Jul 22, 2008 at 00:05.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    Really appreciate your help, works perfect in both.

    Many thanks.


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
  •