Question

I have a small html/css site powered by jQuery, generated with PHP, you can see it in action here.

All the idea about the site is that once loaded, it works without the internet connection, if the browser supports javascript, that is.

You can see it has a PRINT button ready, but it doesn’t work yet. I want to make it work, but I’m not sure what is the best approach, or any approach, thereof.

I need to print the content area only, that means the header (song title) and the paragraph (song lyrics). Probably add a header/footer to the paper, so that the site name is printed too.

On other sites it usually works in the way that the PRINT button opens up a new window, which loads for example /print.php?id=40, but I don’t really want to do that here, as it requires an active internet connection.

In case the print feature cannot be done without an internet connection, an answer which at least describes on how to best approach this with reloading the site will still be acceptable.

Answer 1

Use a print stylesheet to specify element visibility for printing.

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

… and in print.css

#hideThisElementInPrint,
.andThisOneToo {
    display: none;
}