Solved

How to swap CSS files at runtime?

Posted on 2004-08-02
8
544 Views
Last Modified: 2008-03-03
I am trying to set up a web page so that when the user clicks the browser's PRINT button, the page prints just as displayed (or close to it, etc).

I am also setting up a separate rollover button called 'print this page' that will only print the text of the page, hiding all other elements.

I have created a stylesheet_print.css that adequately hides the elements I wish to hide during 'print this page' processing, but I only wish that stylesheet to be employed when the user clicks the 'print this page' link that I have set up. If the user clicks the browser's own print button, I want everything on the entire page to print.

So the question is: How can I set up my page so that the stylesheet_print.css ONLY gets used when the user clicks the rollover I set up, and NOT when the user clicks the browser's own print button?

You can see an example of my page at: http://www.minisage.com/caseygrants/pages/wwa/wwa_index.asp

NOTE: I currently have it set up so that the stylesheet_print.css is invoked any time printing occurs. I need to know how to set it up so that the stylesheet_print.css is ONLY invoked when the user clicks the 'print this page' rollover.

Thanks!
0
Comment
Question by:rascal
  • 2
  • 2
  • 2
  • +2
8 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 34 total points
ID: 11699124
Set up two stylesheets, one alternate and one preferred, the preferred one being the one that prints the images also.

<link rel="stylesheet"  href="default.css" title="Default">
<link rel="alternate stylesheet" href="onlyText.css" title="Text">

Then, have this function in your <head> section: (adapted from http://www.alistapart.com/articles/alternate/)

function setActiveStyleSheet(title) {
   var i, a;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

When the user clicks the Print button, I would do a setTimeout of a second or so before it prints just in case. Call setActiveStyleSheet("Text"); to switch. After print is done, call setActiveStyleSheet("Default");

Regards,
${Zyloch}
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 33 total points
ID: 11699130
I've never actually tried this but it might work and if it does is really easy

Do the link tag this way:

<link href="../../css/stylesheet_print.css" rel="stylesheet" type="text/css" media="projection" />


Then for the mouseover try changing the media type with

onmouseover="document.styleSheets[2].media='print'"

That is really neat if it works.  If not let me know and I will give you the hard way by hiding the style in a layer and dynamically populating it on mouseover... a lot more work.

BTW the index on the stylesheet is because stylesheets are an array and they are put into the array in listing order, so if you change the order it changes the index, but I think we can use and id to name it and index on the id.

Cd&
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11699175
If Cd's works, don't have your text formatting styles in stylesheet_print.css. Have your text formatting styles in another external stylesheet (or internal), so you'd have:

<link href="../../css/stylesheet_print.css" rel="stylesheet" type="text/css" media="projection" />
<link href="../../css/stylesheet_text.css" rel="stylesheet" type="text/css" media="projection" />

(I hope this doesn't mess up stylesheet indexing. I still have to read up on that)
0
 
LVL 15

Expert Comment

by:Thogek
ID: 11707531
Here's another interesting thought/demo:

    <body>

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

    This is only a test.
    A very boring test, at that.

    <a href="#" onclick="document.getElementById('cssFile').href='../../css/stylesheet2.css';">Change</a>

    </body>
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 15

Assisted Solution

by:Thogek
Thogek earned 33 total points
ID: 11707542
Oops.  Change my
    <link href="../../css/stylesheet.css" rel="stylesheet" type="text/css" media="screen"/>
to
    <link id="cssFile" href="../../css/stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
0
 
LVL 1

Author Comment

by:rascal
ID: 11707576
Thank you all for great responses! I will be trying each of them and go with what makes the best sense given our screens and users, but you've provided a great deal of information, knowledge and food for thought!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11707693
Glad we could help.  Thanks for the A. :^)

Cd&
0
 
LVL 1

Expert Comment

by:Ryratt
ID: 15083117
I combined a couple answers here to consense it. I checked it in Netscape and IE and it worked. You can put it in an event or a function, or whereever.


styleSheetFilename = 'file.css';

styleSheetVar = document.getElementsByTagName("link");
styleSheetVar.href = styleSheetFilename;
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now