Printing multiple pages with Javascript

Question

I have a website where users click a read more button so that they can view the rest of the information on the page. I am curious how I could make it so that users do not have to print each page seperately. I would like to be able to make it so that I could have a script that print's related pages. I'f anyone could help me out and point me in the right direction it would be greatly appreciated. I need this functionality to work in all browsers.

Thanks

Answer 1

What you will need to pull this off is a stylesheet that utilizes media styles. It is basically like having two seperate stylesheets; one for printing and one for viewing. In order to be bandwidth conservative leave the printarea empty until the request is made. On the request event fill in the printarea with the whole print you with to do. I would suggest you look into jQuery and their load and ajax requests for this.

@media screen
    {
    #screenarea
        {
        display: block;
        }
    #printarea
        {
        display: none;
        }
    }
@media print
    {
    #screenarea
        {
        display: none;
        }
    #printarea
        {
        display: block;
        }
    }

Answer 2

After you have all your content in a single web page (using either injection or a server process), formatting pages uses CSS attributes for @media print, e.g.:

@media print {
    h1 {page-break-before: always;}
}

Other attributes are "page-break-after" and "page-break-inside", the latter of which helps avoid breaks inside content.