...
PDA

2 probs with my JS menu, unable to figure what is wrong.

RexxCrow
07-28-2006, 05:41 AM
I just pretty much copied this code w/ a few mods to is from one of my JS books to convert my CSS menu to JS as I was not successful with making it fully operational in CSS. The probs with this are:

#1 In IE is acts funny swapping from block to none as you move from one button to the next, Firefox it works like a champ.

#2 the second is that is does nto collapse the menus upon loading only after you mouse over them. (Would this need a onload or eventlistener to solve this issue?)

I believe I have everything in order and have failed to see what I am missing, any assistance/advice would be great! thx. I am actually using a total of 9 sections but shortened it down to 4 for ease of viewing.


<HTML><HEAD><BASE target="menu"><script language="JavaScript" type="text/JavaScript"><!--
(document.getElementById ? DOMCapable = true : DOMCapable = false);
function conceal(menuPos) {
if (DOMCapable) {
var setMenu=document.getElementById(menuPos+"poslect");
setMenu.style.display='none';
}
}
function display(menuPos) {
if (DOMCapable) {
var setMenu=document.getElementById(menuPos+"poslect");
setMenu.style.display='block';
}
}
//--></script><STYLE TYPE="text/css"><!--
BODY {background-color: #778899;}
#setup {position: absolute; top: 10px; left: 10px; border-color: #B0C4DE; border-style: inset; border-width: 5px; font-family: Arial; font-size: 12px; text-align: center;}
.menu a {white-space: nowrap; display: block; text-decoration: none; color: #F0FFFF; border-color: #B0C4DE; border-style: outset; border-width: 4px; padding: 2px 10px;}
.menu a:hover {background-color: #B0C4DE; color: #F5F5F5;}
.main {color: #FFFF00; font-weight: bold; cursor: default; border-color: #B0C4DE; border-style: outset; border-width: 4px; padding: 2px 10px;}
DIV.main:hover {color: #F5F5F5; border-style: inset; border-width: 4px;}
//--></STYLE></HEAD><BODY><DIV ID="setup";>
<DIV ID="menu1"; CLASS="menu"; onMouseOver="display('menu1');" onMouseOut="conceal('menu1');">
<DIV CLASS="main";>M1</DIV>
<DIV ID="menu1poslect";>
<a href="Docs\Doc1.HTML"; target="docView";>S1</a>
<a href="Docs\Doc2.HTML"; target="docView";>S2</a>
<a href="Docs\Doc3.HTML"; target="docView";>S3</a>
<a href="Docs\Doc4.HTML"; target="docView";>S4</a>
<a href="Docs\Doc5.HTML"; target="docView";>S5</a></DIV></DIV>
<DIV ID="menu2"; CLASS="menu"; onMouseOver="display('menu2');" onMouseOut="conceal('menu2');">
<DIV CLASS="main";>M2</DIV>
<DIV ID="menu2poslect";>
<a href="Docs\Doc8.HTML" target="docView";>S1</a>
<a href="Docs\Doc9.HTML" target="docView";>S2</a>
<a href="Docs\Doc10.HTML" target="docView";>S3</a>
<a href="Docs\Doc11.HTML" target="docView";>S4</a>
<a href="Docs\Doc12.HTML" target="docView";>S5</a></DIV></DIV>
<DIV ID="menu3"; CLASS="menu"; onMouseOver="display('menu3');" onMouseOut="conceal('menu3');">
<DIV CLASS="main";>M3</DIV>
<DIV ID="menu3poslect";>
<a href="Docs\Doc14.HTML" target="docView";>S1</a>
<a href="Docs\Doc15.HTML" target="docView";>S2</a>
<a href="Docs\Doc16.HTML" target="docView";>S3</a>
<a href="Docs\Doc15.HTML" target="docView";>S4</a>
<a href="Docs\Doc17.HTML" target="docView";>S5</a></DIV></DIV>
<DIV ID="menu4"; CLASS="menu"; onMouseOver="display('menu4');" onMouseOut="conceal('menu4');">
<DIV CLASS="main";>M4</DIV>
<DIV ID="menu4poslect";>
<a href="Docs\Doc18.HTML" target="docView";>S1</a>
<a href="Docs\Doc19.HTML" target="docView";>S2</a>
<a href="Docs\Doc20.HTML" target="docView";>S3</a>
<a href="Docs\Doc21.HTML" target="docView";>S4</a>
<a href="Docs\Doc15.HTML" target="docView";>S5</a></DIV></DIV>
</DIV><script type="text/JavaScript"<!--
if (DOMCapable) {
conceal('menu1');
conceal('menu2');
conceal('menu3');
conceal('menu4');
}
//--></script></BODY></HTML>


edited: I just fixed the 2nd prob, I had STYLE closing rather then script, did not even catch that one! heh.

Also I noticed another kinky prob, when you attempt to expand the last listing on the menu headers, it opens up near middle section instead and makes it very difficult to get to items within the last section, is there away around this?

It also does work better in IE7b, but still has some probs with it, earlier I was testing on an old old IE version from the early 2000's and it was pretty crummy; I would expect that somewhat though, but in Firefox it should rock out like it is Fight night!
RexxCrow
07-28-2006, 08:32 PM
I am still needing assistance if there is any to offer, or am I just a lost cause? :D
vwphillips
07-28-2006, 09:35 PM
Not very good but

<HTML><HEAD><BASE target="menu"><script language="JavaScript" type="text/JavaScript"><!--
(document.getElementById ? DOMCapable = true : DOMCapable = false);
var Menu,setMenu,TO;

function conceal(menuPos) {
if (DOMCapable) {
Menu=document.getElementById('setup');
Menu.style.top='0px';
setMenu=document.getElementById(menuPos+"poslect");
TO=setTimeout("setMenu.style.display='none';",500);
}
}
function display(menuPos) {
clearTimeout(TO);
if (DOMCapable) {
Menu=document.getElementById('setup');
Menu.style.top='0px';
setMenu=document.getElementById(menuPos+"poslect");
setMenu.style.display='';
var ht=zxcWWHS()[1]+zxcWWHS()[3]-20;
while (Menu.offsetTop+Menu.offsetHeight>ht){
Menu.style.top=(parseInt(Menu.style.top)-2)+'px';
}
}
}

function zxcWWHS(){
var winww,zxcwh,zxcsl,zxcst,zxcwc;
if (window.innerHeight){
zxcCur='pointer';
zxcwh=window.innerHeight-20;
zxcww=window.innerWidth-20;
zxcsl=window.pageXOffset;
zxcst=window.pageYOffset;
}
else if (document.documentElement.clientHeight){
zxcCur='hand';
zxcwh=document.documentElement.clientHeight;
zxcww=document.documentElement.clientWidth;
zxcsl=document.documentElement.scrollLeft;
zxcst=document.documentElement.scrollTop;
}
else if (document.body.clientHeight){
zxcwh=document.body.clientHeight;
zxcww=document.body.clientWidth;
zxcsl=document.body.scrollLeft;
zxcst=document.body.scrollTop;
}
zxcwc=Math.round(zxcww/2);
return [zxcww,zxcwh,zxcsl,zxcst];
}


function Init(){
if (DOMCapable) {
Init2('menu1');
Init2('menu2');
Init2('menu3');
Init2('menu4');
}
}

function Init2(menuPos) {
if (DOMCapable) {
setMenu=document.getElementById(menuPos+"poslect");
setMenu.style.display='none';
}
}
//-->
</script>
<STYLE TYPE="text/css"><!--
BODY {background-color: #778899;}
#setup {position: absolute; top: 10px; left: 10px; border-color: #B0C4DE; border-style: inset; border-width: 5px; font-family: Arial; font-size: 12px; text-align: center;}
.menu a {white-space: nowrap; display: block; text-decoration: none; color: #F0FFFF; border-color: #B0C4DE; border-style: outset; border-width: 4px; padding: 2px 10px;}
.menu a:hover {background-color: #B0C4DE; color: #F5F5F5;}
.main {color: #FFFF00; font-weight: bold; cursor: default; border-color: #B0C4DE; border-style: outset; border-width: 4px; padding: 2px 10px;}
DIV.main:hover {color: #F5F5F5; border-style: inset; border-width: 4px;}
//--></STYLE></HEAD>
<BODY onload="Init();"><DIV ID="setup";>
<DIV ID="menu1"; CLASS="menu"; onMouseOver="display('menu1');" onMouseOut="conceal('menu1');">
<DIV CLASS="main";>M1</DIV>
<DIV ID="menu1poslect";>
<a href="Docs\Doc1.HTML"; target="docView";>S1</a>
<a href="Docs\Doc2.HTML"; target="docView";>S2</a>
<a href="Docs\Doc3.HTML"; target="docView";>S3</a>
<a href="Docs\Doc4.HTML"; target="docView";>S4</a>
<a href="Docs\Doc5.HTML"; target="docView";>S5</a></DIV></DIV>
<DIV ID="menu2"; CLASS="menu"; onMouseOver="display('menu2');" onMouseOut="conceal('menu2');">
<DIV CLASS="main";>M2</DIV>
<DIV ID="menu2poslect";>
<a href="Docs\Doc8.HTML" target="docView";>S1</a>
<a href="Docs\Doc9.HTML" target="docView";>S2</a>
<a href="Docs\Doc10.HTML" target="docView";>S3</a>
<a href="Docs\Doc11.HTML" target="docView";>S4</a>
<a href="Docs\Doc12.HTML" target="docView";>S5</a></DIV></DIV>
<DIV ID="menu3"; CLASS="menu"; onMouseOver="display('menu3');" onMouseOut="conceal('menu3');">
<DIV CLASS="main";>M3</DIV>
<DIV ID="menu3poslect";>
<a href="Docs\Doc14.HTML" target="docView";>S1</a>
<a href="Docs\Doc15.HTML" target="docView";>S2</a>
<a href="Docs\Doc16.HTML" target="docView";>S3</a>
<a href="Docs\Doc15.HTML" target="docView";>S4</a>
<a href="Docs\Doc17.HTML" target="docView";>S5</a></DIV></DIV>
<DIV ID="menu4"; CLASS="menu"; onMouseOver="display('menu4');" onMouseOut="conceal('menu4');">
<DIV CLASS="main";>M4</DIV>
<DIV ID="menu4poslect";>
<a href="Docs\Doc18.HTML" target="docView";>S1</a>
<a href="Docs\Doc19.HTML" target="docView";>S2</a>
<a href="Docs\Doc20.HTML" target="docView";>S3</a>
<a href="Docs\Doc21.HTML" target="docView";>S4</a>
<a href="Docs\Doc15.HTML" target="docView";>S5</a>
<a href="Docs\Doc18.HTML" target="docView";>S1</a>
<a href="Docs\Doc19.HTML" target="docView";>S2</a>
<a href="Docs\Doc20.HTML" target="docView";>S3</a>
<a href="Docs\Doc21.HTML" target="docView";>S4</a>
<a href="Docs\Doc15.HTML" target="docView";>S5</a>
<a href="Docs\Doc18.HTML" target="docView";>S1</a>
<a href="Docs\Doc19.HTML" target="docView";>S2</a>
<a href="Docs\Doc20.HTML" target="docView";>S3</a>
<a href="Docs\Doc21.HTML" target="docView";>S4</a>
<a href="Docs\Doc15.HTML" target="docView";>S5</a>
<a href="Docs\Doc18.HTML" target="docView";>S1</a>
<a href="Docs\Doc19.HTML" target="docView";>S2</a>
<a href="Docs\Doc20.HTML" target="docView";>S3</a>
<a href="Docs\Doc21.HTML" target="docView";>S4</a>
<a href="Docs\Doc15.HTML" target="docView";>S5</a>
<a href="Docs\Doc18.HTML" target="docView";>S1</a>
<a href="Docs\Doc19.HTML" target="docView";>S2</a>
<a href="Docs\Doc20.HTML" target="docView";>S3</a>
<a href="Docs\Doc21.HTML" target="docView";>S4</a>
<a href="Docs\Doc15.HTML" target="docView";>S5</a>

</DIV></DIV>
</DIV>

</BODY></HTML>
RexxCrow
07-28-2006, 11:06 PM
Holly molly that is some code, and sadly for me it has just confused that heck out of me, haha... one day I promise to become capable of completely understanding it though, one day, and that one day shall be soon! Thanks for the help Phillips, there is a prob though, It will not let the menus closeout, they are always expanded, i tested it without messing with anything, so I dont think I did something wrong to it.
vwphillips
07-29-2006, 11:27 AM
closes on mouseout for me.

a good first effort
but suggest you study other menu scripts before continuing.
RexxCrow
08-01-2006, 09:48 AM
Ok as an exception I was tyring to get this to work though the timers appear to either need an array for the timeout and/or a while loop?

This works but it "forgets" about the previous timeouts if the user opens another sub before the time is reached, thus leaving the menu expanded until it is allowed to reach the timeout by a new mouseover. I was hoping there is a fairly easy fix for this. THX.


var setMenu, TO
function startup(menuPos) {
setMenu=document.getElementById(menuPos+"poslect");
setMenu.style.display='none';
}
function conceal(menuPos) {
if (DOMCapable) {
setMenu=document.getElementById(menuPos+"poslect");
TO=setTimeout("setMenu.style.display='none';",250);
}
}
function display(menuPos) {
clearTimeout(TO);
if (DOMCapable) {
setMenu=document.getElementById(menuPos+"poslect");
setMenu.style.display='block';
}
}

<!--after the menu DIV's-->

<script language="JavaScript" type="text/JavaScript"><!--
if (DOMCapable) {
startup('menu1');
startup('menu2');
startup('menu3');
startup('menu4');
startup('menu5');
startup('menu6');
startup('menu7');
startup('menu8');
startup('menu9');
}
//--></script>

* Or what about placing the timeout inline before the conceal function, would that permit the same effect or is that just the same as, or is a var1, var2, var3 needed along with it. If this is is a permittable method is a cleartimer for each needed and if so would that also require a function in itself to clear the correct timer?
vwphillips
08-01-2006, 11:43 AM
var setMenu,TO,Lst;
function startup(menuPos) {
setMenu=document.getElementById(menuPos+"poslect");
setMenu.style.display='none';
}
function conceal(menuPos) {
setMenu=document.getElementById(menuPos+"poslect");
TO=setTimeout("setMenu.style.display='none';",250);
}

function display(menuPos) {
if (Lst){
Lst.style.display='none';
}
clearTimeout(TO);
setMenu=document.getElementById(menuPos+"poslect");
setMenu.style.display='';
Lst=setMenu;
}


or you need to object oriented script

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum