Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Restrict the print area of a HTML page in popup window

    Lets say i have loaded a HTML page in a popup window. This HTML page has a "Print" button where i can print out the content by pressing the button. But, i have a question which is if i want to restrict the print area of the HTML page where i don't want the bottom part of the page to be printed.

    So, i hope somone could give me some idea of what can be done.

    Thanks.

    I was using code as below:

    javascript:
    function printpage() {
    window.print();
    }

    For the "print" button:
    ...onClick="printpage()"

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    if you want to stop some elements from being printed, then you create a print stylesheet and set the "display" property of elements in question to "none".

    it's a CSS issue, not a JS one
    *keep it simple (TM)

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #4
    New Coder
    Join Date
    Jan 2005
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank for your reply.

    jbot, could you give me some example or tutorial?

    Thanks.

  • #5
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by apple
    jbot, could you give me some example or tutorial?
    in the head of the document, insert a new stylesheet like so:

    PHP Code:
    <link rel="stylesheet" type="text/css" href="print.css" media="print"

    then add the elements you don't want to print like so:

    PHP Code:
    #elementId {display:none}
    .elementClass {display:none
    to find out more visit W3 Schools.
    *keep it simple (TM)

  • #6
    New Coder
    Join Date
    Jan 2005
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have tried it with the code posted before in the forum.

    Is it a better way to it or should it try something else?

    <style type="text/css">
    @media print { .notPrinted { display: none; } }
    </style>

    This is the image that i don't want to print out:
    <td><img src="img5.gif" name="Image5" class="notPrinted" width="108" height="32" border="0"></td>

  • #7
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by apple
    Is it a better way to it or should it try something else?
    what's wrong with the above code - if it works, then it works, so it's fine, surely?
    *keep it simple (TM)


  •  

    Posting Permissions

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