SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist comfixit's Avatar
    Join Date
    Dec 2004
    Location
    Pasadena
    Posts
    537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically overriding all styles on the page

    I want to turn all text on a page black when the user clicks a print icon. (Along with that I also remove some DIV's so only the information someone would want to print is visible)

    If I add * {color:#000000} to my CSS it does exactly what I want. Now I need to figure out how to apply this rule dynamicly to my document object or perhaps the body when a function is run.

    Thanks in advance for the assitance.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,445
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    changing text color

    As long as there are no inline styles, you could add the CSS rule using the DOM
    Maybe like
    Code:
    rules = stylesheet.cssRules;
    stylesheet.insertRule("* { color: #000000 }", rules.length);

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Step one would be to set up a separate media="print" stylesheet for the page. You can use that to define how the page is supposed to look when the page is printed. make sure that the reference to it follows the stylesheet that defines all of the styles that you want common to all media so that you only need to include those entries in it where you actually want to change something when the page prints compared gto how it looks on a screen, projection, handleld, and other media types.

    If you do it that way then there is no need to dynamically change anything through your print button.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Evangelist comfixit's Avatar
    Join Date
    Dec 2004
    Location
    Pasadena
    Posts
    537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all of the replies.

    I ended up going with this solution:
    Code:
    document.styleSheets[0].addRule("*", " color: #000000 ! important;")
    This is certainly not the most compliant way to accomplish my goal and it only works in IE as far as I know (but where I work only supports IE so that works). Just wanted to share the eventual hack I used. Hopefully in the future I can adopt a method that is less brutish and implements CSS properly.

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,445
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    print style

    Personally, I use a "print.css" file as felgall suggested. If you click "print preview" you see what the page(s) will look like. But if you want the screen to emulate the look of the printed page without having the user click on preview, then it is a bit "brutish" this way I guess.
    The way you have it now - styleSheets[0] - inserts the new rule at the beginning of the CSS. Any color rules that follow will over-ride the inserted style. I imagine that "it only works in IE" has something to do with how browsers support ! important. Using rules.length will insert the new rule at the end of the CSS. Although, here again, without ! important any inline styles will over-ride the new rule. You may be able to have a way to open the page using the media=print CSS file instead of the media=screen file using javascript or REQUEST vars. That way you could style out unwanted elements (divs, imgs, etc ?) and have the text color be black without using a lot of code to style the DOM.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •