I use this blog to record programming notes from both work and personal projects. I don't put everything I do on here but when I write a handy script or figure something out that I don't want to forget for next time, I add it to this blog. Feel free to use this blog in your own projects.
Test Menu
- Commentary
- Deals
- Coupons
Feb 14, 2012
Simple jQuery Print Friendly Page
The following script can be used to take the content from a section of a page, in this case a div, and put the content in a new simplified window. This is one way to exclude banners and graphics or deal with page layouts that don't print well. In the first section, on document ready, the link (or whatever element you like) is selected by the id "linkPrintFriendly" and assigned a function to execute when the element is clicked. I've also made the cursor a pointer when hovering over the element. The "printfriendly" function basically grabs html from an element on the page (with the class "theelementtoprint") and puts it in a new window that is opened. In this example, I'm also hiding a table that I don't want to show in the new window.
I found a very useful example showing the code at http://jsfiddle.net
<script type="text/javascript">
$(document).ready(function () {
$("#lnkPrintFriendly").click(printfriendly);
$("#lnkPrintFriendly").css("cursor", "pointer");
});
function printfriendly() {
//open a new window or tab
var w = window.open();
//include only the content of the center div or rightnocenter div
var html = $(".theelementtoprint").html();
//provide a title
w.document.title = 'Page Title';
//put the html into the new page
$(w.document.body).html(html);
//hide the table
$(w.document).find("#tblFunctions").hide();
}
</script>
Labels:
ASP.NET,
Javascript,
jQuery
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment