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

Code:

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

Originally Posted by jscheuer1

Code:

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

Originally Posted by BirdOPrey5

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....82&postcount=1

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

HTML Code:

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

HTML Code:

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

Code:

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

Code:

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

Code:

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

Code:

#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:

Code:

#post886182 tr

and:

Code:

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

Thread: Printing content in a div tag without opening a new window

Thread Tools

Search Thread

Printing content in a div tag without opening a new window

Thanks!

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions