Category: CSS

Add Print Page Functionality Using JavaScript

5 Comments

This morning I received a request from my current client which I’ve gotten before, but not in SharePoint 2010.

They wanted the ability to print page and list view content easily, and without the left and top navigation elements – basically just the main content zone.

I knew there was a way as I had done this in 2007, but I had to do a quick search for the exact JavaScript.  I found a Codeplex project that included a Content Editor Web Part with JavaScript and this worked almost perfectly for my scenario.

This solution works great if you want to print a single page, but I wanted reusability and something that I could do once and have it work for every page in a site.

I ended up copying the script verbatim into a PrintScript.js file which I saved under /_layouts/1033, here is the code of the file:

<!-- Web Part/region to print -->
var WebPartElementID = "ctl00_MSO_ContentDiv";


//Function to print Web Part
function PrintWebPart()
{
 var bolWebPartFound = false;
 //var currentPage = document.location.href;
 if (document.getElementById != null)
 {
  //Create html to print in new window
  var PrintingHTML = '<HTML>\n<HEAD>\n';
  //Take data from Head Tag
  if (document.getElementsByTagName != null)
   {
   var HeadData= document.getElementsByTagName("HEAD");
   if (HeadData.length > 0)
    PrintingHTML += HeadData[0].innerHTML;
   }
  PrintingHTML += '\n</HEAD>\n<BODY>\n';
  var WebPartData = document.getElementById(WebPartElementID);
  if (WebPartData != null)
  {
   PrintingHTML += WebPartData.innerHTML;
   bolWebPartFound = true;
  }
  else
  {
   bolWebPartFound = false;
   alert ('Cannot Find Web Part');
  }
 }
 PrintingHTML += '\n</BODY>\n</HTML>';
 //Open new window to print
 if (bolWebPartFound)
 {
  var PrintingWindow = window.open("","PrintWebPart", "toolbar,width=800,height=600,scrollbars,resizable,menubar");
  PrintingWindow.document.open();
  PrintingWindow.document.write(PrintingHTML);
  // Open Print Window
  PrintingWindow.print();
 }
}

Once I had the JavaScript file saved in the layouts directory, I could simply add a ScriptLink tag in the <head> section of my master page:

<SharePoint:ScriptLink name="PrintScript.js" runat="server"/>

That’s great, now my master page has the ability to print any page; but where do I put the link?  At first I thought of adding a new DIV in the footer area of my page, but I didn’t want the Print link to be included in the printed version of the page.

A quick search on how to add an item to the Site Actions menu gave me EXACTLY what I wanted – and since this is an Intranet solution, every user that needs to print will have at least Contribute permissions and therefore will have the Site Actions menu available to them.

In order to display what I wanted in the Site Actions menu, I added the following code under the <CustomTemplate> section:

<!--Print item added to Site Actions -->
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_PrintPage"
	Text="Print this page"
	Description="This will launch a new window to print this page."
	ImageUrl="/_layouts/images/Print.png"
	MenuGroupId="100"
	Sequence="110"
	ClientOnClickNavigateUrl="javascript:PrintWebPart();"
	/>
<!--End print item-->

And finally, here is what I’m left with:

And clicking the Print Page option gives me a nice, clean window with no navigational elements:

Advertisement

Prevent theme inheritance on Publishing sub-sites

Leave a comment

If you’ve created publishing sites and then tried changing the theme on a sub-site, you’ve probably run into this issue:

You apply the theme and nothing changes!!!!!

For some reason or another, when Publishing features are enabled; sub-sites inherit the theme from their parent site. You can prevent this from happening by doing the following:

Open up the default master page for the site in SharePoint Designer and look for the following tag:

Either delete or comment-out this tag and then save your master page, you should no longer have this issue.

CSS version 3 adds some cool functionality!

Leave a comment

If you don’t do much with theming and cascading style sheets, you probably don’t know or care that CSS 3 is coming fast. Some browsers already support it (Firefox 3.x, Safari), some don’t (IE); but the feature-set in CSS 3 is something that will make designers and developers very happy.

Here are the features I’ve played with so far in my demo environment:

Border-radius

Box-shadow

Text-shadow

Opacity

Pretty cool stuff, here’s a screenshot of the page I’ve been messing with (viewed in Firefox 3.5.9):

Add Flyout/Dropdown Functionality to Quick Launch Menu

Leave a comment

Have you wondered how you can get the Quick Launch to display fly out menus, similar to the Top-Link bar drop-down menus? It can be done with just a few small tweaks to the Master Page.

If you open up your default master page in SharePoint Designer and search for the following block, this is where you’ll edit: 

<asp:AspMenu
  id="QuickLaunchMenu"
  DataSourceId="QuickLaunchSiteMap"
  runat="server"
  Orientation="Vertical"
  StaticDisplayLevels="1"
  ItemWrap="true"
  MaximumDynamicDisplayLevels="1"
  StaticSubMenuIndent="0"
  SkipLinkText=""
>

By default, the highlighted portions are set to “2” and “0” respectively, by setting them to “1” it gives us the fly out functionality we were looking for, pretty cool!

The problem I ran into after getting this to work is the “fly out” container consists of a white background; no border and it seemed to inherit the font-color from my custom style sheet. That’s fine, or so I thought. Being that the background of my site is also white, it made it very difficult to see the fly out menu easily. I thought I could easily set the background via the CSS sheet like anything else, boy was I wrong!

After some searching, I found several people with the same problem and no easy fix; until I came across an MSDN article. Basically it showed that by applying the Tag to the SharePoint:AspMenu portion of the master page you could apply formatting to the “fly out”.

So I added that and at first I was following a blog post that said you could use something like to apply styles to the menu, I tried that and could not get it to work so I instead used the MSDN article and applied the formatting directly in the master page, and then I coordinated it with the CSS sheet to make sure the styles matched. Here is my DynamicMenuStyle code chunk after formatting:

<DynamicMenuStyle

      backcolor="#FFFFFF"

      forecolor="#0066cc"

      borderstyle="Solid"

      borderwidth="2"

      bordercolor="#0066cc"

/>

After doing that I now have working, branded fly out functionality for both the Top Link Bar and Quick Launch Bars on my MOSS site.