SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast kaklz's Avatar
    Join Date
    Mar 2004
    Location
    Latvia, Riga
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    table, tbody collapse

    Hi, I'm trying to create some kind of table tbody element collapsing, using JavaScript:

    Code:
     <table id="filterForm">
     <thead>
      <tr><th colspan="2">Filter (<a href="#" onClick="JavaScript:document.getElementById('filterFrmBody').style.display='block';">Show</a> | <a href="#" onClick="JavaScript:document.getElementById('filterFrmBody').style.display='none';">Hide</a>)</th></tr>
     </thead>
    
     <tbody id="filterFrmBody">
      <tr><td>1</td><td>2</td></tr>
      <tr><td>3</td><td>4</td></tr>
      <tr><td>5</td><td>6</td></tr>
     </tbody>
    </table>
    I do this just because the Filter form is taking too much space (you see a smaller version of it, as the table row content does not matter so much here). This solution works on IE, however, there's a problem with FireFox (I'm using FF 0.8) - when you click hide and then show for the first time, everything goes smoothly. When you click hide for the second time - firefox forgets to collapse the space - and after clicking show again, it puts the tbody below the space it has forgot to collapse. With each of the next hide/show the space extends by the height of tbody.

    As of other browsers I have - Konqueror works perfect on this, and galeon does not.

    The question is whether this is some sort of firefox bug, or am I doing something illegal, according to XHTML/CSS/DOM ?

    Maybe there are some other solutions to achieve this efect? I've tried the visibility style, but it just hides the tbody, and does not collapse the space.

    Thanks in advance for any responses!

  2. #2
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Osnabrück, Germany
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    <thead>
       <tr><th colspan="2">Filter (<a href="#" onClick="javascript:document.getElementById('filterFrmBody').style.display='table-row-group';">Show</a> | <a href="#" onClick="javascript:document.getElementById('filterFrmBody').style.display='none';">Hide</a>)</th></tr>
    </thead>

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Actually, just set the element's display style to an empty string (just two single quotes with nothing in it). That way it will revert to its default style, like so:
    HTML Code:
    <thead>
       <tr><th colspan="2">Filter (<a href="#" onClick="java_script_:document.getElementById('filterFrmBody').style.display='';">Show</a> | <a href="#" onClick="java_script_:document.getElementById('filterFrmBody').style.display='none';">Hide</a>)</th></tr>
    </thead>

  4. #4
    SitePoint Enthusiast kaklz's Avatar
    Join Date
    Mar 2004
    Location
    Latvia, Riga
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    Unfortunately the table-row-group is not working on IE

    As far as I've tested, the empty string works ok, thanks vgarcia!


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
  •