Solved

Urgent !! Modify javascript pull down menu script

Posted on 2006-07-18
3
574 Views
Last Modified: 2009-07-29
I have following javascript menu (navigation.html and menu.js) which is working fine. The menu assumes that all main menu items has submenu so it creates the submenu. My new requirement is sometimes there is no submenu and by clicking the main menu link it should take user to the page instead of showing a submenu. How do I modify the code to do this without giving a javascript error.

Thanks


My navigation.html:
---------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul#menu {
  width: 100px;
  list-style-type: none;
  border-top: solid 1px #b9a894;
  margin: 0;
  padding: 0;
}

ul#menu ol {
  display: none;
  text-align: right;
  list-style-type: none;
  margin: 0;
  padding: 5px;
}

ul#menu li,
  ul#menu a {
  font-family: verdana, sans-serif;
  font-size: 11px;
  color: #785a3c;
}

ul#menu li {
  border-bottom: solid 1px #b9a894;
  line-height: 15px;
}

ul#menu ol li {
  border-bottom: none;
}

ul#menu ol li:before {
  content: "- ";
}

ul#menu a {
  text-decoration: none;
  outline: none;
}

ul#menu a:hover {
  color: #539dbc;
}

ul#menu a.active {
  color: #be5028;
}
ul#menu2 {
  width: 150px;
  list-style-type: none;
  margin: 0;
  padding: 0px;
 
}
</style>
<script type="text/javascript" src="menu.js"></script>

</head>

<body>

<div id="leftnavigation">
<!--left menu with subitems-->
    <ul id="menu">
             <li>Our_information
                  <ol>
                      <li> <a href="">Link1</a></li>
                <li> <a href="">Link1</a></li>
           <li> <a href="">Link1</a></li>
           <li> <a href="">Link1</a></li>
           <li> <a href="">Link1</a></li>
                  </ol>
              </li>
            <li>Committees
               <ol>
                    <li><a href="">link2</a></li>
                    <li><a href="">link2</a></li>
                    <li><a href="">link2</a></li>
                    <li><a href="">link2</a></li>
                   <li><a href="">link2</a></li>
                 </ol>
              </li>
           <li>Training
               <ol>
                    <li><a href="">link3</a></li>
                    <li><a href="">link3</a></li>
                    <li><a href="">link3</a></li>
                    <li><a href="">link3</a></li>
                   <li><a href="">link3</a></li>
                 </ol>
              </li>
                    
                    <li> <a href="directlink.htm"> No submenu </a>
                    
                    <li> <a href="directlink2.htm"> No submenu2 </a>
        </ul>
 

</body>
</html>

Menu.js:
---------

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham) */

// Node Functions

if(!window.Node){
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}

function getChildren(node, filter){
  var result = new Array();
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    if(checkNode(children[i], filter)) result[result.length] = children[i];
  }
  return result;
}

function getChildrenByElement(node){
  return getChildren(node, "ELEMENT_NODE");
}

function getFirstChild(node, filter){
  var child;
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    child = children[i];
    if(checkNode(child, filter)) return child;
  }
  return null;
}

function getFirstChildByText(node){
  return getFirstChild(node, "TEXT_NODE");
}

function getNextSibling(node, filter){
  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
    if(checkNode(sibling, filter)) return sibling;
  }
  return null;
}
function getNextSiblingByElement(node){
        return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu() {
     
  if(activeMenu){
    activeMenu.className = "";
    getNextSiblingByElement(activeMenu).style.display = "none";
     
  }
  if(this == activeMenu){
    activeMenu = null;
  } else {
     
    this.className = "active";
    getNextSiblingByElement(this).style.display = "block";
    activeMenu = this;
  }
  return false;
}

function initMenu(){
  var menus, menu, text, a, i;
  test = document.getElementsByTagName("ul");
// alert(test.length);
  menus = getChildrenByElement(document.getElementById("menu"));
  //alert(menus.length);
  for(i = 0; i < menus.length; i++){
        
   if(pagenum==1000)
   {
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "javascript:void(0)";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
   }
   else if(i == pagenum) {
            
           menu = menus[i];
           text = getFirstChildByText(menu);
           a = document.createElement("a");
           menu.replaceChild(a, text);
           a.appendChild(text);
           a.href = "javascript:void(0)";
           a.onfocus = showMenu;
           a.focus();
    }
    else{
            
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "javascript:void(0)";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
    }
  }
}

if(location.href.toLowerCase().indexOf("Our_information")>=0){
     var pagenum = 0;
}
if(location.href.toLowerCase().indexOf("Committees")>=0){
     var pagenum = 1;
}
if(location.href.toLowerCase().indexOf("Training")>=0) {
     var pagenum = 1;
}
if(location.href.toLowerCase().indexOf("Forms")>=0) {
var pagenum = 2;
}


if(document.createElement) window.onload = initMenu;
0
Comment
Question by:tamilgirl77
  • 2
3 Comments
 
LVL 2

Accepted Solution

by:
Linky earned 500 total points
ID: 17132480
What kind of error do you get when you change it and what do you change exactly in the code?
0
 

Author Comment

by:tamilgirl77
ID: 17132588
Error comes from this line:
            <li> <a href="directlink.htm"> No submenu </a>
                 
                 <li> <a href="directlink2.htm"> No submenu2 </a>

Since this doe not have any submenu, it creates an error when you click on it,

Thanks,
0
 

Author Comment

by:tamilgirl77
ID: 17135308
I figured it out,

Thanks for your help,
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now