Print webpages problems :: looking for good tutorial to print web pages (build by Jquery ui, jqgrid , zend)

Question

Hi,

I should print web-pages of website with jqgrid , Jquery calendar+ other Jquery ui+background images etc.. in server side its build with Zend Framework.

I don't have experience and knowledge in web page printing, but i get this mission in my job.

I need:

1. Good tutorials or book (i read about background images problem) to study this issue well (I have time for that).

2. More practical instructions how print web pages that build with Jquery + Jquery UI + jqgrid (I know that Jquery UI have browsers compatibity issues vs yui (yahoo library)).

Thanks for all great people here that helps,

Yosef

Answer 1

A lot of problems with printing you can solve with respect of media attribute of the stylesheet definition. You can declare

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

to include some css for screen only, use media="all" to define some information be displayed on both screen and printer or make a html elements be displayed only during printing. With jQuery UI for example you can find a good idea to print only a selected tab (or accordion). You can find useful not print some hidden divs like div.loadingui. So you can make a CSS like

<style  type="text/css" media="screen">
    #printableButNotVisible { display:none }
</style>
<style type="text/css" media="print">
    #accordion h3, #vcol, div.loadingui, div.ui-tabs-hide,
               ul.ui-tabs-nav li, td.HeaderRight { display:none }
    #printableButNotVisible { display:block }
</style>

It's only an example, but I hope to explain the main idea. Moreover you can dynamically create a css and insert or switch in your html document (see http://docs.jquery.com/Tutorials:5_Quick_jQuery_Tips#Switch_A_Stylesheet).

It can be a good idea to remove menus from the page during printing, but I can gives you no example, because I don't know what kind of menus you use.

If somebody knows a good CSS for print media for jQuery UI and for jqGrid it would be very interesting for me too.