www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: how to print selected section using javascript

  1. #1
    Join Date
    Nov 2006
    Posts
    29

    how to print selected section using javascript

    I've made a web page with various sections and now I want to print out only
    selected sections using javascript . So how do you do it?

  2. #2
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Using Javascript?

    See this example

    http://www.huntingground.freeserve.c...s/printing.htm

    May help

  3. #3
    Join Date
    Nov 2006
    Posts
    29

    printing a selection of a webpage

    I need to know how to print a selection of a web page using javascript.
    I've got some code ,but if I've got many <div>...</div> sections in my page.
    How do you select the ones you want to print?
    code:
    eg
    <html>
    <head> title</head>
    <body>
    </div>
    This is a paragraph.
    </div>
    </div>
    <p>This is a paragraph.</p>
    </div>
    <p>This is a paragraph.</p>

    <p>Paragraph elements are defined by the p tag.</p>

    </body>
    </html>
    ..........................................
    Now the code for the print script
    javascript :<script type="text/javascript">
    <!--
    function printContent(id){
    str=document.getElementById(id).innerHTML
    newwin=window.open('','printwin','left=100,top=100,width=400,height=400')
    newwin.document.write('<HTML>\n<HEAD>\n')
    newwin.document.write('<TITLE>Print Page</TITLE>\n')
    newwin.document.write('<script>\n')
    newwin.document.write('function chkstate(){\n')
    newwin.document.write('if(document.readyState=="complete"){\n')
    newwin.document.write('window.close()\n')
    newwin.document.write('}\n')
    newwin.document.write('else{\n')
    newwin.document.write('setTimeout("chkstate()",2000)\n')
    newwin.document.write('}\n')
    newwin.document.write('}\n')
    newwin.document.write('function print_win(){\n')
    newwin.document.write('window.print();\n')
    newwin.document.write('chkstate();\n')
    newwin.document.write('}\n')
    newwin.document.write('<\/script>\n')
    newwin.document.write('</HEAD>\n')
    newwin.document.write('<BODY onload="print_win()">\n')
    newwin.document.write(str)
    newwin.document.write('</BODY>\n')
    newwin.document.write('</HTML>\n')
    newwin.document.close()
    }
    //-->
    </script>

  4. #4
    Join Date
    Apr 2006
    Posts
    120
    Pass in the id for the div you want to print.

    <div id="firstDiv"></div>

    Then call printContent("firstDiv").

  5. #5
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    It tells you how in the page where you got the code

  6. #6
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    The easiest way to set up a print script using Javascript is:

    1. Set up a separate media="Print" stylesheet.
    2. Assign an id to each of the sections that yo want to be able to print individually.
    3. In the print stylesheet set up all of ids with display:none.
    4. In the print Javascript you change the id that you want to print to display:block, call window.print() and then change the id back to display:none

  7. #7
    Join Date
    Nov 2006
    Posts
    29

    printing using javascript

    How do you remove the content from the body of page ,so that I can print the rest of the page?

  8. #8
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Code:
    <style>
    @media print {
    .noprint {display:none;}
    }
    </style>
    and then use Javascript to assign a className of "noprint" to those elements of the page you don't want to print.

  9. #9
    Join Date
    Apr 2006
    Posts
    120
    <style>
    @media print {
    display:none; }
    </style>

    <div

  10. #10
    Join Date
    Apr 2006
    Posts
    120
    <style>
    @media print {
    .noprint {display:none; }
    }
    </style>

    <div class="noprint">Body of the page</div>

  11. #11
    Join Date
    Nov 2006
    Posts
    29
    I want to do this Q:When the print style sheet is applied, provide a means for the user to switch back to the normal style sheet and re-display the hidden content. I can choose how this is triggered but it should not result in any extra items on the page, the user could double-click on your name for example.

    Here's the code for printing selected sections..

    <script language="JavaScript">
    var gAutoPrint = true; // Flag for whether or not to automatically call the print function

    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</HE' + 'AD>\n<BODY>\n';

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

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

    html += '\n</BO' + 'DY>\n</HT' + 'ML>';

    var printWin = window.open("","printSpecial");
    printWin.document.open();
    printWin.document.write(html);
    printWin.document.close();
    if (gAutoPrint)
    printWin.print();
    }
    else
    {
    alert("Sorry, the print ready feature is only available in modern browsers.");
    }
    }

    </script>


    html code......................................

    <html>

    <div id="printReady">
    <p>I want this area to be printed</p>
    </div>
    <p>this is the main area of the page
    this is the main area of the page</p>

    <a href="javascript:void(printSpecial())">Print this Page</a>
    </html>

  12. #12
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Why are you creating a second copy of the page when simply changing the class associated with the different elements of the page is so much easier? Just assign a class of "noprint" to the parts of the page you don't currently want printed and remove the class again if you want it to be printable next time.

  13. #13
    Join Date
    Feb 2005
    Posts
    1,018
    I think everyone is going about this the wrong way. No need for javascript at all.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css" media="screen">
    html, body {
    margin:0;
    padding:0;
    }
    div {
    border:1px solid #000;
    margin:10px;
    padding:3px;
    }
    </style>
    <style type="text/css" media="print">
    html, body {
    margin:0;
    padding:0;
    }
    div {
    border:0;
    margin:10px 0;
    padding:0;
    }
    .noprint {
    display:none;
    }
    </style>
    </head>
    
    <body>
    <div class="noprint">This is content that will not print if the user tries to print this page</div>
    <div>This will print because it does not have the class="noprint". Simple CSS is all it takes to setup something like this</div>
    <div>This will also print</div>
    <div class="noprint">This will not print</div>
    </body>
    </html>

  14. #14
    Join Date
    Nov 2006
    Posts
    29

    printing using javascript

    Thanks for your efforts...but this is what would like
    - add link that runs javascript
    - when the page is in print mode this link should be invisible
    - when for click on page (on any place) the page is switched back to a normal view.

  15. #15
    Join Date
    Apr 2006
    Posts
    120
    Are you trying to view the page in "print mode" in the browser? Or simply print the page with certain areas not printed?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles