Friday, September 19, 2008

Hiding the Leftnavigator of SharePoint site Using JavaScript

I found in manycases of SharePoint site customization, people usually don't like the default leftnavigator option in the home page. They want to display some other customized leftnavigator or just want to have the page with out leftnavigator. This can be done easily by creating a masterpage with out leftnavigator, but if you would like to display it based on the pages/sites, for example leftnavigator is not required in homepage but its required in some other pages and in some subsites. In many of these kind of scenarios the following script and the content editor webpart are helping me lot...

1.Open the master page in SharePoint designer and the find out the Table Tag responsible for displaying the entire leftnavigator contents.

2.Just give a ID for the Tag, It should look something similar to the below tag(without the "_" in HTML tags. [make sure you are taking backup of the existing master page]
<_TABLE height="100%" id ="leftNavigatorTable" class=ms-navframe CELLPADDING=0 CELLSPACING=0 border="0">

3.Publish and approve the masterpage.

4.Open the page where you want to hide the leftnavigator.

5.Add a content editor webpart and add the following script(modify the script tag). This will hide the leftnavigator.
<_script>
document.getElementById('leftNavigatorTable').style.visibility = "hidden";
document.getElementById('leftNavigatorTable').style.display = "none";


6.If you don't want to use contenteditor webpart you can just call the following javascript function in the onload function of the BODY tag in the master page. This will hide the leftnavigator only in default.aspx

function HideLeftNavigator()
{
var url;

url = window.location.toString().split('/');
document.getElementById('leftNavigatorTable').style.visibility = "hidden";
document.getElementById('leftNavigatorTable').style.display = "none";

var length = url.length;

if(url[length-1].toLowerCase() != "default.aspx")
{
document.getElementById('leftNavigatorTable').style.visibility = "visible";
document.getElementById('leftNavigatorTable').style.display = "inline";
}
}


Happy Learning!!!!!!!

No comments: