homepage Welcome to WebmasterWorld Guest from 54.226.21.57
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
help for CSS not affect the normal page
neo_phyte



 
Msg#: 4574849 posted 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

 

lucy24

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



 
Msg#: 4574849 posted 3:23 am on May 17, 2013 (gmt 0)

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...

neo_phyte



 
Msg#: 4574849 posted 3:46 am on May 17, 2013 (gmt 0)

I was referring to Bootsrap modal.

[twitter.github.io ]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved