Inline media type

[DreamerZ]

I'm using a JS function to create a menu that uses a "style=..." tag in the <DIV> to format the menu.

document.write('<DIV ID="base" style="visibility:visible;Position : Absolute ;Left : 40% ;Top : '+YOffset+'px;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px">');

The code works fine. What I want to know is if I can make the visibility to hidden on print...hence using the @media print type inline.

Possible? If so, how? Thx,



DreamerZ

 

[MagicalDean]

I'm not exactly sure what it is you want to do....Try rephrasing the question for my blonde mind

 

[DreamerZ]

Nevermind. I figured it out. Since the document.write is writing HTML, I just added a style tag with the info I wanted.

document.write('<style>@media print { DIV#base { display:none; } }</style><DIV ID="base" style="visibility:visible;Position : Absolute ;Left : 40% ;Top : '+YOffset+'px;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px">');

So now the menu doesn't print, but is shown on the screen. VOILA!


DreamerZ

 

[Vragabond]

No, it is not possible. However, your div has an id, being base and you can just use that for your master stylesheet:

<link rel="stylesheet" href="print.css" type="text/css" />

and in that print.css

#base {
  visibility: hidden; /* if you want empty space where menu used to be */
  display: none; /* if you don't want the spaceholder */
}

 

[traingamer]

If you can't, you can always define the style(s) outside of js and just use a class within your script.

traingamer

 

[DreamerZ]

See the solution code I posted above. I couldn't set the media type inside the div tag itself, but I could write the media type style before the div tag, which works fine. I did try to use a class inside the div tag which didn't work (I already have a CSS file with a display:none for media print). I didn't try the #ID format however, which I did use above and which did work.

Thanks! I think sometimes it just helps just posing the question. It's like walking away from a problem for a moment and the solution just "popping up!"




DreamerZ

 

[traingamer]

3 responses were written before mine posted - I didn't think I typed quite THAT slowly.

traingamer

 

[MagicalDean]

 

[Vragabond]

I would suggest you use something inline with my solution, that is adding the appropriate style to existing print stylesheet or creating a new separate print stylesheet. [tt]<style>[/tt] should not be in the body of the document but in the head, though most user clients will properly incorporate it. And like traingamer said, move as much style information that you write to the div tag via javascript to the external stylesheet. Since your div has an id set, referencing it in the stylesheet should pose no problem.