How do I selectivly print elements on a page

Question

I have a requirement to print only part of a page. I cannot use css(media=print) to do this since I have no clue what the page contains. All the html in the page is dynamically generated.

Also is there any limitation on the css properties that are recognized in Print mode. Many of my css properties like background-image are not applied on the generated preview.

Answer 1

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).

You can also define a CSS like

<style  type="text/css" media="screen">
    #printableButNotVisible { display:none }
    #visibleButNotPrintable { display:block }
</style>

<style type="text/css" media="print">
    #printableButNotVisible { display:block }
    #visibleButNotPrintable { display:none }
</style>

and add dynamically classes "printableButNotVisible" or "isibleButNotPrintable" to all elements which need be either printable or visible. You can do this for example with respect of jQuery.

You can aslo use jqPrint plugin to print selected part of the page.