Resize Quick Launch at runtime in Sharepoint

Many of us finding the solution to resize the Quick Launch on Sharepoint site. I have found the one javascript which is used to resize the Quick Launch.


But the changes is temperary when you refresh the page the changes wich we have made is not reflected.


The Script for this is as follows...

var _tk_spDragProps = new Object();

function _tk_setGrab()
{
try
{
var oNavigation = document.getElementById("LeftNavigationAreaCell");

if (oNavigation == null) return;

var oDivider = oNavigation.nextSibling;
oDivider.style.cursor = "col-resize";
oDivider.onmousedown = _tk_spStartDrag;
_tk_findNavContainers(oNavigation);

_tk_spDragProps.element = oNavigation.nextSibling;
_tk_spDragProps.sidePanel = oNavigation;
_tk_spDragProps.element.nextSibling.style.width = "0px";
_tk_spDragProps.element.style.width = "5px";
_tk_spDragProps.element.nextSibling.nextSibling.style.width = "5px";

var width = _tk_getNavWidthCookie();
if (width != null)
{
_tk_setContainerWidths(width);
_tk_spDragProps.dragStartLeft = width;
}
}
catch (e)
{
alert(e.message);
}
}

function _tk_findNavContainers(e)
{
for (var c=0; c<e.children.length; c++)
{
var oChild = e.children[c];

if (oChild.id.indexOf("TreeViewNavigationManager") > 0)
_tk_spDragProps.navMan = oChild;

if (oChild.id.indexOf("TreeViewRememberScroll") > 0)
{
_tk_spDragProps.navScroll = oChild;
return;
}
_tk_findNavContainers(oChild);
}
}

function _tk_spStartDrag(e)
{
_tk_sp_startDrag(window.event);
}

setTimeout("_tk_setGrab()", 50);

function _tk_sp_startDrag(e)
{
var x = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
_tk_spDragProps.mouseX = x;
_tk_spDragProps.dragStartLeft = parseInt(_tk_spDragProps.sidePanel.style.width, 10);

if (isNaN(_tk_spDragProps.dragStartLeft)) _tk_spDragProps.dragStartLeft = 150;

_tk_spDragProps.element.style.zIndex = ++_tk_spDragProps.zIndex;

document.attachEvent("onmousemove", _tk_sp_dragMove);
document.attachEvent("onmouseup", _tk_sp_dragEnd);
window.event.cancelBubble = true;
window.event.returnValue = false;
}

function _tk_setContainerWidths(width)
{
_tk_spDragProps.sidePanel.style.width = width + "px";

if (_tk_spDragProps.navScroll != null)
_tk_spDragProps.navScroll.style.width = _tk_spDragProps.sidePanel.style.width;

if (_tk_spDragProps.navMan != null)
_tk_spDragProps.navMan.style.width = _tk_spDragProps.sidePanel.style.width;
}

function _tk_sp_dragMove()
{
var x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
var width = (_tk_spDragProps.dragStartLeft + x - _tk_spDragProps.mouseX);
if (width < 150) width = 150;

_tk_setContainerWidths(width);

window.event.cancelBubble = true;
window.event.returnValue = false;
}

function _tk_getNavWidthCookie()
{
var oCookies = document.cookie;
var arCookies = oCookies.split(";");
for (var c=0;c <arCookies.length; c++)
{
var arCookie = arCookies[c].split("=");
if (arCookie[0].replace(/^\s+\s+$/g, '') == "tkNavWidth")
return arCookie[1];
}

return null;
}

function _tk_setNavWidthCookie(width)
{
document.cookie = "tkNavWidth=" + width + "; path=/";
}

function _tk_sp_dragEnd()
{
_tk_setNavWidthCookie(parseInt(_tk_spDragProps.sidePanel.style.width));
document.detachEvent("onmousemove", _tk_sp_dragMove);
document.detachEvent("onmouseup", _tk_sp_dragEnd);
}