Although I wasn’t using Sharepoint for this website, I was using jQuery, so I leveraged this idea to print specific portions of a website instead of only Sharepoint specific content. This site was also using jQuery UI for creating rich internet content, specifically the tabs, accordion, and dialog widgets. The incredible thing about widgets is that they allow for highly interactive sites, yet the trouble with widgets is that they are not conducive to easily printing their content.

If you tried printing the default tabs example using jQuery UI, you end up with something that looks like this…

At first glance, you may not realize the problem with this. The content of the inactive tabs is hidden from the print view. In our requirements, we needed to print all the content for each tab, whether it was active or not. Now you begin to see the clash between interactive content and printer friendly widgets.

There is a solution to this problem, but it varies depending on how you setup your widgets. Here are some tips to setup the print view. For printed tabs to work, you need to create some hidden panel headers and utilize some CSS to display the hidden tabs contents. The solution I came up with contains a “Printer Friendly” link which triggers the dynamic CSS changes for printing all the tabs contents.

Add the following HTML to your page where you want the locate the “Printer Friendly” link for the tab widgets.

Printer Friendly Here

Here is the printer friendly window that is created after clicking on the “Printer Friendly” link.

Here is the jQuery script that enables the printer-friendly jQuery UI tabs to happen.

$(function() {
	        $("#tabs").tabs();

	        // remove any print headers that we may have added
	        $("div.printHeader").remove();

	        // assign our id for print navigation removal
	        $("#tabs>ul").each(function() {
	            $(this).addClass("tab-nav");
	        });

	        // create printer friendly tab view
	        $("#tabs>ul>li>a").each(function() {
	            // what tab is this?
	            var tabNum = $(this).attr("href").replace("#", "");

	            // get our content for this tab
	            var tabContent = $("div[id=" + tabNum + "]");

	            // prepend our print header along with tab theme style
	            $(tabContent).before("
\n" +
    	                            "
\n" +
	                                    "
" + $(this).text() + "

\n" +
	                                "


\n" +
	                            "

\n");
	        });

	        drawPrinterFriendly(); // creates printer friendly links
	    });

	    // Prints contents of a dialog
	    // source: http://www.endusersharepoint.com/2008/12/09/jquery-for-everyone-print-any-web-part/
	    // remarks: added removal of printer friendly link
	    function printDialog(tagid, title) {
	        if (tagid) {
	            var CSSContent = ".printInfo,.tab-nav { display:none;}\n.ui-tabs .ui-tabs-hide,.printHeader { display: block !important; }\n";
	            var printCss = "


";
	            // build html for print page
	            // remarks: we use parent here since the dialog is in a wrapped container
	            var html = "\n\n" + $("head").html() + "\n" + printCss + "\n\n\n" + $("#" + tagid).parent().html() +
                    "\n\n";
	            var printWP = window.open("", "printWebPart"); //open new window
	            printWP.document.open();
	            //insert content
	            printWP.document.write(html);
	            printWP.document.close();
	            //open print dialog
	            printWP.print();
	        }
	    }

	    // creates printer friendly link for matching dialog H3 tags
	    function drawPrinterFriendly() {
	        // find all dialogs by their TD
	        var tags = $("*[id^='dialog-']");
	        // loop through dialogs
	        tags.each(function() {
	            //get id for print function
	            var tagid = $(this).attr("id");
	            //append an image with onClick event
	            $(this).find("h3").html("").append(
                        "
" +
                        "  Printer Friendly" +
                        "  " +
                        "

"
                    );
	        });
	    }

You can find the entire solution here. This solution can easily be adapted to work with other widgets (dialogs, accordions, etc.) with the inclusion of the H3 tag inside a div with id prefix “dialog-”. Possibly in the future I will create a jQuery plugin that encapsulates this functionality for simple integration into your site. Have you found a better approach for printing select portions of a page containing jQuery widgets?

• jQuerify is a simple way to inject the jQuery framework into any website and enable immediate DOM manipulation. To try it out, just drag this link to your bookmark list. Depending on the browser you’re using, you can then enter any javascript commands via the console window in Firebug, IE 8 Developer Tools, or Chrome Developer Tools.

  

  If the website you are visiting already has jQuery installed, the bookmarklet will not inject the framework again.

  

  Here is some sample jQuery code which would highlight a post in red, the blog entry in blue, and perform some simple animation to the sidebar on this website. Click here to see it in action.

  $("div[class=post]:first").css("border", "2px solid red");
  $("div[class=entry]:first").css("border", "2px solid blue");
  $("div[class=sidebg]").slideToggle(4000).fadeIn("fast");

• Firebug Lite is another useful bookmarklet if you’re currently using a browser that doesn’t support plugins or have its own set of developer tools. It has support for both online and offline integration. Click here to see an example or simply drag and drop this link into your bookmarks.

  

  You can now enter commands into the console and manipulate the DOM just like you were using an assisted native browser extension. Enjoy!

Do you have any great developer bookmarklets that you’d like to share? Please comment!

First, you need to download the jGrowl extension from here. After including the JavaScript reference to your source, you can begin creating messages by adding the following JavaScript to your page.

$.jGrowl("Customer order successfully submitted!");

jGrowl notifications can be sticky (i.e. you must close them) and they can also accumulate if you want to post several notifications at once. Here’s a quick glimpse of how these notifications can appear with some enhanced styling applied.

jGrowl Sample Notification