SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
Thread: Javascript Printing
-
Jan 11, 2007, 12:11 #1
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
-
Jan 11, 2007, 12:14 #2
- 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();
-
Jan 11, 2007, 12:16 #3
can u explain a bit to it , how it is goin to neglect the left nav ..
http://www.huntingground.freeserve.c...plus/print.htm
-
Jan 11, 2007, 12:40 #4
- 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>
Code:var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { if (/noPrint/.test(divs[i])) { divs[i].style.display = "none"; } }
-
Jan 11, 2007, 12:44 #5
- 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">
-
Jan 11, 2007, 12:51 #6
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
-
Jan 11, 2007, 13:03 #7
- 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>
Content of style.css:
Code:h1 { font-size:20px; } p { background-color:red; }
Content of print.css
Code:p { background-color:transparent; } a { display:none; }
-
Jan 11, 2007, 13:08 #8
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 effortsI appreciated
-
Jan 11, 2007, 13:11 #9
- 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?
-
Jan 11, 2007, 13:15 #10
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
-
Jan 11, 2007, 13:49 #11
- 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
-
Jan 11, 2007, 13:51 #12
sounds good.
Thanks a lot , let me dig it by myself from this point.
Bookmarks