Show/hide by class driving me nuts

Discussion in 'Web Design and Development' started by Makosuke, Oct 21, 2007.

  1. Makosuke macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #1
    This seems like it should be easy to find a tutorial on, but I've tried a half dozen different methods and none are behaving the way I want, and I'm now so annoyed I'm getting desperate.

    What I'm essentially trying to do is show/hide a couple of columns in a table, preferably using the CSS display property, with cells identified by their class, and a minimum of hairy javascript (since that degrades very cleanly to just displaying the whole table).

    The best pre-made script I've turned up thus far is:

    http://www.bytemycode.com/snippets/snippet/595/

    ...which appears to give exactly what I want, a function that toggles the visibility of all objects in a class. If I change "block" to "table-cell", it appears to work perfectly... in Safari. When I load the exact same page in Camino (1.5) or Firefox (latest) it works occasionally, and the rest of the time does absolutely nothing.

    I'm assuming that whatever Javascript engine those are using isn't that horribly broken, so there's something in the script that's choking them SOME OF THE TIME (how the hell do you create an intermittent bug like that?!), but I'm only basically literate in JS so am lost on what.

    Is there a nice tidy little script somewhere (or an accepted method) that does this?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Do you have a page that you can link here that has the problem? Just looking at the code isn't enough for me. My JavaScript skills aren't that good unless I see it in action.
     
  3. Makosuke thread starter macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #3
    I much appreciate the attempt to help. I figured out what was choking the gecko-based browsers; I had a colgroup tag in the table; almost completely unsupported, but in this case it also randomly broke the script I was trying to use. Without it, the script I linked works.

    Here's a reduced example case (sans colgroup), though:

    http://steelbluepanic.com/temp/example.html

    Now I just need to get a cross-page toggle working and I'm golden.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Yea support for col and colgroup is fading. I came across this site (http://www.velocityreviews.com/foru...uot-and-quotcolgroupquot-tags-in-firefox.html) that linked to a page about what CSS attributes can be used with col and colgroup (not many).

    For your JavaScript I'm thinking you just may need to setup an exception for those tags. Not too many people use them anyways and as CSS strengthens and is supported better in browsers there won't be a need for those tags.
     

Share This Page