print page JavaScript

There is a JavaScript funcion into the HEAD tag. This funtion force to initiate printing process of your browser therefore its behaving depends on the browser.

<head>
<link rel='stylesheet' type='text/css' href='/include/screen.css' media='screen' />
<link rel='stylesheet' type='text/css' href='/include/print.css' media='print, handheld' />

<script language="JavaScript">
function print_overall(){
 window.print();
}
</script>
</head>

Somewhere in the body of HTML document should be a call of that funtion. Like that:

<div class="print">
<form>
  <input type="button" value="Print this page" onclick="print_overall()">
</form>
</div>

You can combine the function declaration and call

<div class="print">
<form>
  <input type="button" value="Print this Page" onClick="window.print()" />
</form>
</div>

or

<span class="print">
  <a href="JavaScript:window.print();">Print this page</a>
</span>

The class “print” I use to hide printing elements on a hard copy of the document.

/*=========================================================== screen.css */
.print {
  text-align:center;
}
/*=========================================================== print.css */
.print {
  visibility: hidden;
}
April 11th, 2009 in general | tags: , , ,

Leave a comment

Your comment