SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Location
    Canada
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript + CSS Switcher for Printer friendly webpage

    I am developing a site for a client that requires the printer friendly verison of the site to appear in a separate pop-up window. I am having trouble figuring out the scripting needed to have the current page open in a separate window with a different style sheet applied to it. I am not too well versed in javascript and would greatly appreciate any help.

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The simplest way, without knowing javascript, is to document.write the stylesheets and scripts in the head of every document:

    <head>
    <title>title</title>
    <script type="text/javascript">
    Code:
    if(window.opener){
    	document.write('<link rel="stylesheet" type="text/css" media="all" href="printer.css">');
    }
    else{
    	document.write('<link rel="stylesheet" type="text/css" media="screen" href="display.css">'+
    	'<script type="text/javascript" src="script.js"><\/script>');
    }
    window.onload=document.close();
    </script>
    </head>

  3. #3
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have no idea how to program popup windows, but I think that's a solution your client will be happy with until he gets it. And then he'll ask you to change it. Best practices would be to include a print style sheet. Just add the media attribute to your link and set it to print.

    Code:
    
    <link rel="stylesheet" type="text/css" media="print" title="printStylesheet" href="PrintStylesheet.css" />
    


    Most sites that use printer friendly pages target the parent window instead of a popup. The reason you use a printer friendly page is because you're using special styles and you think the media attribute won't be handled correctly. That is a problem in some of the older browsers, a small problem but a problem nonetheless. "Solving" this problem with popup windows is akin to stopping a small leak by smashing a huge hole. Your client will now run afoul of all the browsers that have javascript turned off and/or popup blockers. A much larger portion of the browser public.
    While most other media are not well supported, print, screen, and all settings work "fairly" well.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Location
    Canada
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Chroniclemaster for your suggestion, that is actually how I have it setup right now and it works perfectly on all the browsers that I've tested on, however they are pretty insistant on having the pop-up window.

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Location
    Canada
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help, I am just a little confused on the script that would execute this behaviour. Right now I have:

    <a href="#" onClick=" window.print(); return false">

    Which of course just opens the print dialouge box.

    Any ideas?


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
  •