Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    mypointofview
    Guest

    How to use external CSS for Print + a platform select javascript

    I'm trying to set up a special CSS dedicated for printout. I read about the link code but it somehow does not work for me (I think it collides with my platform select javascript):

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


    I use a javascript that detects different OS platforms so it's inside this script where the CSS file gets linked to the page:

    // SELECT CSS FOR DIFFERENT OS PLATFORMS

    if ((navigator.appVersion.indexOf("Mac") != -1)) {
    document.write("<LINK REL=stylesheet HREF=\"http://www.martinmuntenbruch.com/css/stylemac.css\" TYPE=\"text/css\">"); }

    else {
    document.write("<LINK REL=stylesheet HREF=\"http://www.martinmuntenbruch.com/css/stylewin.css\" TYPE=\"text/css\">"); }



    In the top of my html pages I put a link to that javascript described above (I want to keep my javascripts and css all externally):

    <script type="text/javascript" src="http://www.martinmuntenbruch.com/js/systemselect.js"></script>


    My question is: how do I implement css for print in my case? I'd like to use one dedicaded special and external css file for this task (styleprint.css).

    Any help is highly appreciated because my site is all white font on dark background...
    My page under construction is here: http://www.martinmuntenbruch.com/newstyle.html

    Thanks alot,

    Martin

    -- edited on Jul 18th (changed "browserselect" to "platformselect" which is more correct)
    Last edited by mypointofview; 07-19-2005 at 02:01 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm, if you are just serving up a different CSS file for IE Mac then you should be able to do something like this using the commented backslash hack that coincidently hides css styles from IE Mac
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <link rel="stylesheet" href="mac-screen.css" type="text/css" media="screen">
    <link rel="stylesheet" href="mac-print.css" type="text/css" media="print">
    <style type="text/css" media="screen">
    /* Hide from IE Mac \*/
    @import url(not-mac-screen.css);
    /* End */
    </style>
    <style type="text/css" media="print">
    /* Hide from IE Mac \*/
    @import url(not-mac-print.css);
    /* End */
    </style>
    </head>
    
    <body>
    Your code here
    </body>
    </html>
    With your not-mac-screen.css having the styles that you want to be used, same with the not-mac-print.css, you could even use server languages to detect an OS, and print the correct CSS file to page so it would be hard coded in rather than done in javascript where its not really in the code, its just there according to the browser. Doing with server side will make the page have the right CSS linked to it before it even gets to the client. Its also a plus because even if the user has JS disabled it will still work. Look here for a PHP Browser and OS Detection Script.
    Last edited by _Aerospace_Eng_; 07-14-2005 at 05:23 AM.

  • #3
    mypointofview
    Guest
    Aerospace, your code does distinguish between IE and the rest. (I'm on a Mac and can't verify this for Windows). It works on OS9 and OSX. All other browsers than IE (here on my Macintosh) display the other style.

    Unfortunately this is not what I need. I need to distinguish between platforms, and not between browsers. The reason is that Windows systems display html a bit larger than Macintosh. The script I am using works (limited tested but seems to do the job).

    Where I need help is this: how do I connect the print.css file?

    Also Aerospace, I aggree that a non-JavaScript way of distinguishing between two PLATFORMS is better (some people might have JavaScript turned off) - but how do I do this without knowledge of PHP?

    So, can somebody tell me where/how to implement a print.css in my case?

    Thank you,

    Martin

  • #4
    mypointofview
    Guest

    Found the solution

    Aero, I found it, thanks for pointing me to the right direction

    Here's a test link if somebody would'nt mind commenting on it (I'm just on a Mac and can't verify how the majority of users will see this page):

    http://www.martinmuntenbruch.com/sys...intselect.html

    Here's the code which I found that works and which is used for above test page.


    In the head of the page i put:

    <script type="text/javascript" src="http://www.martinmuntenbruch.com/js/systemselect_2.js"></script>


    In the .js file I put:

    // SELECT CSS - DEPENDING ON DIFFERENT BROWSERS OR PRINT
    // Attention: don't change returns or spacing in this code

    if ((navigator.appVersion.indexOf("Mac") != -1)) {
    document.write("<LINK REL=stylesheet HREF=\"http://www.martinmuntenbruch.com/css/stylemac_2.css\" TYPE=\"text/css\" media=\"screen\"><LINK REL=stylesheet HREF=\"http://www.martinmuntenbruch.com/css/styleprint_2.css\" TYPE=\"text/css\" media=\"print\">"); }

    else {
    document.write("<LINK REL=stylesheet HREF=\"http://www.martinmuntenbruch.com/css/stylewin_2.css\" TYPE=\"text/css\" media=\"screen\"><LINK REL=stylesheet HREF=\"http://www.martinmuntenbruch.com/css/styleprint_2.css\" TYPE=\"text/css\" media=\"print\">"); }


    The CSS files I don't have to explain, that would be a different thread.


    Thanks for any feedback if my efforts are working.

    - Windows users should see a pink backdrop, Macintosh gray
    - On screen it should be Monaco font on gray, when printing Times on white.

    Correct?


    Thanks, Martin.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    If the script works as it should and the styles are setup that way, and the user doesn't have javascript disabled then yeah it should work that way. Yep I get a pink background with grayish text.

  • #6
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Pink is a very obnoxious color

  • #7
    mypointofview
    Guest

    pink

    I know, pink is a bit kinky -- it's just to test more easily (to better distinguish) Thanks for your tests - here on my Mac it shows gray, so the platform select script seems to work. I believe when you'd try to print it shows Times on White?

    The final site layout will be with that gray because I use popup windows to display my pictures. Gray offers an unobtrusive background for that.

    Martin
    Last edited by mypointofview; 07-17-2005 at 02:01 AM.

  • #8
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mypointofview
    I know, pink is a bit kinky -- it's just to test more easily (to better distinguish) Thanks for your tests - here on my Mac it shows gray, so the platform select script seems to work. I believe when you'd try to print it shows Times on White?

    The final site layout will be with that gray because I use popup windows to display my pictures. Gray offers an unobtrusive background for that.

    Martin

    It prints black times on white.

  • #9
    mypointofview
    Guest

    IE is special with TD or TR tags when it comes to print.css

    Thanks everyone. But just for info, I stumbled across a mean InternetExplorer thingy.. IE can interpret the TD or TR tags for special screen CSS and display the text on screen as told, but when using TD tag definition in the print.css file, nothing happens. In above example file (printing in Times but shown in Monaco on screen) the text was encapsulated and defined with a DIV tag but on my final page I wanted to use the TD tags instead (less code).

    All other browsers printed stuff inside TD tags with Times according to my print.css file when I said that anything in the TD tags should be printed in Times. Only Internet Explorer wanted special treatment!

    Strange, because IE did very well interpret the A tags (all links printed in Times), so I was puzzled...

    I had no choice but to redo my page and encapsule all text with a DIV tag which I then also used to define the print. Only then ALL worked.

    Martin


  •  

    Posting Permissions

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