HTML5, CSS3, jQuery, JSON, Responsive Design...

    Hide when printing on the web

    Michael Brown   August 4 2011 02:57:38 AM
    I don't know how many years I've been telling people that Hide when Printing is a Notes Client only feature that won't work on the Web.  Turns out that it's really easy to do on the web, even on cacky old IE6.  Here's how to do it.

    First you set up a CSS class called NoPrint:

    .NoPrint {
    display: none;

    and then save it to a CSS file, called noprint.css, which you can save as a Style Sheet Resource in the Domino Designer.  The NoPrint class will hide any element that has that class.  You then assign the class to the button in the design, like so:

    So far, so not very useful: This will actually hide the associated elements all the time!   The trick to getting it to apply only to printed pages is in how you load the noprint.css file, namely by putting code like this in the form's HTML Header (but replacing the square brackets with their angled equivalents):
    @NewLine +
    "[Link rel='stylesheet' type='text/css' href='/" + @WebDbName +
    "/noprint.css' media='print' /]"
    + @NewLine

    The "media='print'" setting is the key.  That causes the noprint.css file to only operate for printed pages.  For pages displayed in a browser, noprint.css does not operate, which means that the NoPrint class has no definition there (and so does nothing).

    You could also use this technique to do things like have different fonts and colours for printing than for on-screen display.

    FYI, I found this tip in the book IBM Lotus Domino: Classic Web Application Development Techniques by Richard G Ellis.  This book is a very good summary of best practices for "classic" - by which he means, I think, "non-xPages" - Domino web development.  Much of it is common sense and stuff that I would hope most Domino developers would know already.  Still, it does throw up the occasional gem, like the one I've reproduced above.
    No Comments Found