Determining Browser and assign function

[robert89]

I want to be able to toggle a pages view from normal to print. I have set up a css for the print version and I have my normal css. I have a function that calls up the appropriate css depending on print or normal selection.

Unfortuantely, each browser requires different function to work. How do I do an onClick which pulls up the required function depending on the browser in use.

Help appreciated.

The function for ie is:

function printer_friendly()
{
document.styleSheets[0].href = "rules_files/guides_print2.css";
}

function normal_view()
{
document.styleSheets[0].href = "rules_files/global.css";
}

The function for netscape is:

function printer_friendly()
{
document.styleSheets[0].disabled = true;
document.styleSheets[1].disabled = false;
}

function normal_view()
{
document.styleSheets[0].disabled = false;
document.styleSheets[1].disabled = true;
}

Thanks,
Bob

 

[LTeeple]

This is a javascript question, I think you'd get a much quicker response in the javascript forum.


Cheers!
Laura

 

[gohankid77]

True, Two, Troo, Tue, Trou.

Say that ten times fast!

opinion {
inline-styles: are-messy;
internal-stylesheets: waste-space;
external-stylesheets: are-bliss;
}

 

[Vragabond]

You could go for a completely HTML/CSS solution using media attribute in your stylesheets:

<link rel="stylesheet" href="rules_files/global.css" type="text/css" media="all" />
<link rel="stylesheet" href="rules_files/guides_print2.css" type="text/css" media="print" />

In this way, your print stylesheet will overwrite all your normal stylesheet declarations when printing. If you want to completely separate both, use media="screen, projector" for the first one. This way, none of the styles in the first will interfere with printing. This works in all modern browsers.

 

[robert89]

I'll give this a go. However, the site I got the idea of having link toggles provided some very specific meta formatting as follows - identifying the print.css as rel=alternate stylesheet and removing print from media type.

<link rel="stylesheet" href="rules_files/global.css" type="text/css">
<link rel="alternate stylesheet" href="rules_files/guides_print2.css" type="text/css">

Meanwhile, I thank you for taking the time to provide a possible solution and I will give it a try.

Thanks,
Bob