Solved

Urgent !! Modify javascript pull down menu script

Posted on 2006-07-18
3
583 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

943 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

10 Experts available now in Live!

Get 1:1 Help Now