[thelist] Sitepoints show-hide nav

Kristof Neirynck k.neirynck at belgacom.net
Fri Oct 31 19:01:33 CST 2003


lists wrote:
> Hi,
> Does anyone know what method Sitepoint used for their 'hide nav' feature on
> tutorials? I've searched high and low and can't seem to find anything other
> than commentary that it's neat. Is it just a styleswitcher using css
> show/hide? Thanks to anyone who can point me in the right direction

Use the source.

<script src="/js/x.js" type="text/javascript"></script>
<script src="/js/layoutcontrols.js" type="text/javascript"></script>

x.js contains a small dhtml api.
layoutcontrols.js contains - among other things - this:

/* dock navigation  panel functions */
function collapseSidebarPreference() {
	var hidenav = readCookie("hidenav");
	//debugStatus("hidenav=" + hidenav);
	if (hidenav == 1 && xGetElementById('maintab'))
	{
		hideMe();
		adjustlayout();
	}
}
function toggle() {
	var expiry = new Date();
	expiry.setFullYear(expiry.getFullYear()+1);
	var xmt = xPageX('maintab');
	if (xmt > 50) {
		hideMe();
		adjustlayout();
		document.cookie = "hidenav=1; expires= " + expiry.toGMTString() + "; 
path=/; domain=.sitepoint.com";
	}
	else {
	 	showMe();
	 	adjustlayout();
		document.cookie = "hidenav=0; expires= " + expiry.toGMTString() + "; 
path=/; domain=.sitepoint.com";
	}
}
function hideMe(){
	xHide('col1');
	var col2 = xGetElementById('col2');
	col2.style.margin = "0px 20% 0px 0px";
	col2.style.background = "url(/images/layout/tab-b.gif) repeat-y";
}

function showMe(){
	xShow('col1');
	var col2 = xGetElementById('col2');
	col2.style.margin = "0px 20% 0px 20%";
	col2.style.background = "url(/images/layout/tab.gif) repeat-y";
}


-- 
Kristof



More information about the thelist mailing list