Change media of stylesheet

"Chris" <> wrote:

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

What are you actually trying to do?

--
Spartanicus

Spartanicus

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

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.

"Spartanicus" <> wrote in message
news:...
> "Chris" <> wrote:
>
>>Does anyone know how to change the media of stylesheet with javscript
>
> What are you actually trying to do?
>
> --
> Spartanicus

Chris wrote:

> <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" />

--
Dylan Parry - http://electricfreedom.org

A Flower?

Chris wrote:
> 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

--
www.daszeichen.ch
remove nixspam to reply

Chris wrote:
> 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.
--
Regards Chad. http://freewebdesign.cjb.cc

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.

"Bernhard Sturm" <> wrote in message
news:e9df0f$rar$...
> Chris wrote:
>> 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
>
> --
> www.daszeichen.ch
> remove nixspam to reply

Chris wrote:

> 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

--
-bts
-Warning: I brake for lawn deer

Chris wrote:
> 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

--
www.daszeichen.ch
remove nixspam to reply

Beauregard T. Shagnasty wrote:
> Chris wrote:
>
>> 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
>

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