Updated: Dynamic left navigation width for SharePoint

Search

Accessible SharePoint WebSites
Download ARF

Updated: Dynamic left navigation width for SharePoint

http://blog.thekid.me.uk

I have updated the JavaScript which makes the left navigation on a standard SharePoint site expandable.

This new version 'remembers' the width between page views and also works when the TreeView is not present.

You can download the new JavaScript file from...

http://blog.thekid.me.uk/Media/navwidth_thekid.ieuser.js

or if you are using IE7Pro, use the following URL...

ie7pro://blog.thekid.me.uk/Media/navwidth_thekid.ieuser.js

--Vince

Posted by Vincent Rothwell on Tuesday, 4 Dec 2007 15:47  - 62 Comments
Orininally printed from http://thekid.me.uk - Copyright Vincent Rothwell 2007
 

Comments

Sunday, 27 Jul 2008 10:36 by Johannes
wonderful work, thank you so much for sharing. d'_'b

Sunday, 27 Jul 2008 10:36 by Raji
Really great work Vince, many thanks for sharing

Sunday, 27 Jul 2008 10:36 by Mike Simonds
I added your code to the default master but I cannot get it to work at all, any idea what I need to do besides just cust and paste your code Thank you sir ~Mike

Sunday, 27 Jul 2008 10:37 by Peter
Hi Vince, I have pasted the code to the default.master page but it doesn't work as the 1st version that you implemented before. The cursor doesn't change. Please help on this. Thanks. Peter

Sunday, 27 Jul 2008 10:37 by Vincent
Peter, Sorry for my late reply. I suspect its because I chnaged the timeout before the additional functionality is added. If the script runs too soon the page may not be ready and it won't find the tags its looking for. Could you try changin the line setTimeout("_tk_setGrab()", 50); to setTimeout("_tk_setGrab()", 1000); Which is what it was in the previous version. --Vince

Sunday, 27 Jul 2008 10:37 by Peter
Vince, Thanks. You rocks. Peter

Sunday, 27 Jul 2008 10:37 by adam
this is very nice, keep this stuff coming

Sunday, 27 Jul 2008 10:37 by Scott Anderson
I've been looking for this functionality for a year. Excellent work and thanks for sharing!

Sunday, 27 Jul 2008 10:37 by stephane
Hello, Wonderful. Thanks for sharing it :).

Sunday, 27 Jul 2008 10:37 by saef
hi, i wanna remove actions menu from the document library in MOSS. second, i wanna have explorer view in share point. thanks

Sunday, 27 Jul 2008 10:37 by Sam
Nice work and thanks for sharing!

Sunday, 27 Jul 2008 10:37 by Russ
I thought these tips were for CEWP's? I'm not a coder so the cewp is a nice quick trick for me to use. Can it be cewp'd?

Wednesday, 30 Jul 2008 01:46 by Omar Sultan
Hey There, thanks for this amazing post, but im having trouble getting it to work, i don't understand where exactly the script is supposed to be placed?

Thursday, 31 Jul 2008 01:48 by Turkey
Thanx You.. Perfect Docs

Saturday, 6 Sep 2008 10:28 by Scott
Excellent! Works very well. Has anyone figured out how to put some type of handle on the rights side of the Quick Lanch area so new users can figure out that the nav area is expandable. I have not had any luck with this without screwing up the display of the Quick Lauch display... Thanks! Scott

Tuesday, 23 Sep 2008 10:54 by Grant
I'm new to SharePoint but from what little I have heard that I need to change the template in SharePoint Designer to make this happen. It that right? How do I get into SharePoint Designer. Sorry for my ignorance.

Tuesday, 23 Sep 2008 12:29 by Grant
I'm new to SharePoint but from what little I have heard that I need to change the template in SharePoint Designer to make this happen. It that right? How do I get into SharePoint Designer. Sorry for my ignorance.

Friday, 26 Sep 2008 02:39 by Martin
ERROR An error occurred during the processing of /_catalogs/masterpage/default.master. Code blocks are not allowed in this file. I get this error when I put the javascript in my default.master page. Did anyone get this error? Can you tell me what I'm doing wrong? Thanks.

Wednesday, 8 Oct 2008 04:24 by Karel
Fantastic! I had this implemented for some time, but I kept on getting an "object required" error - so I had to take this code out of my Master.default file. I might have put the script at the incorrect place! So the question is - where do you put it? I had it above the following line: <asp:ContentPlaceHolder id="PlaceHolderTitleAreaSeparator" runat="server"/> Regards

Wednesday, 8 Oct 2008 08:46 by Flo
I also put it in the head-section of the masterpage. In my opinion shouldn't matter where exactly? But the "object required"-error is the same here. It appears on different clients (Internet Explorer 6/7, Windows XP/Vista), but not everywhere and not on every pageload. @ Martin: add a new line to the masterpage: <SharePoint:ScriptLink language="javascript" name="navwidth.js" Defer="true" runat="server"/> Sounds to me like you just copied&pasted the code to the default.master - which won't work for sure. @Grant: Do you have Sharepoint-Designer? It's somewhat like the new version of Frontpage. In SPD, just click open and type in the URL of the sharepoint page...

Monday, 13 Oct 2008 04:55 by Pro
Even I keep getting the Object required error. is there any change required to fix it up. In some pages it works fine and in some it doesn't.

Thursday, 16 Oct 2008 08:26 by Steven Richardson
Hi Vince Thanks for this post, great tool. do you have any idea of how to get it to work in the new microsoft master page templates? Namely the block_lay4_blue.master one? Thankyou kindly Steven

Thursday, 23 Oct 2008 04:18 by lloono
Hi Vince Thanks for your solution, it's work well. But I added some wrong script on it and I can't browse my site now. The Error is: "An error occurred during the processing of /sites/hvp/_catalogs/masterpage/default.master. The server block is not well formed." Could you tell me how to use my backfile to recover it? Thank you!

Tuesday, 28 Oct 2008 10:07 by Steve
seems to work on ie6 but for Firefox 3.0.3 I get: oDivider.style is undefined

Tuesday, 28 Oct 2008 10:41 by Steve
seems to work on ie6 but for Firefox 3.0.3 I get: oDivider.style is undefined

Tuesday, 28 Oct 2008 10:43 by Steve
adding <SharePoint:ScriptLink language="javascript" name="navwidth.js" Defer="true" runat="server"/> was a problem. Could not find navwidth.js. already had this line in the master.default <SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>

Wednesday, 5 Nov 2008 04:27 by Marc
Thank you four your great work. I have a problem with Firefix 3.0.3 I get the error oDivider.style is undefined. With Iexplorer and Opera, thers no error at all and i can change the width of the treeview. Greetings

Monday, 10 Nov 2008 11:30 by Steve
Marc, did you find a solution? To date, I have a whole team avoiding Firefox rendering on this page.

Monday, 10 Nov 2008 12:05 by Steve
Marc, did you find a solution? To date, I have a whole team avoiding Firefox rendering on this page.

Monday, 10 Nov 2008 03:13 by Steve
Marc, did you find a solution? To date, I have a whole team avoiding Firefox rendering on this page.

Wednesday, 12 Nov 2008 09:38 by Olle
Hi Vince! I am the sharepoint-administrator on my company, and this mod would really be usefull for us. But im afraid to mess things up since there are ~100 peaople depending on the site and im not very experienced. Is there any risks involved? it would be a nightmare if the site became unacessable or something similar. Also wondering if there is a way to make this script active ONLY on the sites where the "tree-view" is enabled.? Thanks! // Olle @ Sweden

Wednesday, 12 Nov 2008 10:46 by Steve
Olle, I would say this mod is too buggy right now. 1. There is a problem with Firefox 3.0.3 and probably other versions 2. It only expands horizontally and not vertically 3. Sometimes the scrollbar container is not restored to match the treeview container. For me, #1 is the real issue. The others are just annoyances

Thursday, 13 Nov 2008 04:00 by James
Hi all, Can someone please let me know the 'FULL' script to use from start to finish, as I'm having problems! (I'm quite new to all of this) Also, where do I put all of the script within the default.master file?? Thanks James

Thursday, 13 Nov 2008 04:07 by Vince
As with most examples on my site this is not really a production quality piece of code, its just an example of what you can achieve. I wrote it one evening to see if it could be done, but I have never put it into production. However, it looks like a lot of people like it and so I may take it further when I have the time. --Vince

Sunday, 23 Nov 2008 04:00 by Steve
Vince, do you have any hints as to why Firefox may have issues with Divider.style? I feel it must be related to the navwidth.js inclusion which I was not able to do on my site. adding <SharePoint:ScriptLink language="javascript" name="navwidth.js" Defer="true" runat="server"/> was a problem. Could not find navwidth.js. I already had this line in the master.default <SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/> so I left it this way.

Tuesday, 25 Nov 2008 03:49 by Pro
When the page Loaded for the first time. It opens up the navigation area as expanded.

Wednesday, 3 Dec 2008 05:02 by James
The entire Sript works perfect apart from the initial width of the navigation area. Once the page is loaded the navigation area take 50% of the screen. Is there any work around to fix this.

Friday, 12 Dec 2008 11:03 by mrt
James, where did you put this in your code?

Wednesday, 17 Dec 2008 12:03 by Grant
I do not have Sharepoint-Designer so I downloaded a copy of the default.master to my desk top. I renamed the original in the SP "Master Page Gallery" to "default-old.master". Then I've pasted in the code between script tags inside the head tags in the file on the desktop and saved it as "default.master". I then uploaded the file. Nothing happened. I've refreshed and cleared my history, etc. No joy. No harm either. Am I missing something?

Friday, 30 Jan 2009 10:05 by Matthew Tschiegg
If anyone is frustrated by the very slight delay while the JS kicks in to set the width this can be overcome by modifying the script. Steps 1. Remove the "setTimeout("_tk_setGrab()", 50);" line of code from the script. 2. Open your default.master in Notepad** this file can be located on the server at "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\GLOBAL" 3. Add <SharePoint:ScriptLink language="javascript" name="navwidth.js" Defer="true" runat="server"/> beneath the core.js line. You will need to make sure the js file is located in the same folder as your core.js file. 3. Change your BODY html tag to the following <BODY scroll="yes" onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper(); _tk_setGrab();"> this will tell the script to execute when the body is loaded, which fixes the slight delay. 4. Save your changes and now it should work perfectly across your site ** ::::WARNING:::: You MUST open in Notepad and NOT sharepoint designer, opening the default.master on the server in sharepoint designer will compromise the links in the top of the file and can critically damage your site. Should you be foolish enough to do so, the fix is to restore the top few links in default.master page to look like ~/_controltemplates/Welcome.ascx as opposed to /_layouts/_controltemplates/Welcome.ascx Disclaimer: This is not a reccomened customization and I take no responsibility if things break, you have been warned.

Tuesday, 3 Feb 2009 04:39 by Guido
Using Matthews modifications we get a wider treeview with no delay, but with scrollbars. We found out only with setTimeout("_tk_setGrab()", 1000); it displays no scrollbars. If anyone is able to remove the delay without showing scrollbars it would be very helpfull.

Friday, 6 Feb 2009 09:19 by Matthew Tschiegg
Guido, whatever CSS implementation you have for your sharepoint site, you would need to override the treeviewouter class, you can do that in the javascript if you like. div.ms-treeviewouter div{ overflow:[auto|hidden|scroll|visible]; }

Friday, 13 Mar 2009 05:11 by Noobtron
To get rid of the Firefox error message you may try changing the BODY html tag at your master page as following <!--[If IE]> <BODY scroll="yes" onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper(); _tk_setGrab();"> <![endif]--> <!--[If !IE]> <BODY scroll="yes" onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();"> <![endif]-->

Monday, 23 Mar 2009 02:22 by Noobtron
Dynamic left navigation bar didn't work on IE8. By changing the line 80 in navwidth.js got it working... Line 80: _tk_spDragProps.element.style.zIndex = ++_tk_spDragProps.element.style.zIndex;

Monday, 23 Mar 2009 02:48 by Noobtron
Dynamic left navigation bar didn't work on IE8. By changing the line 80 in navwidth.js got it working... Line 80: _tk_spDragProps.element.style.zIndex = ++_tk_spDragProps.element.style.zIndex;

Wednesday, 25 Mar 2009 06:30 by giles
Will this work with IE 8 - I have had a quick go at it and it doesnt seem to want to increase the size of the LHN, the cursor change is there so I know the script is running however the result isn't achieved. I can see it would be a quality little addition to any sharepoint instance.

Friday, 27 Mar 2009 03:12 by Noobtron
Have you checked my previous comment? Got it working w/ the js modification.

Friday, 27 Mar 2009 04:05 by Noobtron
When excluding all other browser than IE to run navwidth.js, and displaying the "oDivider.style is undefined" error message, it's also neccessery to modify navwidth.js to exclude setTimeout("_tk_setGrab()", 1000); This can be done by adding browser detection to the navwidth.js. -Add following line to the beginning of js under the other var. var browser=navigator.appName; -Modify setTimeout("_tk_setGrab()", 1000); as following if (browserName=="Microsoft Internet Explorer") { setTimeout("_tk_setGrab()", 1000); }

Friday, 27 Mar 2009 04:55 by Noobtron
if (browser=="Microsoft Internet Explorer") { setTimeout("_tk_setGrab()", 1000); }

Monday, 20 Apr 2009 12:32 by Jacob
This is an awesome script. Has anyone been able to solve the issue with the "object required" error?

Wednesday, 22 Apr 2009 02:33 by Niche
Jacob - comment out the alert(e.message) line and you won't see that error.

Monday, 11 May 2009 10:24 by BonD
how do i override the (2008 navigator)2wd navigation systems Giro switch, Its the Factory nav system..ty for sharing

Wednesday, 13 May 2009 11:28 by Paul
This is a great script, people on IE7 and 6 love it. Two open issues: 1. On FireFox, people continue to get the "odivider.style is undefined" error. Does the comment out that Niche posted work for everyone? 2. I have recently updated to IE8. It does not allow the users to resize anymore. Does IE have to be configured, or does the script have to be modified to re-enable the resizing?

Sunday, 5 Jul 2009 05:32 by Grant
Great script. Thanks to Noobtron for the IE8 fix above as well.

Thursday, 9 Jul 2009 03:20 by Joeri
Script looks nice, but cant get it to work here. (Im not a pro code guy) I do get a diffirent mouse figure but cant expand. What I understood from the old version is just past in default.master between <script>...</script> But read in posts here there has to be an extra line in it. Which also doesn't work. If someone can say in 1 or 2 lines what to do exactly many thanks! Would save me some time.

Thursday, 9 Jul 2009 08:06 by Mike
This script worked great. I added <script> in front of the code and </script> after the code and pasted the whole thing as is in the body section just above the </BODY> line. Awesome!! Thanks again!!!

Monday, 13 Jul 2009 04:17 by Joeri
Thanks Mike. I tried it again like you said and now it works! Well most of it, at my document site with tree view it doesn't work but made changes in here before so that might be the problem. I’ll see if I can undo some things and hope it works after that. Every other site works (Home, news, etc) So thanks Vincent for the script and Mike for explaining :)

Wednesday, 22 Jul 2009 01:19 by Brent
where do you paste the code exactly

Thursday, 13 Aug 2009 04:31 by viral shah
hey this code is not working with firefox. Any chances to make that work with firefox? Thanks for your help.

Wednesday, 19 Aug 2009 05:56 by Poolio
Commenting out alert(e.message) fixed the firefox issue for me. Thanks for that.

Tuesday, 1 Sep 2009 08:48 by kipper stiever
This script needs to have a isNaN check for the _tk_spDragProps.zIndex value as well, since it doesn't get initialized by IE: if (isNaN(_tk_spDragProps.zIndex)) _tk_spDragProps.zIndex = 1; add the line of code above right after this line and it will fix the IE issue: if (isNaN(_tk_spDragProps.dragStartLeft)) _tk_spDragProps.dragStartLeft = 150;

Tuesday, 29 Dec 2009 06:06 by Ruby
Left navigation bar issue:- If a subsite contains no navigations elements, screws up the width of the left hand navigation bar. if i hided or removed all links on using the navigation configuration on a subsite, observe the left side navigation is broken(width is change). Can someone help me in this issue?? Thanks, Ruby



Url

Email

Comments