Print a paragraph

Print the contents of a specific paragraph

by erick

HTML

<h2 class="title">Paragraph 1 <a class="print" href="#">Print me</a></h2>
<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor  libero, molestie ut tristique nec, elementum quis lorem. Aliquam erat  volutpat. Vivamus dolor arcu, mattis ut volutpat ut, dignissim sit amet  tortor. Fusce mollis rutrum sodales. Fusce et dignissim lectus. In arcu  lorem, euismod nec rutrum non, rutrum sit amet est. Lorem ipsum dolor  sit amet, consectetur adipiscing elit. Sed sit amet placerat dolor.  Nullam euismod hendrerit pharetra. Nunc nec mi vel nisl convallis  placerat. Nulla facilisi. Ut interdum tristique magna eu pellentesque.  Sed vel est in lorem cursus adipiscing. Vestibulum id mauris quis orci  porttitor vehicula. <span class="donotprint">This sentence is hidden when the paragraph is printed.</span></div>

<h2 class="title">Paragraph 2 <a class="print" href="#">Print me</a></h2>
<div class="block">Nulla quis dui nibh, vitae rhoncus mauris. Integer arcu dolor, commodo  nec fringilla tempor, pharetra et lorem. Praesent quis velit vel sem  mollis dictum. Vivamus nisi enim, pulvinar non suscipit eu, lobortis sit  amet velit. Donec scelerisque facilisis purus, id elementum sapien  aliquam quis. Phasellus ut nunc sed risus molestie hendrerit id ac  lacus. Morbi augue est, adipiscing eu gravida in, faucibus ac metus.  Aenean vel velit ligula, sed auctor odio. In hac habitasse platea  dictumst. Cum sociis natoque penatibus et magnis dis parturient montes,  nascetur ridiculus mus. Vivamus eget lacus suscipit diam tempor  ultrices. Donec tincidunt faucibus ante sed vestibulum. Duis dignissim,  velit quis mollis pharetra, tellus diam viverra sem, quis bibendum urna  metus quis enim. Mauris magna arcu, convallis nec imperdiet in,  condimentum sed diam. Duis eu quam eu diam gravida sagittis eget et  magna.</div>


<h2 class="title">Paragraph 3 <a class="print" href="#">Print me</a></h2>
<div class="block">Aliquam rutrum pretium laoreet. Donec at...

CSS

h2.title { font-size: 22px; }
.block { margin-bottom: 10px; }

/* use this class name to hide something while printing */
.donotprint { color: red; }

JavaScript

$(function() {
    var autoPrint = true,
        popupWidth = 500,
        popupHeight = 500,
        printWin = function(el) {
            var msg = el.parent().next('.block'),
            txt = el.text(),
            msgContent = msg.html(),
            pgtitle = el.parent().text().replace(txt,''),
            win = '<html><head><title>' + pgtitle + '</title>' +
                '<style>.donotprint,.print{display:none;}</style>' +
                '</head><body><div class=h><input onclick=window.print() type=button value=Print>' +
                '<input onclick=window.close() type=button value=Close><hr></div>' + msgContent +
                '</body></html>',
            temp = "menubar=yes,location=no,toolbar=0,status=0,scrollbars=1,width=" +
                popupWidth + ",height=" + popupHeight,
            w = window.open('', 'Print', temp);
            w.document.write(win);
            if (autoPrint) { w.print(); }
        };
    $('a.print').click(function(){
        printWin( $(this) );
        return false;
    });
});