Navigational aid example code

Following are the basic parts to enable the navigation system described in Navigational aid. You can also download the example from Mobinav example files.

File structure

Figure: File structure for the navigational aid files

common.js

Initialize the funtions.

window.onload = function () {
   generateMobinav();
   createToggleableContent();
   }

Set the initial state of Mobinav to off.

var mobinavState = "off";

Generate a small collection of quick links that are constructed from the document headings and links contained in the navigation.

// Fetch multiple elements, sort them,
// and return them in an array.

function getElementsByTagNames(list,obj) {
   if (!obj) var obj = document;
   var tagNames = list.split(',');
   var resultArray = new Array();
   for (var i=0;i<tagNames.length;i++) {
   var tags = obj.getElementsByTagName(tagNames[i]);
      for (var j=0;j<tags.length;j++) {
        resultArray.push(tags[j]);
      }
}
var testNode = resultArray[0];
   if (!testNode) return [];
   if (testNode.sourceIndex) {
      resultArray.sort(function (a,b) {
      return a.sourceIndex - b.sourceIndex;
      });
   }
     else if (testNode.compareDocumentPosition) {
        resultArray.sort(function (a,b) {
        return 3 - (a.compareDocumentPosition(b) & 6);
        });
   }
   return resultArray;
}

Generate the Mobinav icon and link that mobile device users select to launch the Movinav menu and place the icon into the document.

function generateMobinav() {
   if(document.getElementById && document.getElementsByName) {
		
// Create container div for all elements inside Mobinav
   var mobinav = document.createElement('div');
   mobinav.id = 'mobinav';
		
// Create the Mobinav icon and link
   var mobinavLink = document.createElement('a');
   mobinavLink.href = "#";
   mobinavLink.onclick = toggleMobinav;
   mobinavLink.innerHTML = "Naviagate";
   mobinavLink.style.margin = "0 0 0 1px";
   mobinavLink.id = "mobinavToggleLink";
   mobinav.appendChild(mobinavLink);
		
// Create the containing div
   var base = document.createElement('div');
   base.id = "mobinavContent";
   var headings = getElementsByTagNames('h2,h3,h4,h5');
		
// Generate quick links based on navigation
   var links = document.getElementById('navigation').getElementsByTagName('a');
   var linkList = document.createElement('ol');
   linkList.className = "navList";
		
// Go through navigation links and generate corresponding links
   for(i = 0; i < links.length; i++) {
      var linkEntry = document.createElement('li');
      linkEntry.className = "navLink";
      var link = document.createElement('a');
      link.innerHTML = links[i].innerHTML;
      link.href = links[i].href;
      linkEntry.appendChild(link);
      linkList.appendChild(linkEntry);
      }	

// Generate table of contents based on document headings

   var linkList2 = document.createElement('ol');
   linkList2.className = "mobinavList";

// Go through headings and generate corresponding links
   for(i = 0; i < headings.length; i++) {
      var linkEntry = document.createElement('li');
      linkEntry.className = "mobinavLink";
      var link = document.createElement('a');
      link.innerHTML = headings[i].innerHTML;
      linkEntry.appendChild(link);
      linkList2.appendChild(linkEntry);
      var headerId = headings[i].id || 'link' + i;
      link.href = '#' + headerId;
      link.onclick = toggleMobinav;
      headings[i].id = headerId;
      }
		
// Append the link lists to the containing div
     base.appendChild(linkList);
   base.appendChild(linkList2);
   mobinav.appendChild(base);
		
// Append the containing div to body
   document.getElementsByTagName('body')[0].appendChild(mobinav);
   }
}

Show and hide the Mobinav icon and link based on the state.

function toggleMobinav() {
   if(mobinavState == "on") {
      document.getElementById("mobinavContent").style.display = "none";
      mobinavState = "off";
   } else {
      document.getElementById("mobinavContent").style.display = "block";
      mobinavState = "on";
   }
}

main.css

Website style sheet.

/*	Common */

html, body {
   margin: 0;
   padding: 0;
}

.hidden {
   display: none;
}

/* Typography */

body {
   font-size:62.5%;
   font-family: "Lucida Grande", Trebuchet, Arial, Verdana, sans-serif;
   color: #555555;
}

h1 {
   display: block;
   width: 209px;
   height: 44px;
   margin: 15px 0 0 5px;
   padding: 0;
   background: #fff url('../pics/logo_example.gif') no-repeat top left;
}

   h1 span {
      display: none;
   }

h2 {
   margin: 15px;
   padding: 0;
   font-size: 1.6em;
   font-weight: bold;
   color: #333333;
   background: transparent;
}

p {
   margin: 0 15px 15px 15px;
   padding: 0;
   font-size: 1.2em;
}

/* Layout Elements */

body {
   background: #fff url('../pics/bg_main_gradient.gif') repeat-x top left;
}

div#container {
   position: relative;
   width: 715px;
   margin: 0 auto 0 auto;
   padding: 0;
}

ul#navigation {
   float: left;
   display: inline;
   width: 705px;
   list-style: none;
   margin: 6px 5px 0 5px;
   padding: 0;
   background: #565656 url('../pics/bg_navigation.gif') repeat-x top left;
	}

ul#navigation li {
   float: left;
   width: 70px;
   margin: 0;
   padding: 0;
   }
		
ul#navigation a {
   display: block;
   height: 20px;
   margin: 0;
   padding: 10px 10px 0 10px;
   font-size: 1.1em;
   color: #fff;
   text-decoration: none;
   text-align: center;
   }
		
ul#navigation a:hover {
   font-weight: bold;
   background: #565656 url('../pics/bg_navigation.gif') repeat-x 0px -30px;
   }
		
ul#navigation .active {
   background: #44567a url('../pics/bg_navigation_active.gif') repeat-x top left;
   }
		
ul#navigation .active:hover {
   background: #44567a url('../pics/bg_navigation_active.gif') repeat-x top left;
   }
		
div#content {
   float: left;
   width: 705px;
   margin: 0;
   padding: 0 5px 0 5px;
   background: #fff url('../pics/bg_main_shadow.gif') no-repeat top left;
   }
	
div#content div#header {
   width: 705px;
   height: 140px;
   margin: 1px 0 0 0;
   padding: 0;
   background: #fff url('../pics/gfx_header.jpg') no-repeat top left;
   }
		

mobinav.css

Mobinav style sheet.

/* Mobinav Stylesheet */

#mobinav {
   position: absolute;
   top: 0;
   left: 5px;
   padding: 1px;
   }
#mobinavToggleLink {
   color: #fff;
   padding: 2px 2px 2px 12px;
   background: #000000 url('../pics/mobinav.gif') no-repeat center left;
   }

#mobinav a {
   color: #fff;
   text-decoration: none;
   }

#mobinavContent {
   margin: 0;
   padding: 0;
   display: none;
   }

#mobinavContent ol {
   margin: 0;
   padding: 0;
   list-style: none;
   }
				
#mobinavContent .navList {
   background: #933a3a;
   }
					
#mobinavContent .mobinavList {
   background: #3a7b93;
   }
				
#mobinavContent li {
   margin: 0 0 0 20px;
   padding: 0 0 0 14px;
   }

#mobinavContent .navLink {
   background: #501b1b url('../pics/gfx_external_link.gif') no-repeat center left;
   }

#mobinavContent .navLink:hover {
   background: #732727 url('../pics/gfx_external_link.gif') no-repeat center left;
   }

#mobinavContent .navLink a:hover {
   background: #732727;
   }
					
#mobinavContent .mobinavLink {
   background: #1b3950;
   font-style: italic;
   }
					
#mobinavContent .mobinavLink:hover {
   background: #275070;
   }
						
#mobinavContent .mobinavLink a:hover {
   background: #275070;
   }
				
#mobinavContent a {
   display: block;
   margin: 0;
   padding: 0.5em;
   color: #fff;
   text-decoration: none;
   }

index.html

Index page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta name="author" content="Nokia">
<meta name="description" content="This example site illustrates the use of a navigational aid for mobile devices.">
<meta name="keywords" content="S60, browser, mobile, browsing">

<title>Navigational aid - Main</title>

<link rel="stylesheet" href="styles/main.css" type="text/css" media="all">
<link rel="stylesheet" href="styles/mobinav.css" type="text/css" media="all">
<link rel="shortcut icon" href="pics/favicon.gif" type="image/x-icon">
<link rel="icon" href="pics/favicon.gif" type="image/x-icon">

<script type="text/javascript" src="scripts/common.js"></script>
</head>

<body>
<div id="container">

<h1><span>Navigational aid for mobile devices</span></h1>
   <ul id="navigation">
      <li><a href="index.html" class="active">Home</a></li><li><a href="Page1.html">Page 1</a></li>
      <li><a href="Page2.html">Page 2</a></li>
      <li><a href="Page3.html">Page 3</a></li>
    </ul> <div id="content"><div id="header">
</div>

<h2>Index page</h2>
<p>Index page paragraph text</p>

</body>
</html>

Page1.html

Pages 1, 2, and 3 are the same except for the list item that has JavaScript applied to highlight it (<li><a href="Page1.html" class="active">Page 1</a></li>).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta name="author" content="Nokia">
<meta name="description" content="This example site illustrates the use of a navigational aid for mobile devices.">
<meta name="keywords" content="S60, browser, mobile, browsing">

<title>Navigational aid - Page 1</title>

<link rel="stylesheet" href="styles/main.css" type="text/css" media="all">
<link rel="stylesheet" href="styles/mobinav.css" type="text/css" media="all">
<link rel="shortcut icon" href="pics/favicon.gif" type="image/x-icon">
<link rel="icon" href="pics/favicon.gif" type="image/x-icon">

<script type="text/javascript" src="scripts/common.js"></script>

</head>

<body>
<div id="container">
<h1><span>Navigational aid for mobile devices</span></h1>
   <ul id="navigation">
      <li><a href="index.html">Home</a></li>
      <li><a href="Page1.html" class="active">Page 1</a></li>
      <li><a href="Page2.html">Page 2</a></li>
      <li><a href="Page3.html">Page 3</a></li>
   </ul>
<div id="content">

<h2>Page 1</h2>
<p>Page 1 paragraph text</p>

</body>
</html>

Page2.html

Page 2 is the same as Page 1 except for the JavaScript applied to make the Page 2 list item active.

<body>
<div id="container">
<h1><span>Navigational aid for mobile devices</span></h1>
   <ul id="navigation">
      <li><a href="index.html">Home</a></li>
      <li><a href="Page1.html">Page 1</a></li>
      <li><a href="Page2.html" class="active">Page 2</a></li>
      <li><a href="Page3.html">Page 3</a></li>
   </ul>
<div id="content">

<h2>Page 2</h2>
<p>Page 2 paragraph text</p>

</body>

Page3.html

Page 3 is the same as Page 1 except for the JavaScript applied to make the Page 3 list item active.

<body>
<div id="container">
<h1><span>Navigational aid for mobile devices</span></h1>
   <ul id="navigation">
      <li><a href="index.html">Home</a></li>
      <li><a href="Page1.html">Page 1</a></li>
      <li><a href="Page2.html">Page 2</a></li>
      <li><a href="Page3.html" class="active">Page 3</a></li>
   </ul>
<div id="content">

<h2>Page 3</h2>
<p>Page 3 paragraph text</p>

</body>