JQuery/Printing question

Okay so here's the situation. I have this page of data. After the data renders, I encapsulate the different tables and divs in bubbles, as so:

$("#summaryInformation").bubble({ width: 400, title: 'Summary Information' });
$("#swapLegs").bubble({ width: 400, title: 'Swap Legs' });
$("#indicationResultsDiv").bubble({ width: 400, title: '' });
$("#amortizationSchedule").bubble({ width: 400, title: 'Amortization Schedule' });
$("#amortizationInformation").bubble({ width: 400, title: 'Amortization Options' });
$("#pricingDetails").bubble({ width: 400, title: 'Pricing Details' });

Now I have a popup on the page where the users can check off di开发者_开发技巧fferent check-boxes for each of these above "bubbles". When they click 'generate' on the popup, I want them to be redirected to another page that basically takes all of the bubbles on the current page, and arranges them nicely to be printed. How would I do this?

---

You may rearrange the data copied from the "screen" page, but you would still probably need to give the "printing" page a special styling, as rich interfaces rarely get nicely printed.

I would suggest that you create a special element in your page (like a hidden div) that will be styled just for printing, then you fill it the way you like (during document rendering or dynamically through jQuery) then you print just this specific element. For page element printing with jQuery, I suggest jQuery Print Element plugin.