Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 13

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

  1. #1
    Join Date
    Apr 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Printing content in a div tag without opening a new window

    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

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    var printWin = window.open("","printSpecial");
    printWin.document.open();
    printWin.document.write(html);
    That's opening your window.
    - Mike

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,672
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks!

    Thank you John you are the best!

  5. #5
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,672
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by BirdOPrey5 View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,672
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,672
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    BirdOPrey5 (10-14-2010)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •