#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    3
    Rep Power
    0

    Unhappy CSS/Javascript hide layers


    I have a site currently under construction and am having trouble hiding inactive CSS layers for printing.

    I used tabbed content sections (CSS layers/Javascript) for the main content on the site. Everything works fine until I print at which time all layers are visible and superimposed. I need a dynamic way (??a different or additional JavaScript) to print only the active layer with all inactive layers hidden.

    If you go to smoke-alley.com and choose Print Preview, you'll see the problem I'm having.

    TIA,
    Sophie
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    Forget the JavaScript and make a style sheet for printing. Read http://www.w3.org/TR/REC-CSS2/media.html for more information on how to do this.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    3
    Rep Power
    0

    Question Print Style Sheet and hiding inactive layers


    Thanks for the reply! I tried adding a print style sheet previously but ran into the same problem. I could make a *static* print style sheet (using *display* or *visibility* properties) but didn't know how to make it dynamic so that it's always the inactive panels that are hidden (i.e., it will depend on which panel the user has active as far as which panels need to be hidden for printing). Can this be done with a print style sheet without additional JavaScript? If so, how?

    Thanks again,
    Sophie
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    #devshed @ irc2.beyondirc.net
    Posts
    231
    Rep Power
    12
    Personally, I would not use such a layout. It's akin to frames, except you're using <div>'s. My personal opinion is that it's better to make these separate pages and then use css and ssi to have a consistent layout.

    It looks to me you may need to use javascript to know which layers to hide and which to display.

    Since it is technically one document, you could simply have a stylesheet that displays each <div> of content in succession.
    .
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    3
    Rep Power
    0

    Cool


    Problem solved! Made adjustments to the JavaScript so that the inactive layers were truly hidden instead of just stacked by z-index with the active layer on top.

    Thanks for your help!
    Sophie

IMN logo majestic logo threadwatch logo seochat tools logo