SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how does the 'hide nav' work in 'articles' on sitepoint

    Hi,

    Could anyone suggest how the 'hide panel'/ 'show panel' works in the article section of this site. It shows and hides the navigation.

  2. #2
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Not looked at it, but I guess the Nav pane is a DIV which simply has its style toggled between hidden and visible.

    (If it "slides" the pane open and closed then it may just be setting its X coordinate to a negative value thus making the pane "seem" to disappear).
    Ian Anderson
    www.siteguru.co.uk

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    thanks for the reply. Im really new to jscript, so would it be along the lines of getting the div by id, then getting the style attribute and changing it to visible/hidden on click.

    Any chance of an illustration with code?

  4. #4
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    My résumé uses show/hide DIVs for each segment/block. The JS code is very short and simple ...

    Code:
    var ie = (document.all) ? true : false;
    var n4 = (document.layers) ? true : false;
    var moz = (document.getElementById) ? true : false;
    
    var thepage = self.location.href;
    if (thepage.indexOf("#") != -1) {
    	thepage = thepage.substr (0, thepage.indexOf("#"));
    }
    
    function switchDiv (divID, oldDivID) {
    	if (ie) {
    		document.all[oldDivID].style.visibility = "hidden";
    		document.all[divID].style.visibility = "visible";
    	}
    	if (moz) {
    		document.getElementById(oldDivID).style.visibility = "hidden";
    		document.getElementById(divID).style.visibility = "visible";
    	}
    	if (n4) {
    		self.location.href = thepage + "#" + divID +"n4";
    	}
    }
    Ian Anderson
    www.siteguru.co.uk

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI,

    Thanks for that! I get it! Just one question though....dont all browsers recognise the document.getElementById then?

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE4 and Netscape 4 don't support document.getElementById(), but most newer browsers that support JavaScript do. Opera didn't really support it until version 7. Opera 9.1 is the current version.

    Mozilla browsers aren't the only browsers to support using DOM1+. Naming the variable "moz" might be misleading to some.

    I recommend you read up on JavaScript Best Practices.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    PS - I wrote that base code several years ago. Haven't revised it yet cos it works for most people.
    Ian Anderson
    www.siteguru.co.uk

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good.

    The scary thing is that I see some people writing new scripts like that. For me, Netscape 4 is too short to ride the roller-coaster of stylesheets and most scripts, figuratively speaking.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, thanks guys. So all modern browsers should be able to handle the getElementById then.

    Thanks Kravvitz, i'll check that link out!


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
  •