Thursday, August 5, 2010

Left Nav Toggle with persistence

Scenario:
While now web is flooded with amazing scripts that can increase user experience, there is always a need to develop something new very specific to your client.

So my client wanted to Toggle left navigation with persistence. Simple script did the magic.

Solution Details:
You can add this script to master page to provide functionality throughout. Two main pieces which drives this are :

1. JavaScript ( to be placed in head tag )
2. HTML control/element to trigger the call to JavaScript function
3. JavaScript ( to be placed at the end of the page, so that it can execute on page load )

JavaScript( this will go in head tag ):

<script type="text/javascript" >

function getCookie(Name) {
var re = new RegExp(Name + "=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

setCookie = function setCookie(name, value) {
document.cookie = name + "=" + value + ";path=/" //cookie value is domain wide (path=/)
}


function togglefn() {

var e = document.getElementById('s4-leftpanel');
var e1 = document.getElementById('MSO_ContentTable');

if (e.style.display != "none") {
setCookie('showLeftNav', 'no');
e.style.display = "none";
e1.style.marginLeft = "10px";
}
else {
setCookie('showLeftNav', 'yes');
e.style.display = "block";
e1.style.marginLeft = "155px";
}
}
</script>
HTML element ( some where in body tag):
<a href="javascript:togglefn();">hide/show</a>

JavaScript( this will go towards page end ):
<script type="text/javascript" >
var persistedLeftNav = getCookie('showLeftNav');

if (persistedLeftNav == 'undefined') {
setCookie('showLeftNav', 'yes');
}
else {
if (persistedLeftNav == 'no') {
togglefn();
}
}
</script>

0 comments: