Is there any solution to disable Javascript style changes in print?

Question

Is there any solution to disable Javascript style changes in print?

For instance, if I'm hiding something through Javascript but I want to include that hidden info in print.

I hid a div using Javascript and I want to show that div if Javascript is disabled. Now the problem is, because div is hidden using Javascript it's also not showing when the page is printed.

Answer 1

Use a print stylesheet, along with !important statements to force the element to be visible for printing.

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

CSS:

#myDiv { display: block!important; } 

Answer 2

I've found a workaround (at least, it works for me). In my instance i had a basic html page with some styling (screen.css & print.css) plus some javascript to progressively enhance the page with extra features, etc.

When it came time to print the page i realised that the js was affecting the layout (since i was doing some css styling via jquery).

What i ended up doing was this:

in "screen.css"

body {
    background-color: #ccc; /* or whatever colour your designer chose; if it NEEDS to be white, simply change something else (e.g. background-image, font-size, etc.) */
}

in "print.css"

body {
    background-color: #fff;
}

in "the-javascript-file.js"

$(document).ready(function()
{
    if (isPrinting() == false)
    {
        init();
    }
});

function isPrinting()
{
    var isPrint = false;
    /* I'm not 100% sure about the string literal check 'rgb(255, 255, 255)',
       should do some testing here with other values || other attributes...
       (font-size, color, line-height, other attributes that will have the 
       greatest difference / variation between "screen" and "print" styles)
    */
    if ($('body').css('background-color') == 'rgb(255, 255, 255)')
    {
        isPrint = true;
    }
    return isPrint;
}

function init()
{
    // All sorts of awesome goes here
}

And that was it! It worked!

Here's an overview of what's happening:

• User loads page
• Browser loads "screen.css"
• Body background colour is set to "#ccc"
• Browser loads "the-javascript-file.js"
• JS checks background colour... it's "#ccc"...
• JS does its thing
• User hits print command
• Browser loads "print.css"
• Body background colour changes to "#fff"
• Browser loads "the-javascript-file.js"
• JS checks body background colour
• JS realises background colour is "#fff"
• JS does nothing :)

Hope this helps someone out there :)