Javascript menu conflict
<p>I'm having a Javascript conflict. I have a vertical javascript left nav menu and a horizontal javascript time zone menu. Working code for both but when I call them within the same page, the menu tree does not work. If i take out the <code>&lt;SCRIPT src="timezone.js" type=text/javascript&gt;&lt;/SCRIPT&gt;</code> tag the menu works fine but the time zone is negated. <code>&lt;div&gt;</code> issue?</p>

<h2>html</h2>

<pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

        &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"&gt;
        &lt;head&gt;

            &lt;meta http-equiv="Content-Language" content="en-us" /&gt;
            &lt;title&gt;TEST&lt;/title&gt;





        &lt;link rel="stylesheet" type="text/css" href="test.css" /&gt;


        &lt;SCRIPT src="BarMenu.js" type=text/javascript&gt;&lt;/SCRIPT&gt;

        &lt;/head&gt;

        &lt;body onload="startw();" style="background-color: #808080"&gt;  


        &lt;SCRIPT type=text/javascript&gt;
        /* preload images, you can remove this code */
        img1 = new Image();
        img1.src = "images/tree-node.gif";
        img2 = new Image();
        img2.src = "images/tree-node-open.gif";
        img3 = new Image();
        img3.src = "images/tree-leaf.gif";
        img4 = new Image();
        img4.src = "images/tree-leaf-last.gif";

        window.onload = function() {
            var barMenu3a = new BarMenu('bar-menu3a');
            barMenu3a.box1Hover = false;
            barMenu3a.box2Hover = false;
            barMenu3a.init();
            var barMenu3b = new BarMenu('bar-menu3b');
            barMenu3b.box1Hover = false;
            barMenu3b.box2Hover = false;
            barMenu3b.init();
            var barMenu3c = new BarMenu('bar-menu3c');
            barMenu3c.box1Hover = false;
            barMenu3c.box2Hover = false;
            barMenu3c.init();
        }
        &lt;/SCRIPT&gt;

        &lt;table id="MainTable" cellspacing="0" cellpadding="0" style="width: 800px" class="style8"&gt;
            &lt;tr&gt;
             &lt;td colspan="2" style="height: 91px" class="style10"&gt;
             &lt;span class="FooterText"&gt; &lt;br /&gt;
             &lt;/span&gt;&lt;br /&gt;
             &lt;/td&gt;
        &lt;tr&gt;     
        &lt;td colspan="2"&gt;


        &lt;SCRIPT src="timezone.js" type=text/javascript&gt;&lt;/SCRIPT&gt; 
        &lt;div id="zonediv" class="GreenBar"&gt;&lt;/div&gt;


            &lt;/td&gt; 
            &lt;/tr&gt;

        &lt;tr&gt;    
             &lt;td valign="top" style="width: 200px" class="LeftNav"&gt;

        &lt;DIV class=left&gt;
        &lt;TABLE cellSpacing=0 cellPadding=0 width="100%"&gt;
          &lt;TBODY&gt;
          &lt;TR&gt;
            &lt;TD class=top&gt;» Products&lt;/TD&gt;&lt;/TR&gt;
          &lt;TR&gt;
            &lt;TD class=section&gt;
              &lt;DIV class=bar-menu id=bar-menu3a&gt;
              &lt;TABLE cellSpacing=0 cellPadding=0 width="100%"&gt;
                &lt;TBODY&gt;
                &lt;TR&gt;
                  &lt;TD&gt;
                    &lt;DIV&gt;&lt;SPAN class=box1&gt;Product One&lt;/SPAN&gt;&lt;/DIV&gt;
                    &lt;DIV class=section&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Overview&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Features&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2-last&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Requirements&lt;/A&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/TD&gt;&lt;/TR&gt;
                &lt;TR&gt;
                  &lt;TD height=2&gt;&lt;/TD&gt;&lt;/TR&gt;
                &lt;TR&gt;
                  &lt;TD&gt;
                    &lt;DIV&gt;&lt;SPAN class=box1&gt;Product Two&lt;/SPAN&gt;&lt;/DIV&gt;
                    &lt;DIV class=section&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Overwiev&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Features&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Requirements&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Screenshots&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Flash 
                    Demos&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2-last&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Live 
                    Demo&lt;/A&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/TD&gt;&lt;/TR&gt;
                &lt;TR&gt;
                  &lt;TD height=2&gt;&lt;/TD&gt;&lt;/TR&gt;
                &lt;TR&gt;
                  &lt;TD&gt;
                    &lt;DIV&gt;&lt;SPAN class=box1&gt;Product Three&lt;/SPAN&gt;&lt;/DIV&gt;
                    &lt;DIV class=section&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Overview&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Features&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2-last&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Requirements&lt;/A&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/TD&gt;&lt;/TR&gt;
                &lt;TR&gt;
                  &lt;TD height=2&gt;&lt;/TD&gt;&lt;/TR&gt;
                &lt;TR&gt;
                  &lt;TD&gt;
                    &lt;DIV&gt;&lt;SPAN class=box1&gt;Product Four&lt;/SPAN&gt;&lt;/DIV&gt;
                    &lt;DIV class=section&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Overview&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Features&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Requirements&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Screenshots&lt;/A&gt;&lt;/DIV&gt;
                    &lt;DIV class=box2-last&gt;&lt;A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html"&gt;Live 
                    Demo&lt;/A&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/DIV&gt;&lt;/TD&gt;&lt;/TR&gt;
         &lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/DIV&gt;
        &lt;/td&gt;&lt;/tr&gt;&lt;/tr&gt;
        &lt;/table&gt;


        &lt;/body&gt;

        &lt;/html&gt;
</code></pre>

<h2>BarMenu.js</h2>

<pre><code>function BarMenu(id) {
    this.box1Hover = true;
    this.box2Hover = true;
    this.highlightActive = false;

    this.init = function() {
        if (!document.getElementById(this.id)) {
            alert("Element '"+this.id+"' does not exist in this document. BarMenu cannot be initialized");
            return;
        }
        this.parse(document.getElementById(this.id).childNodes, this.tree, this.id);
        this.load();
        if (window.attachEvent) {
            window.attachEvent("onunload", function(e) { self.save(); });
        } else if (window.addEventListener) {
            window.addEventListener("unload", function(e) { self.save(); }, false);
        }
    }

    this.parse = function(nodes, tree, id) {
        for (var i = 0; i &lt; nodes.length; i++) {
            if (nodes[i].nodeType != 1) {
                continue;
            }
            if (nodes[i].className) {
                if ("box1" == nodes[i].className.substr(0, 4)) {
                    nodes[i].id = id + "-" + tree.length;
                    tree[tree.length] = new Array();
                    eval('nodes[i].onmouseover = function() { self.box1over("'+nodes[i].id+'"); }');
                    eval('nodes[i].onmouseout = function() { self.box1out("'+nodes[i].id+'"); }');
                    eval('nodes[i].onclick = function() { self.box1click("'+nodes[i].id+'"); }');
                }
                if ("section" == nodes[i].className) {
                    id = id + "-" + (tree.length - 1);
                    nodes[i].id = id + "-section";
                    tree = tree[tree.length - 1];
                }
                if ("box2" == nodes[i].className.substr(0, 4)) {
                    nodes[i].id = id + "-" + tree.length;
                    tree[tree.length] = new Array();
                    eval('nodes[i].onmouseover = function() { self.box2over("'+nodes[i].id+'", "'+nodes[i].className+'"); }');
                    eval('nodes[i].onmouseout = function() { self.box2out("'+nodes[i].id+'", "'+nodes[i].className+'"); }');
                }
            }
            if (this.highlightActive &amp;&amp; nodes[i].tagName &amp;&amp; nodes[i].tagName == "A") {
                if (document.location.href == nodes[i].href) {
                    nodes[i].className = (nodes[i].className ? ' active' : 'active')
                }
            }
            if (nodes[i].childNodes) {
                this.parse(nodes[i].childNodes, tree, id);
            }
        }
    }

    this.box1over = function(id) {
        if (!this.box1Hover) return;
        if (!document.getElementById(id)) return;
        document.getElementById(id).className = (this.id_openbox == id ? "box1-open-hover" : "box1-hover");
    }

    this.box1out = function(id) {
        if (!this.box1Hover) return;
        if (!document.getElementById(id)) return;
        document.getElementById(id).className = (this.id_openbox == id ? "box1-open" : "box1");
    }

    this.box1click = function(id) {
        if (!document.getElementById(id)) {
            return;
        }
        var id_openbox = this.id_openbox;
        if (this.id_openbox) {
            if (!document.getElementById(id + "-section")) {
                return;
            }
            this.hide();
            if (id_openbox == id) {
                if (this.box1hover) {
                    document.getElementById(id_openbox).className = "box1-hover";
                } else {
                    document.getElementById(id_openbox).className = "box1";
                }
            } else {
                document.getElementById(id_openbox).className = "box1";
            }
        }
        if (id_openbox != id) {
            this.show(id);
            var className = document.getElementById(id).className;
            if ("box1-hover" == className) {
                document.getElementById(id).className = "box1-open-hover";
            }
            if ("box1" == className) {
                document.getElementById(id).className = "box1-open";
            }
        }
    }

    this.box2over = function(id, className) {
        if (!this.box2Hover) return;
        if (!document.getElementById(id)) return;
        document.getElementById(id).className = className + "-hover";
    }

    this.box2out = function(id, className) {
        if (!this.box2Hover) return;
        if (!document.getElementById(id)) return;
        document.getElementById(id).className = className;
    }

    this.show = function(id) {
        if (document.getElementById(id + "-section")) {
            document.getElementById(id + "-section").style.display = "block";
            this.id_openbox = id;
        }
    }

    this.hide = function() {
        document.getElementById(this.id_openbox + "-section").style.display = "none";
        this.id_openbox = "";
    }

    this.save = function() {
        if (this.id_openbox) {
            this.cookie.set(this.id, this.id_openbox);
        } else {
            this.cookie.del(this.id);
        }
    }

    this.load = function() {
        var id_openbox = this.cookie.get(this.id);
        if (id_openbox) {
            this.show(id_openbox);
            document.getElementById(id_openbox).className = "box1-open";
        }
    }

    function Cookie() {
        this.get = function(name) {
            var cookies = document.cookie.split(";");
            for (var i = 0; i &lt; cookies.length; i++) {
                var a = cookies[i].split("=");
                if (a.length == 2) {
                    a[0] = a[0].trim();
                    a[1] = a[1].trim();
                    if (a[0] == name) {
                        return unescape(a[1]);
                    }
                }
            }
            return "";
        }
        this.set = function(name, value) {
            document.cookie = name + "=" + escape(value);
        }
        this.del = function(name) {
            document.cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT";
        }
    }

    var self = this;
    this.id = id;
    this.tree = new Array();
    this.cookie = new Cookie();
    this.id_openbox = "";
}

if (typeof String.prototype.trim == "undefined") {
    String.prototype.trim = function() {
        var s = this.replace(/^\s*/, "");
        return s.replace(/\s*$/, "");
    }
}
</code></pre>

<h2>timezone.js</h2>

<pre><code>var wd=['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var D=[['Bucharest',120,60],['Madrid',60,60],['New York',-300,60],['Nairobi',180,0]]//city,standard time zone(minutes), DST(minutes)

//add in the array your cities,STZ, DST
function calc(){
var spans=document.getElementById('zonediv').getElementsByTagName('span')
for(var i=0;i&lt;D.length;i++){
var t=new Date();
t.setTime(t.getTime()+(t.getTimezoneOffset()*60000)+((D[i][1]+D[i][2])*60000));//the zone's time
var Dy=t.getFullYear();
var Dd=t.getDate()&lt;10?'0'+t.getDate():t.getDate();
var Dm=t.getMonth()&lt;10?'0'+(t.getMonth()+1):t.getMonth()+1;
var Dh=t.getHours()&lt;10?'0'+t.getHours():t.getHours(); 
var Di=t.getMinutes()&lt;10?'0'+t.getMinutes():t.getMinutes();
var Ds=t.getSeconds()&lt;10?'0'+t.getSeconds():t.getSeconds();
var Dz=wd[t.getDay()];
spans[i].firstChild.data=Dh+':'+Di+':'+Ds;
}
setTimeout('calc()',1000)
}
onload=function(){
var root = document.getElementById('zonediv');
for(var i=0;i&lt;D.length;i++){
root.appendChild(document.createTextNode(D[i][0]+' '))
var sp= document.createElement('span');
sp.appendChild(document.createTextNode('span'));
root.appendChild(sp);root.appendChild(document.createTextNode(' | '));
}
calc();
}
</code></pre>

<h2>test.css</h2>

<pre><code>/* Left Navigation Menu */


DIV.left {
    background-image: url('images/LeftNav.gif'); WIDTH: 190px; HEIGHT: 100%
}
TD.top {
    FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #D5D7C0; TEXT-INDENT: 10px; LINE-HEIGHT: 26px; font-family: Verdana;
background-color:#3D3D3D;
/*background-image: url('images/LeftNav.gif');*/
}
TD.section {
    PADDING-RIGHT: 12px; PADDING-LEFT: 12px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px
}
.bar-menu {
    moz-user-select: none
}
.bar-menu .box1 {
    PADDING-LEFT: 19px; BACKGROUND: url(images/tree-node.gif) no-repeat; CURSOR: default
}
.bar-menu .box1-open {
    PADDING-LEFT: 19px; BACKGROUND: url(images/tree-node-open.gif) no-repeat; CURSOR: default
}
.bar-menu .box1 {
    font-family: Verdana;
    font-size: 13px;
    color:#3D3D3D;

}



.bar-menu .box1-open {
    font-family: Verdana;
    font-size: 11px;
    color:#3D3D3D;

    }
UNKNOWN {
    FONT-SIZE: 12px; PADDING-BOTTOM: 1px; COLOR: #000000; LINE-HEIGHT: 16px; FONT-FAMILY: arial
}
 HTML .bar-menu .box1 {
    FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: arial; HEIGHT: 16px
}
 HTML .bar-menu .box1-open {
    FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: arial; HEIGHT: 16px
}
.bar-menu .section {
    DISPLAY: none; FONT-SIZE: 12px; LINE-HEIGHT: 16px; FONT-FAMILY: arial
}
.bar-menu .section A {
    COLOR: #000000; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
.bar-menu .section A:hover {
    COLOR: #0000ff; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
.bar-menu .box2 {
    PADDING-LEFT: 19px; BACKGROUND: url(images/tree-leaf.gif) no-repeat
}
.bar-menu .box2-last {
    PADDING-LEFT: 19px; BACKGROUND: url(images/tree-leaf-last.gif) no-repeat
}
</code></pre>
