SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hide/show nav info

    hi!
    first of all happy new year to all of u and wish to u all the best at home and at work!
    ok, thats it, now......
    im shocked about your script in articles pages where u can show and hide the navbar, its amazing!!!
    i tryed in many ways to do it but without good results!
    ive downloaded all x library from cross-browser.com but there r not the finished script for that effect and all my tempt to do it has failed!
    my question is if u can help me about this effect or if i have to pay u for this java script!
    if i have to pay u tell me please how much u want (hope it isnt too much lol)!
    thats it...
    thanx in advance!
    sven macolic

  2. #2
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi hyperimage,
    I've moved this to what I think is a more appropriate forum.

    As far as the navigation column on our article pages, this is all client-side scripting so it's reasonably easy to see what code is being used. Here's the relevant section:

    Code:
    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";
    }
    As you can see, this is using the x cross-browser library.

    hideMe() hides column 1 and then resizes column 2 so that its left margin is zero.

    showMe() shows column 1 and the resizes column 2 to give it a 20% margin once more.

    Here's the function we use to toggle it:

    Code:
    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";
    	}
    }
    You can see that this calls either hideMe() or showMe(), and sets a cookie.

    Finally, the following function is called when the page loads, and its purpose is to check to see if there's a cookie, and if so, to set the visibility of the navigation panel according to the cookie.

    Code:
    /* dock navigation  panel functions */
    function collapseSidebarPreference() {
    	var hidenav = readCookie("hidenav");
    	//debugStatus("hidenav=" + hidenav);
    	if (hidenav == 1 && xGetElementById('maintab'))
    	{
    		hideMe();
    		adjustlayout();
    	}
    }
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff

  3. #3
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanx for your fast answer!!!! :)

    one question more to be sure what im doing!
    if i have <table><tr><td>this one i want to show and hide</td><td>this one have to be resizable</td></tr><table>
    can u tell me what i have to put inside this table dashes to interact with the script???
    i have an idea but im a novice in java couse till today ive programmed in php hypertext (which is more easyer then java certainly!!!).
    thanx again really!!
    ps: i would put on my website the link to sitepoint


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •