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 <SCRIPT src="timezone.js" type=text/javascript></SCRIPT> tag the menu works fine but the time zone is negated. <div> issue?
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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta http-equiv="Content-Language" content="en-us" /> <title>TEST</title> <link rel="stylesheet" type="text/css" href="test.css" /> <SCRIPT src="BarMenu.js" type=text/javascript></SCRIPT> </head> <body onload="startw();" style="background-color: #808080"> <SCRIPT type=text/javascript> /* 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(); } </SCRIPT> <table id="MainTable" cellspacing="0" cellpadding="0" style="width: 800px" class="style8"> <tr> <td colspan="2" style="height: 91px" class="style10"> <span class="FooterText"> <br /> </span><br /> </td> <tr> <td colspan="2"> <SCRIPT src="timezone.js" type=text/javascript></SCRIPT> <div id="zonediv" class="GreenBar"></div> </td> </tr> <tr> <td valign="top" style="width: 200px" class="LeftNav"> <DIV class=left> <TABLE cellSpacing=0 cellPadding=0 width="100%"> <TBODY> <TR> <TD class=top>» Products</TD></TR> <TR> <TD class=section> <DIV class=bar-menu id=bar-menu3a> <TABLE cellSpacing=0 cellPadding=0 width="100%"> <TBODY> <TR> <TD> <DIV><SPAN class=box1>Product One</SPAN></DIV> <DIV class=section> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Overview</A></DIV> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Features</A></DIV> <DIV class=box2-last><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Requirements</A></DIV></DIV></TD></TR> <TR> <TD height=2></TD></TR> <TR> <TD> <DIV><SPAN class=box1>Product Two</SPAN></DIV> <DIV class=section> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Overwiev</A></DIV> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Features</A></DIV> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Requirements</A></DIV> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Screenshots</A></DIV> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Flash Demos</A></DIV> <DIV class=box2-last><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Live Demo</A></DIV></DIV></TD></TR> <TR> <TD height=2></TD></TR> <TR> <TD> <DIV><SPAN class=box1>Product Three</SPAN></DIV> <DIV class=section> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Overview</A></DIV> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Features</A></DIV> <DIV class=box2-last><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Requirements</A></DIV></DIV></TD></TR> <TR> <TD height=2></TD></TR> <TR> <TD> <DIV><SPAN class=box1>Product Four</SPAN></DIV> <DIV class=section> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Overview</A></DIV> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Features</A></DIV> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Requirements</A></DIV> <DIV class=box2><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Screenshots</A></DIV> <DIV class=box2-last><A href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Live Demo</A></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR> </TBODY></TABLE></DIV> </td></tr></tr> </table> </body> </html> BarMenu.js
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 < 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 && nodes[i].tagName && 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 < 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*$/, ""); } } timezone.js
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<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()<10?'0'+t.getDate():t.getDate(); var Dm=t.getMonth()<10?'0'+(t.getMonth()+1):t.getMonth()+1; var Dh=t.getHours()<10?'0'+t.getHours():t.getHours(); var Di=t.getMinutes()<10?'0'+t.getMinutes():t.getMinutes(); var Ds=t.getSeconds()<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<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(); } test.css
/* 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 }
They’re both setting window.onload.
The quick fix is to change timezone.js from this:
to this