SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Javascript Printing

    Hi All,
    Let me explain my problem :
    Am having one page in which one header, left navigation, footer and content is coming. Now I have one print btn to print the page and the problem starts here , I want to print only header and content but not the left nav, how do I achive this using java script.

    Thanks

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    parent.frameName.focus(); // IE needs this
    parent.frameName.print();

  3. #3
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can u explain a bit to it , how it is goin to neglect the left nav ..
    http://www.huntingground.freeserve.c...plus/print.htm

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you need to do is wrap the stuff you don't want to print with a div in the HTML like so:

    Code:
    <div class="noPrint">all your non-printing stuff here</div>
    Then before you send the print function shown above, do the following:

    Code:
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
         if (/noPrint/.test(divs[i])) {
              divs[i].style.display = "none";
         }
    }

  5. #5
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I kind of misread your post.

    There is no need to use JavaScript for this issue. Simply add a new css file to the document and set the media property to print. In the print.css you can define what elements will be visible etc.

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

  6. #6
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pepejeria can u provide me some example.

    dwees am trying ur method 2
    m not that good in css n javascript

    my page is full of Div's and css

  7. #7
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <link rel="stylesheet" type="text/css" href="layout.css">
    <link rel="stylesheet" type="text/css" href="print.css" media="print">
    
    <h1>Latest news</h1>
    <p>
        The dog ate the bird
        <a href="somePage.html">Read all about it!</a>
    </p>	
    Then you use 2 different css files. layout.css will have css for both versions (add media="print" if you only want this css for screens). And print.css will be used additionally when you print.

    Content of style.css:
    Code:
    h1 { font-size:20px; }
    p { background-color:red; }
    Now, when you print this, you will not want to print the link and also change the background-color of the p element

    Content of print.css
    Code:
    p { background-color:transparent; }
    a { display:none; }
    This solution does not use JavaScript and does also not pollute the HTML.

  8. #8
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sounds good
    but where is print btn ,i mean how the printer is goin to identify whcich css is need to use , do i need to do some changes for btn of print....
    thanks for ur efforts I appreciated

  9. #9
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, the browser will handle that. Magic huh?

  10. #10
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    am bit confused, after this code if i say print thr browser btn then how it is goin to work ?
    just want to know the logic of magic

  11. #11
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The browser will basically use any css without the media set to screen and also the ones where no media is specified. And the browser will use the print.css when you either press the print button or when you call the print method in JavaScript. You could always download the Firefox open source code and dig into the code to know exactly how this is done

  12. #12
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sounds good.
    Thanks a lot , let me dig it by myself from this point.


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
  •