SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2002
    Location
    New Zealand
    Posts
    1,021
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making Parts Of Page Disappear With JS

    Hi,

    A while ago I posted a thread on this topic, but it got rather confusing so I decide to post it again now I know exactly what I need to do. How to do it, is still the problem.

    I am trying to get a cell in a table to dissappear when the image show/hide is clicked and vise versa. (http://www.maccrazy.net/show.php)

    So far this is what I have worked out:

    <td ID="row1" style="display:none"> Will make the cell dissappear
    <td ID="row1" style="display:show"> Will make it visible

    I need to be able to have the values 'none' and 'show' change when the user clicks on show/hide.

    Any help would be great,
    Thanks


  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS display completely removes the element from the document. You should use visibility:visible/hidden
    Code:
    <html>
    <head>
    <script type="text/javascript" language="javascript">
    
    function togglePic(oImage) {
    oImage.style.visibility = ((oImage.style.visibility == 'hidden') ? 'visible' : 'hidden');
    }
    
    </script>
    </head>
    <body>
    <table border="1">
    <tr>
    <td ID="cell1" style="visibility:visible;cursor:hand;cursor:pointer;"onclick="togglePic(this.lastChild)">
    <img src="http://www.sitepointforums.com/images/sitepoint-logo.gif"></td>
    <td ID="cell2">click the pic</td>
    </tr>
    </table>
    </body>
    </html>
    Last edited by adios; May 30, 2003 at 19:08.

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2002
    Location
    New Zealand
    Posts
    1,021
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS display completely removes the element from the document.
    That was the point. Sorry if I wan't clear before.

    The other thing is, I want the right hand cell to disappear when the image is clicked, not the actual image itself.

    I will have a play with the code you have posted though would I be correct in saying it is only possible to make images dissappear with it?

  4. #4
    SitePoint Addict
    Join Date
    May 2003
    Location
    The Netherlands
    Posts
    391
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    • show is not a valid display property that I know, you should use block instead.
    • document.row1 is not the element you are trying to refer to, document.getElementById("row1") is.
    • The hide function that would toogle the display property could look like this:
    Code:
    function hide(){
     var el=document.getElementById("row1");
     if (el.style.display=="none") {el.style.display="block"};
     else {el.style.display="none";}
    }

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2002
    Location
    New Zealand
    Posts
    1,021
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much. I had been trying to get this to work for ages.


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
  •