Welcome to WebmasterWorld Guest from 54.145.235.72

Forum Moderators: not2easy

help for CSS not affect the normal page

   
12:54 am on May 17, 2013 (gmt 0)



Hi gurus,

I have CSS that would print the content of the modal:

@media screen {
#printSection {
display: none;
}
}

@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
right:0;
top:0;
}
}



My HTML is like this:

<div id="printable">
<div class="modal-header">
<h1>Printable</h1>
</div>

<div class="modal-body">
print content here
</div>
</div>



And my javascript is this:

document.getElementById("btnPrint").onclick = function () {
printElement(document.getElementById("printable"));
}




function printElement(elem) {
var domClone = elem.cloneNode(true);

var $printSection = document.getElementById("printSection");

if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}

$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}




ISSUE: This will work only on the modal but when I print it a non-modal pages it will display blank. If I removed the:

body * {
visibility:hidden;
}


That will affect also the modal.

What would I add to my CSS so it would work both?


Thanks
3:23 am on May 17, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



First thing that jumps out at me is the two forms

display: none
visibility: hidden

They work in different ways and do different things-- and, most important, they have no effect on each other.

Coincidentally I was looking up these properties just a few days ago. Crucial detail under "display: none" (emphasis theirs):
Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.


"visibility" otoh can be toggled off and on.

An easy copout solution is to distribute the entire document among two classes of div, like "printstyle" and "screenstyle", with mirror-imaged @media rules. (I've personally done this, though admittedly not for an entire document.)

when I print it a non-modal pages


Now, if I could figure out whether you mean "model" or "modal", and what it refers to...
3:46 am on May 17, 2013 (gmt 0)



I was referring to Bootsrap modal.

[twitter.github.io ]
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month