Change media of stylesheet

[Spartanicus]

Does anyone know how to change the media of stylesheet with javscript

What are you actually trying to do?

 

[Chris]

Does anyone know how to change the media of stylesheet with javscript and is
it cross browser? Regards.

 

[Chris]

I want to have a printer friendly page. My code is all css based so changing
the media type to 'print' in the style definition does what I want. So I
would like JS that changes:

<link rel="stylesheet" href="Footer.css" media="screen" />

to

<link rel="stylesheet" href="Footer.css" media="print" />

Regards.

 

[Dylan Parry]

<link rel="stylesheet" href="Footer.css" media="screen" />
to
<link rel="stylesheet" href="Footer.css" media="print" />

Doesn't the media attribute accept comma separated values? Eg.

<link rel="stylesheet" href="Footer.css" media="screen, print" />

 

[Bernhard Sturm]

I want to have a printer friendly page. My code is all css based so changing
the media type to 'print' in the style definition does what I want. So I
would like JS that changes:

<link rel="stylesheet" href="Footer.css" media="screen" />

to

<link rel="stylesheet" href="Footer.css" media="print" />

why would you want such a thing?
if your code is css-based, why not including the @media print {} in your
style-sheet(s)? using JS to switch between media-types seems a bit odd
(IMO).
media-type 'screen' is for screen, print will only be used for print as
being used by the users UA. so don't break the users UA

bernhard

 

[Chaddy2222]

I want to have a printer friendly page. My code is all css based so changing
the media type to 'print' in the style definition does what I want. So I
would like JS that changes:

<link rel="stylesheet" href="Footer.css" media="screen" />

to

<link rel="stylesheet" href="Footer.css" media="print" />

Regards

Ok.
For starters, you neeed to link a different stylesheet to the document
for printing. You will still want to ordinary screen stylesheet to be
there for visual presentation.
But, for printing, you will want to get rid of the stuff you don't
need, navigation etc etc. So just create a different sheet for that.
You could also do the same for PDA and Mobile devices.
I hope that helps.

 

[Chris]

It doesn't seem to print properly when I have it in screen mode. Also I just
think people get it more when they press a button and the screen goes into a
printer friendly page. It's like they can be sure of what they are getting
before they press print. Maybe it's just me but the amount of times I have
seen annoyed users who go to print and don't get what they want.

 

[Beauregard T. Shagnasty]

I want to have a printer friendly page. My code is all css based so
changing the media type to 'print' in the style definition does what
I want. So I would like JS that changes:

<link rel="stylesheet" href="Footer.css" media="screen" />

to

<link rel="stylesheet" href="Footer.css" media="print" />

Why don't you just use two stylesheets? Put a call to both of them in
your pages.

<link rel="stylesheet" href="Footer.css" media="screen" />
<link rel="stylesheet" href="printing.css" media="print" />

Note different name. No JavaScript necessary.
Put all styles relating to printing in the print stylesheet.
See this site of mine, and do a print preview on any of the pages.
http://countryrode.com/
My client keeps a printed copy of
http://countryrode.com/sales/preowned.php
on the counter.

Here's the print stylesheet:
http://countryrode.com/style/crprint.css

 

[Bernhard Sturm]

It doesn't seem to print properly when I have it in screen mode. Also I just
think people get it more when they press a button and the screen goes into a
printer friendly page. It's like they can be sure of what they are getting
before they press print. Maybe it's just me but the amount of times I have
seen annoyed users who go to print and don't get what they want.

there are different approaches to this problem
a) rely on the media-type 'print' and design a separate design for this
media-type. I never had any problems doing this (at least in the most
common UAs, such as FF, Safari, IE). most UAs offer the possibility of a
'Print Preview', let the user use this function as it is based on the
styles defined under your @media print {}.

b) provide a print-function on your site. this is pretty easy as you can
open your content based on a separate designed style-sheet (based on
your @media type print {} styles).

with both scenarios no JS-switch is necessary. I prefer approach a) as
this offers the most standards-compliant solution, and you don't have to
think of the users UA or other things, that are not in your control.

bernhard

 

[wayne]

Why don't you just use two stylesheets? Put a call to both of them in
your pages.

<link rel="stylesheet" href="Footer.css" media="screen" />
<link rel="stylesheet" href="printing.css" media="print" />

Note different name. No JavaScript necessary.
Put all styles relating to printing in the print stylesheet.
See this site of mine, and do a print preview on any of the pages.
http://countryrode.com/
My client keeps a printed copy of
http://countryrode.com/sales/preowned.php
on the counter.

Here's the print stylesheet:
http://countryrode.com/style/crprint.css

Or place the print settings in your normal css:

@media print {

body, p {
font-size: 10pt !important;
}

ul {
list-style:square;
margin-top:0em;
margin-bottom:0em;
}

h1 {
text-align : left;
margin : 0em;
font-family : sans-serif;
font-variant : small-caps ;
}

hr {
background-color : #000 ;
color: #000 ;
line-height : 2px;
height : 2px;
}
#head, #menu, #left, #footer, .change-div a {
display:none !important;
}


#content {
background-color: #fff;
width: 100% !important;
border-style: none !important;
text-align:left;
margin: 0 0 0 0 !important;
}

#content a {
text-decoration: none;
}
}

--
Wayne
http://www.glenmeadows.us
With or without religion, you would have good people doing good things
and evil people doing evil things. But for good people to do evil
things, that takes religion.
—Steven Weinberg

 

[Beauregard T. Shagnasty]

Or place the print settings in your normal css:

@media print {

....

This would work as well. I find it easier to demonstrate print styling

#content a {
text-decoration: none;

I tend to allow links to be underlined on the printed copy, so the
reader of the paper knows that further information would be available if
s/he went to the computer. Depends on the circumstances, though.

 

[wayne]

...

This would work as well. I find it easier to demonstrate print styling


I tend to allow links to be underlined on the printed copy, so the
reader of the paper knows that further information would be available if
s/he went to the computer. Depends on the circumstances, though.

Good points. Since the print copy is from the site though, I assumed
the user already knew about the links.

As for using the same file, it is easier for me to have only one file to
maintain. YMMV, especially if one has multiple style sheets.

Regards,

--
Wayne
http://www.glenmeadows.us
With or without religion, you would have good people doing good things
and evil people doing evil things. But for good people to do evil
things, that takes religion.
—Steven Weinberg

 

[Beauregard T. Shagnasty]

Good points. Since the print copy is from the site though, I assumed
the user already knew about the links.

Normally, this would be the case .. unless the printing person passed

As for using the same file, it is easier for me to have only one file
to maintain. YMMV, especially if one has multiple style sheets.

...such as Ben Meadowcroft's css templates, where the print and the
layout are both separated from the content (main) styling. Sure, they
are templates, but the separation makes it easier to change the layout
without messing up/messing with normal display styles. But like you say,
YMMV. Choice Is Goodâ„¢.

http://benmeadowcroft.com/webdev/csstemplates/left-column.html

 

[Adrienne Boswell]

Normally, this would be the case .. unless the printing person passed
the paper on to someone else. <g>

I print the href after eg:
#content a:link:after, #content a:visited:after {
content: " (www.example.com/"attr(href) ") ";
font-size: 90%;
font-style: italic;
}

This works for modern browsers, I'm not sure if it works for IE7, anyone?