SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member distendo's Avatar
    Join Date
    May 2004
    Location
    UK
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Visible/hidden coding for Mozilla (yet again)...

    I'm trying to get a solid grip on the business of hiding and showing elements in a web page. I expect this aspect (browser compatibility) has already been thrashed out on this forum, and I apologise if I'm asking for the same ground to be gone over again, but I can't find any elementary reference to the issue.

    I'm using an example of a basic code for revealing and hiding text (and similarly another one which reveals/hides layers), which works in IE and Opera, but not in Mozilla. I'd appreciate any assistance in understanding Mozilla's requirements (which I understand are more 'valid'). Advice gladly received, URLs of info will be most welcome.

    The coding (kindly excuse the use of a table! :-/ ):

    <html>
    <head>
    <title>hide/show layers</title>
    <script language="javascript">

    function hideShow(thisDiv) {
    thisDiv.style.display = (thisDiv.style.display == "none" ) ? "" : "none";
    }

    </script>

    <body>
    <table bgcolor="#ffffe1" border="0" width="200">
    <tr>
    <td>
    <a href="javascript:hideShow(div1)" style="text-decoration: none">Reveal/Collapse 1-4</a><br>
    <div id="div1" style="display: none;">
    One<br>
    Two<br>
    Three<br>
    Tour<br>
    </div>
    </td>
    </tr>
    <tr>
    <td>
    <a href="javascript:hideShow(div2)" style="text-decoration: none">Reveal/Collapse 5-8<br></a>
    <div id="div2" style="display: none">
    Five<br>
    Six<br>
    Seven<br>
    Eight<br>
    </div>
    </td>
    </tr>
    </table>

    </body>
    </html>

    The only posting which seemed to touch upon this issue was from goughb dated November 2000, "NETSCAPE 6 DHTML", but I couldn't figure out if (or how) it applied.

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Massachusetts
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this instead
    Code:
    <html>
    <head>
    <title>hide/show layers</title>
    <script language="javascript">
    function hideShow(thisDiv) {
     if(!document.getElementById) {
      return;
     }
     obj = document.getElementById(thisDiv);
     obj.style.display = (obj.style.display == "none" ) ? "block" : "none";
    }
    </script>
    <body>
    <table bgcolor="#ffffe1" border="0" width="200">
    <tr>
    <td>
    <a href="javascript:hideShow('div1')" style="text-decoration: none">Reveal/Collapse 1-4</a><br>
    <div id="div1" style="display: none;">
    One<br>
    Two<br>
    Three<br>
    Tour<br>
    </div>
    </td>
    </tr>
    <tr>
    <td>
    <a href="javascript:hideShow('div2')" style="text-decoration: none">Reveal/Collapse 5-8<br></a>
    <div id="div2" style="display: none">
    Five<br>
    Six<br>
    Seven<br>
    Eight<br>
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>
    Also, make sure you fix the two java_script_s, so there are no underscores when you test the code

  3. #3
    SitePoint Member distendo's Avatar
    Join Date
    May 2004
    Location
    UK
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well thank you!

    It works (as you well knew ).

    Now all I have to do is figger out where you hid the rabbit... I mean, figger out the Javascript function. Not exactly ABC to me (as you may have guessed!).

    Thanks again!

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Massachusetts
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by distendo
    Well thank you!

    It works (as you well knew ).

    Now all I have to do is figger out where you hid the rabbit... I mean, figger out the Javascript function. Not exactly ABC to me (as you may have guessed!).

    Thanks again!
    Well...

    Here's that code again:
    Code:
    <script language="javascript">
    function hideShow(thisDiv) {
     if(!document.getElementById) {
      return;
     }
     obj = document.getElementById(thisDiv);
     obj.style.display = (obj.style.display == "none" ) ? "block" : "none";
    }
    </script>
    In the function, I check to make sure that DOM is supported. If it isn't, it returns and doesn't cause any damage.

    I then make an object with the parameter passed into the function (for example, 'div1' or 'div2', and note the quotes that around it, this turns it into a string so it can be used correctly). I then edit the obj's style.display property by the same way you did it. It isn't much different, just one extra step, and making sure that you have quotes around the argument you pass when you call the function.

    Also, should you not have posted this in a javascript forum, or something like that?

  5. #5
    SitePoint Member distendo's Avatar
    Join Date
    May 2004
    Location
    UK
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the explanation - it helps a lot.

    Could be about it's being more appropriate the JS forum (especially in retrospect), but I was guessing it was the implementation of the CSS rather than the JS which was causing the Mozilla glitch.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Massachusetts
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea, heh... in reality it was the implementation of the javascript...

    To tell you the truth, I didn't even know how that was working in MSIE... lol

  7. #7
    SitePoint Member distendo's Avatar
    Join Date
    May 2004
    Location
    UK
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An uplifting confession, my guru...

    Ta! *

    *Brit for 'thanks', ok? Not to be confused with 'Ta ta' which means 'goodbye'... Hmmm... and I think JS is confusing...


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
  •