3 people following this project (follow)

Project Description
This code will require css, Jquery, and a bit of html. This is a masterpage modification which allows the navigation bar (quicklaunch & treeview) to be resized and collapseable. It has memory in the form of cookies and is compatible with chrome,ie,firefox,and safari.

"Short Screencast (30s) of Resize in Action"
Resizeable_SharePoint_Nav.swf

Readme File
## Jason Kuter 12/2008 -http://jasonkuter.com
##
## I created this for a corporate intranet so that users could choose whether to not to see the
## left navigation.  It uses JQuery and some CSS to accomplish this.  This is not an "add-on", you 
## will need to hack your masterpage to do this.  In our environment all sites use the same masterpage.
## We accomplish this though the use of a site definition and feature stapling, therfore all sites
## and pages inherit the changes made to the masterpage when they are rolled out.  The masterpage I
## have included is a stripped down version of the one I use here with company proprietary stuff removed.
## We also have the treeview turned on by default which is why this script works. It is provided as 
## an example, you may need to make some adaptations.
##
## How to use (you may want to open the masterpage I have included while you read through the steps.
1) Put the scripts on your machine someplace, here I have used c:\Inetpub\wwwroot\wss\VirtualDirectories\80\scripts and \images

2) Add the scripts and css to your page:
	<script type="text/javascript" src="/scripts/jquery.js"></script>
	<script type="text/javascript" src="/scripts/jquery-ui-personalized-1.5.2.packed.js"></script>
	<script type="text/javascript" src="/scripts/jquery.cookie.js"></script>
	<script type="text/javascript" src="/scripts/navresize.js"></script>
	<link href="/css/navresize.css" rel="stylesheet" type="text/css">

3) Modify the <td> spacer between the left nav and main content to look like this:

<!-- this is where the html is changed to allow the resize to occur -->
<td unselectable="on">
		  <div unselectable="on" id="thespacebetween" class="ms-pagemargin">
			<div id="handleDiv" title="Double-click to toggle sidebar">
				<img src="/tmw/images/handle-right.png" id="handleIMG" alt="" />
			</div>
		  </div>
		  <!-- this needs to run after element is created for resize to work -->
		  <script type="text/javascript">
			if (shownavbar == "false") {
				$('#ms-navframe').hide();
				if ($("#ctl00_PlaceHolderPageImage_ctl00")) {
					$("#ctl00_PlaceHolderPageImage_ctl00").hide();
				}
				$("#handleDiv").show();									
			}
			$("#resizeBox").width(navbarwidth);
		   </script>
		   <IMG SRC="blank.gif" width="10" height="1" alt="" />
		   <asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" Visible="false" runat="server" />
	  </td>
<!-- End Changes -->

4) Mod the resizeable section (I used treeview and remove scroll script) to have an id:

<div id="resizeBox" class="ms-treeviewouter">
	<SharePoint:SPHierarchyDataSourceControl runat="server" 
            id="TreeViewDataSource" 
            RootContextObject="Web" 
            IncludeDiscussionFolders="false" 
            ShowListChildren="false"
            ShowDocLibChildren="false" 
            ShowWebChildren="true" />
	<SharePoint:SPTreeView id="WebTreeView" runat="server" 
           ShowLines="true" 
           DataSourceId="TreeViewDataSource" 
           ExpandDepth="0" 
           EnableViewState="true" 
           SelectedNodeStyle-CssClass="ms-tvselected" 
           NodeStyle-CssClass="ms-navitem" 
           NodeStyle-HorizontalPadding="2" 
           SkipLinkText="" 
           NodeIndent="12"
           ExpandImageUrl="/_layouts/images/tvplus.gif" 
           CollapseImageUrl="/_layouts/images/tvminus.gif" 
          NoExpandImageUrl="/_layouts/images/tvblank.gif">
	</SharePoint:SPTreeView>
</div>

5) Thats it!

Last edited May 3 2010 at 1:38 AM by jkuter, version 11