JavaScript Navigation, Sectioning and Consistency

azcn2503 · Mon Jun 29, 2009 4:38 am

This section hasn't seen a good injection of programming in a long time.

I'm going to provide the injection.

Basically I am going to demonstrate how to create a navigation scheme that relies on JavaScript. Because it relies on JavaScript, you can guarantee that it will only work on modern browsers and very modern mobile browsers such as Opera Mobile, Safari for iPhone etc. it's not as robust as a PHP navigation scheme, but some people can't afford to host on a PHP web server, yet still want the scalability of a navigation scheme that doesn't require you to update every single .html file every time you add a new section, or change your layout slightly...

Because of the way the navigation scheme is coded, it pretty much forces consistency.

I am going to demonstrate how to create a tabbed website interface that dynamically shows and hides sections, and changes styles of elements on the page depending on where you clicked, but without refreshing the page or ever loading any additional content (nothing via background header requests either aka AJAX).

I am assuming you have a basic knowledge of JavaScript and are proficient in (X)HTML already (ie you know everything).

So let's begin:

You'll always need a grabber piece of code, something that picks up the elements in your page so that you can change them, based on their ID attribute.

Code:

// Grabber function
function grab(o){
   return document.all?document.all[o]:document.getElementById?document.getElementById(o):"";
}

You will need code that can switch between sections. I'm going to use two functions for this. We need one function to convert section ID text and one function to display and hide the sections, and change the section links (tabs in this case):

Code:

// Section text parse function
function parseSectionName(s){
   return s.replace(/\ /g,"-").toLowerCase(); // Yes this is a regular expression
}
// Section hiding and displaying function
function displaySection(n){
   for(var i=0;i<sections.length;i++){
      var sectionLink=grab("section-link_"+i);
      var sectionDiv=grab("section_"+parseSectionName(sections[i]));
      sectionLink.className=n==i?"section-link_active":"section-link"; // alters appearance of the section links (tabs)
      sectionDiv.className=n==i?"section_active":"section"; // alters appearance of the sections (displays or hides them)
   }
}

You'll also need to define your sections and tabs in an array. The sections and tabs can share the same array, it's no problem.

Code:

// Sections and tabs
var sections=[
   "Home",
   "Products",
   "Company Background",
   "Contact Information"
];

You can quite easily display these tabs using (CSS formatted) links like so:

Code:

<div id="tabs"><script type="text/javascript"><!--
   for(var i=0;i<sections.length;i++){
      document.write("<a href=\"javascript:displaySection("+i+");\" id=\"section-link_"+i+"\" class=\"section-link\">"+sections[i]+"</a>");
   }
//--></script></div>

Now you need to manually add your sections like so:

Code:

<div id="section_home" class="section">Home</div>
<div id="section_products" class="section">Products</div>
<div id="section_company-background" class="section">Company Background</div>
<div id="section_contact-information" class="section">Contact Information</div>

The important bits of CSS you'll need are:

Code:

#tabs a{
   padding-left:10px; padding-right:10px;
}
/* feel free to add borders, background colours etc. to the section-link classes below */
#tabs a.section-link{
   font-weight:normal;
}
#tabs a.section-link_active{
   font-weight:bold;
}
/* feel free to add borders, background colours etc. to the section-link classes above */
.section{
   display:none;
}
.section_active{
   display:block;
   padding:10px;
}

When the page loads, you might want to load the first section, so you may want to change your body tag as follows:

Code:

You may also want to be able to pass a link to a friend so that a section other than the starter tab (0) appears. To do this, we will need to invoke a new function again from the body tag. The function we need is:

Code:

function displaySectionFromURI(){
   var sectionNumber=unescape(location).split("?section=")[1];
   if(!isNaN(sectionNumber)){ if(sections[sectionNumber]){ displaySection(sectionNumber); } }
}

Then just make sure the body tag looks something like this:

Code:

That way, you can send a link like pagename.html?section=2 to load the "Company Background" page for example.

I hope this has been informative. I understand that it is very technical, but it will give you something to work with for a while. Of course, as this is a forum, I want you to reply and tell me if you have any problems or if you have added to it in some way.

Update: An example of a site I made using this code:

Spoiler for index.html:

Spoiler for kirkpatrick.js:

Spoiler for style.css:

Update note for admins: I already provided this update but it seems it was reverted back to the original post. Can you look in to why this happened?

Scottie · Thu Aug 13, 2009 12:42 pm

Interesting. I may have use of this later.

JavaScript Navigation, Sectioning and Consistency

Who is online