Javascript Printing

[simplecode]

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

[Pepejeria]

parent.frameName.focus(); // IE needs this
parent.frameName.print();

[simplecode]

can u explain a bit to it , how it is goin to neglect the left nav ..
http://www.huntingground.freeserve.c...plus/print.htm

[dwees]

What you need to do is wrap the stuff you don't want to print with a div in the HTML like so:

<div class="noPrint">all your non-printing stuff here</div>

Then before you send the print function shown above, do the following:

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

[Pepejeria]

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:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

[simplecode]

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

[Pepejeria]

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

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

p { background-color:transparent; }
a { display:none; }

This solution does not use JavaScript and does also not pollute the HTML.

[simplecode]

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

[Pepejeria]

No, the browser will handle that. Magic huh?

[simplecode]

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

[Pepejeria]

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

[simplecode]

sounds good.
Thanks a lot , let me dig it by myself from this point.