CODEWITHSUNDEEP
css
FosAvance
FosAvance

Reputation: 2469

CSS Print hide all elements but one

I've been searching online for the solution. I want one thing. when using @media print{...} I want to hide all elements inside body but one. How to do that? I have class="print" which I don't want to hide, how to hide all that don't have that class?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@media print {
:not(.print) {
    display: none
}
}
</style>
</head>

<body>
<div class="print">
  <p>neki lijepi tekst</p>
  <p> test</p>
</div>
<div id="test"> ovo se ne vidi naa printu </div>
<div id="tesft"> ovo se nedsfdf vidi naa printu </div>
</body>
</html>

Upvotes: 3

Views: 5140

Answers (2)

DA.
DA.

Reputation: 40671

It depends on your DOM structure.

You'll want to hide every top level node (and therefore, their children) with CSS (display: none) except for the item you want to print and every parent element of said item (ie, you don't want to hide the top-level node that contains the item you want to print).

You could set this up (relatively) easily with some javascript--jQuery would help.

  • give the item(s) you want to print a class such as 'printThis'
  • assign every top level child of BODY a class that is set to display: none such as 'doNotPrint'
  • find the item you want to print (via the class 'printThis')
  • traverse your way up the DOM to each parent removing the class you applied to hide everything (and, possibly, applying the hide class to all siblings in the process)

Not tested, but run something like this on page load to set up your classes:

// to start, hide all top level nodes
$('body').children().addClass('doNotPrint')

// now we call this function passing in the 
// item to print
function showItem($node) {
    // remove the 'hide' class. This is moot
    // until we loop to the top level node, at
    // which point this takes affect
    $node.removeClass('doNotPrint');
    // we don't want to print the siblings
    // so we will hide those
    $node.siblings().addClass('doNotPrint')
    // now we check to see if this item has a parent
    // and, if so...
    if($node.parent().length){
        // ...we want to show the parent, hide its 
        // siblings, and then continue this process
        // back to the top of the node tree
        showItem($node.parent());
    } 
}

showItem($('.printThis'));

Then your Print CSS would have:

.doNotPrint {display: none;}

Upvotes: 3

Musa
Musa

Reputation: 97672

Hide every child element of the body without a print class

body > * { display: none }
.print { display: block }

once there are no text nodes directly in the bodytis should work.

Upvotes: 8

Related Questions