Javascript: adding the print function to the body element
<p>I need to implement a print page functionality with the following restrictions:</p>

<ul>
<li>i cannot have a print view (no print.jsp to point to)</li>
<li>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)</li>
</ul>

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

<pre><code>$(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;

    });

  });
</code></pre>

<p>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:</p>

<pre><code>var body = $('body');
jQuery.extend(body, {print:function(){return window.print(); }});
body.print();
</code></pre>

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

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

<p>Thanks</p>
