PDA

View Full Version : Need help with stuck menus



djkrokadil
Jan 7th, 2010, 07:53 PM
I would love some help on this code I was assigned to debug...I never studied javascript nor have ever coded really, yet my boss(im volunteering at a company) is having me debug a website and I can't seem to figure this out.

The problem is the menus stay expanded when the mouse is out, but when you activate the onMouseOver, it fixes it.

Here is an extremely simplified version but it shows the problem. And I greatly appreciate any help I can get. Thanks in advance!

Oh and I didn't write any of this + im a noob at coding so if the answer was explained with this in mind that'd be great!

-----------




<!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" xml:lang="en" lang="en">
<!-- xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Yep</title>

<link href="ReferenceFunctions.css" rel="stylesheet" type="text/css" />

<!--<script type="text/javascript" src="/offices/management_support/js/tab-view.js"></script>-->

<!-- ************************ BEGIN Section 1 *************************************** -->
<script type="text/javascript">
function ManageTabPanelDisplay() {
//
// Between the parenthesis, list the id's of the div's that
// will be effected when tabs are clicked. List in any
// order. Put the id's in single quotes (apostrophes)
// and separate them with a comma -- all one line.
//
var idlist = new Array('tab1focus','tab2focus','tab3focus','tab1ready','tab2ready','tab3ready','content1','content2', 'content3');

// No other customizations are necessary.
if(arguments.length < 1) { return; }
for(var i = 0; i < idlist.length; i++) {
var block = false;
for(var ii = 0; ii < arguments.length; ii++) {
if(idlist[i] == arguments[ii]) {
block = true;
break;
}
}
if(block) { document.getElementById(idlist[i]).style.display = "block"; }
else { document.getElementById(idlist[i]).style.display = "none"; }
}
}

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
<!-- ************************ END Section 1 *************************************** -->
<!-- ************************ BEGIN Section 2 *************************************** -->
<script type="text/javascript">
<!-- *************Not sure why this is commented out ********
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=15; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<!-- ************************ END Section 2 *************************************** -->
<!-- ************************ BEGIN Section 3 *************************************** -->
<script type="text/javascript">

function decide() {

if (document.myca.search.value.length < 1) {
window.alert ("Please enter a search keyword.");
return false;
}

if (document.myca.whosearch[0].checked) {
document.myca.sSearchString.value = document.myca.search.value;
document.myca.submit();

} else {
if (document.myca.whosearch[1].checked) {
document.thissite[1].value = document.myca.search.value;
document.thissite.submit();

} else {
alert("You must select whether you want to search My CA or This Site.");
}

}

return false;
}
</script>
<!-- ************************ END Section 3 *************************************** -->
<!-- ************************ BEGIN Section 4 *************************************** -->
<script type="text/javascript">

<!--*************Not sure why this is commented out ********-->
<!--
var defaultMainList = "Home";


function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
-->

</script>
<!-- ************************ END Section 4 *************************************** -->
<!-- ************************ BEGIN Section 5 *************************************** -->
<style type="text/css">

.blueLink {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000066;
font-size: 71%;
}
.Office_functions_sub_title {
font-size: xx-small;
color: #0066CC;
}
.style1 {
font-size: small
}
.pixel_height {
font-size: 5px;
}
.blank_menu_space_height {
font-size: 5px;
font-family: Arial;
}
.turquoise {
color: #00FFCC
}
.blue_font {
color: #0000FF;
font-size: small;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
.style7 {color: #000066}
.style10 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style11 {
font-size: 12px
}
.style12 {font-size: 14px}
.style13 {font-size: 65%}
.style14 {font-size: 12px; color: #800000; }
.style15 {
color: #FFFFFF;
font-weight: bold;
font-size: small;
}
.style17 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #4d7fb2;
font-weight: bold;
}
.style19 {
font-family: "Times New Roman", Times, serif;
font-size: 18pt;
color: #FFFF00;
}
.style22 {font-size: 11px}
</style>
<!-- ************************ END Section 5 *************************************** -->
</head>
<body onload="FP_preloadImgs(/*url*/'images/button13.jpg', /*url*/'images/button4a.jpg'); MM_preloadImages('indeed.jpg' )">

<!--<body onload="MM_preloadImages('yep.jpg','yep.jpg')">-->
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- ************************ BEGIN Section 6 *************************************** -->
<tr>
<!--BEGIN Table Set-Up -->

<!--CLOSE Table Set-Up -->
</tr>
<!-- ************************ END Section 6 *************************************** -->
<!-- ************************ BEGIN Section 7 *************************************** -->
<tr>
<td style="height:17px"><div align="center" class="style15">
<table width="100%" border="1">
<tr>
<td><div align="center">link</div></td>
</tr>
</table>
</div></td>
</tr>
<!-- BEGIN Table Set-Up 1 -->

<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff">
<tr>
<td valign="top" style="padding-left:12px; text-align:left; line-height:186%;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff">
<!-- BEGIN Table Set-Up 2 -->
<tr>
<td rowspan="72" valign="top"><table border="0" cellspacing="0" cellpadding="0" style="background-color:#fff">
<!--BEGIN Example Office- Menut Table SET-UP-->
<tr>
<td valign="top" style="padding-right:12px"><table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="185" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="9px"></td>
</tr>
<tr>
<td class="boxtitle style12">testings12345</td>
</tr>
<!-- BEGIN Sub-Section A thru C -->
<tr>
<td><div class="left_column_top">
<dl id="menu">
<!-- ************************ BEGIN Sub-Section A *************************************** -->
<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"> <a href="link.htm">link</a></dt>
<!-- ************************ END Sub-Section A *************************************** -->
<!-- ************************ BEGIN Sub-Section B *************************************** -->
<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> <a href="link.htm">link</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');"
onmouseout="javascript:montre();">
<ul>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm">link</a></li>
<li><a href="link.htm">link</a></li>
</ul>
</dd>
<!-- ************************ END Sub-Section B *************************************** -->
<!-- ************************ BEGIN Sub-Section C *************************************** -->
<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"> <a href="link.htm"> link</a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<ul>
<li><a href="link.pdf"> link</a></li>
<li><a href="link.pdf"> link</a></li>
<li><a href="link.pdf"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm">link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
</ul>
</dd>
<!-- ************************ END Sub-Section C *************************************** -->
<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"> <a href="ble.htm" style="line-height: 200%"> link<br />
link
</a></dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
<ul>
<li><a href="link233link.htm"> link</a></li>
<li><a href="indeedy.htm"> link</a></li>
<li><a href="training/linsks.htm"> link</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();"> <a href="yep.htm"> link</a></dt>
<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();"> <a href="indeed.htm"> link</a></dt>
<dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();"> <a href="thanks.htm"> link</a></dt>
</dl>
</div></td>
</tr>
<!-- CLOSE Sub-Section A thru C -->
</table></td>
</tr>
<td><table width="185px" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="40px"></td>
</tr>
<tr>
<td class="boxtitle style12">link</td>
</tr>
<!--BEGIN Sub-Section D thru F -->
<tr>
<td><div class="left_column_bottom" style="height:125px">
<dl id="menu">
<!-- ************************ BEGIN Sub-Section D *************************************** -->
<dt onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">
<a href="yes.htm">link</a></dt>

<dt onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();">
<a href="yep.htm">random words</a></dt>

<dt onmouseover="javascript:montre('smenu12');" onmouseout="javascript:montre();"> <a href="tests.htm">
<p style="line-height: 200%; margin-top: 1px; margin-bottom: 1px">
ble<br> mhm</p></a></dt>

<dt onmouseover="javascript:montre('smenu13');" onmouseout="javascript:montre();">
<a href="communication/testsss.htm">Just some test</a></dt>
<!-- ************************ END Sub-Section D *************************************** -->
</dl>
</div></td>
</tr>
<tr>
<td >&nbsp;</td>
</tr>
<!--CLOSE Sub-Section D thu F -->
</table></td>
</tr>


<tr>

<td align="center">
<p align="center" id="legal"><!-- Original Template Designed by etc -->
<a href="#heading"></a></p> </td>
</tr>

<!-- BEGIN Office Chief Table -->
</table></td></tr>
<!-- </td> SICR TAble -->
<!-- </tr> CLOSE only TR Table Set-Up 2 -->
</table>
<p align="center">
</table>
<!--CLOSE MAIN TABLE-->
<a href="#heading"> Back to Top</a><br />
</td>
</tr>
</table>
</td>
</tr>
<!-- CLOSE Table Set-Up 1 -->

<!-- ************************ END Section 7 *************************************** -->
</p>
<tr>
<td style="height:1px ;background-color:#CCCCCC"></td>
</tr>
</body>
</html>

Old Pedant
Jan 7th, 2010, 08:11 PM
Can you possibly show this LIVE on a site???

Old Pedant
Jan 7th, 2010, 08:28 PM
(1) When you post code, enclose it with [ code ] .... [ /code ] tags (no spaces in the tags).
(2) That code won't begin to work. It wants to do something based on an element with the id of "treemenu" but you have no such id anyplace on the page.

I think you are going to have to show it live, because you have obviously not copied something important in trying to shorten it for this forum. Either that or I don't understand the problem/question.

I do notice that if I hover over a left side link that causes an expand and then move the mouse directly downwards the expansion is closed. Is that the problem you are talking about?? That's an easy fix. CSS, nothing to do with JS, per se.

Old Pedant
Jan 7th, 2010, 08:32 PM
OKAY...*maybe* I figured out what you meant and what the problem is.

Try changing THIS line:


window.onload=montre;

into these lines:


if (window.addEventListener) window.addEventListener("load", montre, false);
else if (window.attachEvent) window.attachEvent("onload", montre);


Oh, and as to this:

<!-- *************Not sure why this is commented out ********

It's not commented out. It's very very old style code for hiding JavaScript from browsers that don't support JavaScript. Such as MSIE 3. You know, 1997 or so.

I'd suggest removing it, but why bother? There's so much other obsolete and unused code on that page that it will never matter or be noticed.

djkrokadil
Jan 7th, 2010, 08:50 PM
Thanks Old Pedant, I actually think I figured it out...was messing with it for a few hours lol.

anyway I removed this part (i edited it before)


<body onload="FP_preloadImgs(/*url*/'images/button13.jpg', /*url*/'images/button4a.jpg'); MM_preloadImages('/newtech/images/res_conn2.jpg','/newtech/images/res_conn1.jpg' )">

and the page functioned normally. in addition, a small slit of background is not being exposed in the top left corner of the old page..I'm thinking this code was left there and someone forgot to delete it, which messed with some images once the page was fully loaded..something of the sort.

Anyway thanks for trying to help me out..greatly appreciated =D