PDA

View Full Version : Printing content in a div tag without opening a new window



Pooja_d
04-27-2007, 04:06 AM
I want to print the content in the a div tag. I have tried that somewhre i read of copying the content in the divtag to a window object. And print that new window. But in that it is opening a new window. But i dont want a new window to be opened.

The code i refered is as follows

function printSpecial()
{
if (document.getElementById != null)
{
var html = '<HTML>\n<HEAD>\n';

if (document.getElementsByTagName != null)
{
var headTags = document.getElementsByTagName("head");
if (headTags.length > 0)
html += headTags[0].innerHTML;
}

html += '\n</HEAD>\n\n';

var printReadyElem = document.getElementById("printReady");

if (printReadyElem != null)
{
html += printReadyElem.innerHTML;
}
else
{
alert("Could not find the printReady function");
return;
}

html += '\n</BODY>\n</HTML>';

var printWin = window.open("","printSpecial");
printWin.document.open();
printWin.document.write(html);

if (gAutoPrint)
{
printWin.print();

}


}
else
{
alert("The print ready feature is only available if you are using an browser. Please update your browswer.");
}
}

Can any one suggest a better way

Pooja

mburt
04-27-2007, 10:18 AM
var printWin = window.open("","printSpecial");
printWin.document.open();
printWin.document.write(html);
That's opening your window.

jscheuer1
04-27-2007, 01:12 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@media print {
body * {
display:none;
}
#print_div {
display:block;
}
}
</style>
</head>
<body>
<div>Won't be printed</div>
<div id="print_div">This gets Printed</div>
<div>Not printed</div>
</body>
</html>

kervin152
07-06-2010, 06:31 AM
Thank you John you are the best!

BirdOPrey5
10-12-2010, 09:19 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@media print {
body * {
display:none;
}
#print_div {
display:block;
}
}
</style>
</head>
<body>
<div>Won't be printed</div>
<div id="print_div">This gets Printed</div>
<div>Not printed</div>
</body>
</html>

Is there any reason this shouldn't work? I am following this code but when I print preview I just see a blank page. I know the div name of the "print_div" is exactly correct but it just doesn't show. :(

jscheuer1
10-13-2010, 06:37 PM
Is there any reason this shouldn't work? I am following this code but when I print preview I just see a blank page. I know the div name of the "print_div" is exactly correct but it just doesn't show. :(

That exact code in IE 8 or Firefox 3 (probably all modern browsers)? No - no reason unless css is disabled in the browser - if the print_div div isn't a direct child of the body element, nothing will be printed. If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

BirdOPrey5
10-13-2010, 08:40 PM
Thanks...
I am trying to make it so when I print a single post of my vbulletin forum (a lot like this forum) it only prints the actual message not anything else.

Link: http://www.juot.net/forums/showpost.php?p=886182&postcount=1

I added this code to the top of my "showpost" page (right under <title>...</title>):


<style type="text/css">
@media print {
#post_message_886182{
display:block;
}
body * {
display:none;
}
}
</style>

I've tried having the * body {} element above and below, no difference.

Later on in the page there is an existing <div> tag:


<div id="post_message_886182">

This is a test post. Only this message should print when viewing a single post. Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.
</div>


I'm not sure what is meant by being a "direct child" of the body element?

jscheuer1
10-14-2010, 02:05 AM
I never said that this was a one size fits all solution. It would help to understand that css means cascading style sheet. That means that whatever you set ripples down in many cases from a parent element to all of its children. If one child is display none, all of its children will be as well.

A direct child is like:


<body>
<div>won't print</div>
<div id="print_div">This will print</div>
</body>

Both div's are direct children of the body, and using our print styles, the print_div will get printed. But here:


<body>
<div><div id="print_div">won't print</div></div>
</body>

only the highlighted one is a direct child of the body. Our print styles will render it and all of its children (in this case our print_div) display: none. So our print_div will not get printed.

On your page you have many nested levels of elements and some are tables. Tables and their intrinsic descendant elements (like th, td, tr, tbody) cannot be made display: block; and be expected to render correctly in all browsers. So in addition to taking nesting into account, a different property (properties in this case - visibility and position) other than display would be easier to work with as they both default to the same thing (respectively - visible and static) regardless of the element they apply to and can be used together to render an element unseen and out of the flow of a page. Additionally there are other styles (border, background, color) involved here on elements that cannot be made to disappear without losing the content that you want, yet those styles must still be dealt with if you want a clean printed page.

Anyways, these print styles appear to work well with the example page:


<style type="text/css">
@media print {
body * {
visibility: hidden;
position: absolute;
}
* {
background: white!important;
color: black;
border-width: 0!important;
}
#post_message_886182, #td_post_886182, #post886182, #post886182 tr, #post886182 tbody, form {
visibility: visible;
position: static;
width: 100%;
}
}
</style>

Notice the repeated use of the post number (886182). I assume this can be supplied via PHP. If not, this would be a difficult, perhaps impossible solution to implement.

Also notice the !important keyword. This is required to override inline styles on elements where/if present.

BirdOPrey5
10-14-2010, 05:50 PM
Many thanks for this, yes the post number was easily available by php and it worked.

I will study this to figure out what is going on, I figured it was the nested <div> giving the problem.

Thanks again.

jscheuer1
10-14-2010, 06:48 PM
It may help to know that you can use the browser's 'view source' to see what the markup looks like. And that in the selector here:


#post_message_886182, #td_post_886182, #post886182, #post886182 tr, #post886182 tbody, form

the order isn't important.

#post_message_886182 refers to the post itself (<div id="post_message_886182">).

#td_post_886182 to its immediate parent, a td.

#post886182 is the id of the containing table.

There's no id for the tr or the tbody. The tbody is interesting because it's not in the markup. But it's an implied element in all tables so must be dealt with, at least for some browsers. These two are covered by the descendant (descendant from the table's id) selectors:


#post886182 tr

and:


#post886182 tbody

respectively.

Finally, all of this is inside a form. The form has no id and no other selector that can easily be applied to it cross browser other than its tag name. So we use that. Other stuff in the form won't be a problem though, because it doesn't fit the criteria of the other selectors, so will still not be seen. If there were another form (there isn't), that should be OK as well, for the same reason.

jamezrsanchez
10-21-2010, 04:51 AM
I have this code within the page body:

and I want to print the content inside the recapTable table how do i approach this?

Thank you


<!--Body/Content-->
<div id="outerWrapper">
<div id="header">
<div id="title"><img src="http://marchingstats.com/images/marchingstatslogo2.png"> </div>
</div>
<div id="navcontainer">
<div id="nav">
<ul>
<li><a href="http://www.marchingstats.com">Home</a></li>
<li><a href="http://www.marchingstats.com/scores.html">Features</a></li>
<li><a href="http://www.marchingstats.com/stats.html">Circuits</a></li>
<li><a href="http://www.marchingstats.com/blog/">Blog</a></li>
</ul>
</div>
</div> <div id="twoColumnright">
<!-- Required to work but nothing in here shows up, so just omit it, but keep this code here -->


<div id="adminmenu">
<div id="mainmenu">
<ul class="slidedoormenu"><li><a href="edit_profile.php">Update Information</a></li><li><a href="recap2.php">Recap</a></li><li><a href="scoreInput.php">Enter Scores</a></li><li><a href="logout.php">Logout</a></li></ul> <div style="margin-top: 15px;">&nbsp;</div>
<p align="center"><img src="ads/evans.png" alt="evans" width="125" height="162"></p>
<p align="center"><img src="ads/FJM-Cesario-banner.gif" alt="fjm" width="127" height="105"></p>
<p align="center"><img src="ads/sabian.png" alt="sabian" width="125" height="120"></p>
</div>

</div>
<div id="contenthub"><!-- Content For Page Goes Here -->
<div style="float: left; width: 100%; margin-bottom: 15px;">

<div style="display: block; float: left;">
<img src="images/wgilogo.png" alt="WGI logo">
</div>
<div style="float: right; text-align: right; margin-right: 20px;">
<b>Welcome back Rich- <a href="logout.php" style="text-decoration: none;">Logout</a></b>
</div>
</div>
<div id="form">


<select name="comp_id" id="comp_id">
<option value="0">Select competition</option><option value="25">Central Crossing Percussion (March 7, 2009)</option><option value="45">Firestone Percussion (September 13, 2010)</option><option value="67">JMS Test Event (September 27, 2010)</option> </select>

<div id="buttonContainer">

<div id="buttontext"><table id="recapTable" border="0" cellpadding="0" cellspacing="0"> <tbody><tr>
<td colspan="4" align="center">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="3" align="center"><strong>General Effect</strong></td>
</tr>
<tr>
<td style="color: rgb(153, 0, 0);" width="70%" align="left"><strong>Percussion Scholastic Regional A</strong></td>
<td class="score" valign="top" width="10%" align="center">Music</td>
<td class="score" valign="top" width="10%" align="center">Overall</td>
<td class="score" valign="top" width="10%" align="center"><strong>Total</strong></td>
</tr>
<tr>
<td class="score">Edgewood High School</td>
<td class="score" align="center">71.00<span class="ordinal">1</span></td>
<td class="score" align="center">72.00<span class="ordinal">1</span></td>
<td class="score-total" align="center">143.00<span class="ordinal">1</span></td>
</tr>
<tr>
<td colspan="4" align="center">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="3" align="center"><strong>General Effect</strong></td>
</tr>
<tr>
<td style="color: rgb(153, 0, 0);" width="70%" align="left"><strong>Percussion Scholastic A</strong></td>
<td class="score" valign="top" width="10%" align="center">Music</td>
<td class="score" valign="top" width="10%" align="center">Overall</td>
<td class="score" valign="top" width="10%" align="center"><strong>Total</strong></td>
</tr>
<tr>
<td class="score">Amherst Indoor Drumline</td>
<td class="score" align="center">90.00<span class="ordinal">1</span></td>
<td class="score" align="center">80.00<span class="ordinal">2</span></td>
<td class="score-total" align="center">170.00<span class="ordinal">1</span></td>
</tr>
<tr>
<td class="score">New Philadelphia Indoor</td>
<td class="score" align="center">83.00<span class="ordinal">2</span></td>
<td class="score" align="center">86.00<span class="ordinal">1</span></td>
<td class="score-total" align="center">169.00<span class="ordinal">2</span></td>
</tr>
<tr>
<td class="score">Ellet Drum Line</td>
<td class="score" align="center">73.00<span class="ordinal">3</span></td>
<td class="score" align="center">75.00<span class="ordinal">3</span></td>
<td class="score-total" align="center">148.00<span class="ordinal">3</span></td>
</tr>
<tr>
<td colspan="4" align="center">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="3" align="center"><strong>Artistry</strong></td>
</tr>
<tr>
<td style="color: rgb(153, 0, 0);" width="70%" align="left"><strong>Percussion Scholastic Concert A</strong></td>
<td class="score" valign="top" width="10%" align="center">Program</td>
<td class="score" valign="top" width="10%" align="center">Fulfillment</td>
<td class="score" valign="top" width="10%" align="center"><strong>Total</strong></td>
</tr>
<tr>
<td class="score">St Edward Indoor Percussion</td>
<td class="score" align="center">72.00<span class="ordinal">1</span></td>
<td class="score" align="center">73.00<span class="ordinal">1</span></td>
<td class="score-total" align="center">145.00<span class="ordinal">1</span></td>
</tr>
<tr>
<td colspan="4" align="center">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="3" align="center"><strong>Artistry</strong></td>
</tr>
<tr>
<td style="color: rgb(153, 0, 0);" width="70%" align="left"><strong>Percussion Scholastic Concert Open</strong></td>
<td class="score" valign="top" width="10%" align="center">Program</td>
<td class="score" valign="top" width="10%" align="center">Fulfillment</td>
<td class="score" valign="top" width="10%" align="center"><strong>Total</strong></td>
</tr>
<tr>
<td class="score">Brecksville-Broadview Heights Percussion</td>
<td class="score" align="center">87.00<span class="ordinal">1</span></td>
<td class="score" align="center">87.00<span class="ordinal">1</span></td>
<td class="score-total" align="center">174.00<span class="ordinal">1</span></td>
</tr>
</tbody></table></div>

</div>

</div>

<div id="resultsContainer"></div>

<!--End Conent-->
</div>
<div class="clear"></div>
</div>
<!--Footer-->
<div id="footer">

<div id="newsletter">
<div id="newsletter-form">
<div style="width: 188px;"><b>Marchingstats Newsletter</b><br><br>Stay up to date with our latest features and news.</div>

<form name="form1" id="form1" method="post" action="">
<input name="first_name" value="" maxlength="100" class="email_input" type="text"><input src="images/submit.png" value="Submit" class="email_submit" type="image">
</form>
</div>
</div>

<div id="footer-menu">
<div style="display: block; float: left; clear: both;">
<img src="images/statslogo.gif" style="clear: right; float: left;" width="150" height="38">
</div>
<div class="copyright_info">
<p style="clear: left; display: block;">2010 by marchingstats.com. All rights reserved.<br><a href="/home/about" title="About">About</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/home/terms_of_service" title="Terms of Use">Terms of Use</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/home/privacy_policy" title="Privacy Policy">Privacy Policy</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://blog.ministrycentered.com/" target="_blank" title="Blog">Admin</a></p>
<!--
<ul class="social_networks">
<li><img src="/images/followus.png"></li>
<li><a href="http://www.facebook.com" class="icon_facebook" target="_blank">Facebook</a></li>
</ul>
-->
</div>
</div>

</div>
</div>

asachanfbd
07-15-2011, 12:10 PM
Is that possible to print a document on the server to the client side???

i have many print button on one page and each of them needed to print different content. how can i do this..

djr33
07-15-2011, 01:51 PM
Start a new discussion for a new question. I'm closing this.

Short answer: no. You must transfer content to the client side for the client to use it. But you can transfer it, but it will be indirect.

The only exception would be if the server is directly networked to the client's printer, but that would only help if this is a question about an intranet in an office, not something on the WWW.