[thelist] Javascript style switching help
Dan Smith
D.B.Smith at soton.ac.uk
Tue Jan 4 07:43:54 CST 2005
Hi Tony,
I'm a little confused as to why you would want to replicate the
functionality of the browser. Why don't you just create a separate
style sheet for print and define it using the media attribute of the
<link> element?
If you really want to change styles using JS, the easiest way I've found
is to have a different css file for each different look (say, 'red' and
'green' - although they shouldn't be named by colour) and use JS to
write out the <link> elements in the head of the document based upon the
value (or absence) of a style value in a cookie.
I've found this method to work across most browsers and operating
systems. You can see an example of it at
http://www.soton.ac.uk/Accessibility/#change. If this is the sort of
functionality you're looking for I can explain it in more detail.
Cheers,
Dan
> I've written a script that should switch a style sheet, but
> it only works in Safari. IE and Netscape aren't switching.
> Can anyone help? Here's the relevant code:
>
> function activatePrintCSS() {
> var i, a;
> for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
> if(a.getAttribute("rel") == "print css" &&
> a.getAttribute("title") == "print") {
> a.disabled = false;
>
> document.getElementById("print-toggle").style.display = "none";
>
> document.getElementById("print-toggle-return").style.display
> = "inline";
> showAllDescriptions();
> showHideDescriptionToggle("hide");
> }
> }
> }
>
> In IE and Netscape everything is being properly executed except this
> expression:
>
> a.disabled = false;
>
> Here is the test site if you want to see the whole thing:
>
http://www.tonygrimes.com/rets/
When you click on ³Print Friendly Version², it should switch stylesheets
to provide a preview for the user before they print the page.
More information about the thelist
mailing list