Solved

Urgent !! Modify javascript pull down menu script

Posted on 2006-07-18
3
606 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how can i break an array into a couple 5 39
Add somewhat of a wildcard to your javascript 12 43
HTML editor custom button 3 84
Why does my submit button remain disabled 3 33
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…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

739 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