0
if (window.print) { 
document.write('<form>Click Here To ' + '<input type=button name=print value="Print" ' + 'onClick="javascript:window.print()"> This Page!</form>'); 
}

using this code the whole page is printed can I limit the paper size?

also can I remove the print header and footer?

Thanks in advance.

3
Contributors
5
Replies
9
Views
8 Years
Discussion Span
Last Post by essential
0

I don't know about limiting the paper size.

However, removing the header and footer from the printed document can be done with some CSS:

Add this to your <head>:

<style media="print" type="text/css">
.no-print{display:None}
</style>

Then add class="no-print" to your header/footer containers.

Since the no-print style is targeted at printed documents (media="print"), It won't affect anything else.

0

Yes it can be done with the help of css. I wil play a simple demo to clear things up!
Asuming that you have
2 media print1.css and print2.css, With print1.css you have the following attribution

html { width: 1024px; height: 100%; }
body {
font: 700 16px Arial, sans-serif;
margin: 0; 
/* And so on... */
}

and for print2.css set the desired value for the width, height, font etc.

html { width: 800px; height: 80%; }
body { font: 500 12px Arial, sans-serif;
}

and this goes for overall output

<html>
<head>
<title><!--sample--></title>
<link rel="stylesheet" type="text/javascript" href="style.css" media="screen" />
<link rel="stylesheet" type="text/javascript" href="printerDefault.css" media="print" />

<script type="text/javascript">
<!--

function printMe(thisStyle) {
printLayout = document.getElementsByTagName('link')[1]; 
printLayout.href = thisStyle; window.print();  
}

//--> 
</script>
</head>
<body>
<h3>Print this page</h3>
<form name="frm1" action="#" onsubmit="return false;">
<label>Print Layouts</label><br /><br /><br />
<input type="button" value="Layout 1" onclick="printMe('print1.css');" /> <input type="button" value="Layout 2" onclick="printMe('print2.css');" /> </form> 
</body>
</html>

finally its all done... Enjoy!

0

Thanks a lot, This is working
but i mean removing the print header and footer ( like page title etc. )

also i tried as 'essential' said but, that also is printing the whole page and also got the print header and footer.
is it because i'm not having printerDefault.css and style.css

0

Base on scru's effective solution, your page should go like this. -->

<html>
<head> 
<title>PrintMe</title>

<style type="text/css">
@media screen {

body {
     background-color: #778899;
     color: #373832;
     font: 700 16px Arial, Sans-Serif;
} }

@media print {
.no-print { display: none; }
body { 
     background: #fff;  
     color: #000000;
     font: 500 13px 'Lucida Console', 'courier new', monospace; 
} }
</style>

<script type="text/javascript">
<!--
var no_print = ['This is a demo!', 'This will not be displayed if the user attempt to print this page.', 'Javascript is fun!'];

function filler(txt)
{ for ( var x = 0; x < txt; x++) { 
document.write(no_print[Math.floor(Math.random()*3)] + ' ');
} }

function printMe() { document.title = ''; window.print(); }
//-->
</script>
</head>
<body>
<p class="no-print"> 
<script type="text/javascript">
<!--
filler(20);
//-->
</script>
</p>
<p> This the only part the page will get printed.. </p>
<!-- This demo is highly readable! The rest is up to you on how you will extend this function, all things can be done from here... Good Luck! -->
<p><a href="javascript:printMe();">Print Me</a></p>
</body>
</html>

Hope everything now is clear... Good day to you!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.