Javascript: adding the print function to the body element

Question

I need to implement a print page functionality with the following restrictions:

• i cannot have a print view (no print.jsp to point to)
• i cannot rely on print.css alone (because i have to move stuff around a lot in the DOM to get the page i want to print)

So i implemented this little script that can help clarifying where i'm going with this:

$(document).ready(function(){

    $('a#print').click(function(){

      var body = $('body');
      var pageClone = body.clone(true);

      $('div#search, div.chapters, div#footer').hide();
      $('div.content').css('width', '100%');
      $('div#logo').css('float', 'right');

      window.print();

      //reset the content and then copy it back
      body.html('');
      body.html(pageClone);

      return false;

    });

  });

Now what this prints is the whole page before my DOM changes. So that's not what i want, so i was thinking i could graft the window.print() function to the body element, something like this:

var body = $('body');
jQuery.extend(body, {print:function(){return window.print(); }});
body.print();

Except this approach still prints the window content, not the body content if that was ever the problem.

Can you help me to print only the body as implemented in the DOM after my changes?

Thanks

Answer 1

You can open a new window (with window.open()), write your updated DOM into that, and then print from that window instead of your main window.

Browser print facilities remain surprisingly primitive.

Answer 2

you might want to check out jQPrint. it's a nifty little plugin that lets you specify which parts of the page you want to print.

http://plugins.jquery.com/project/jqPrint