Hide all elements except one div for print view

Question

I have the following CSS for my print style:

* {
 display:none;
}

#printableArea {
 display:block;
}

Answer 1

make a div wrap everything after the body tag. Before the wrap div, put the visible item's div.

I had to do this to make a simple username-password page, and needed to hide everything, except the half-opaque sign-in form's background. So, after the correct credentials were typed in, the form would animate out, and the half-opaque page cover would animate out, and finally, EVERYTHING aside would show up and you could use the page normally.

Answer 2

There is a one-line solution:

With JQuery

var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));

Without JQuery

var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });

In both examples, set the selector variable to the selector you want. For example, div#page:hover or p.class1,p.class2

Answer 3

You might try popping it up on top of everything. This solved 90% of my problems, then I just had to make a .noprint class and add it to a few straggling elements.

.print_area{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9999;

    background-color: #ffffff;
}