PDA

View Full Version : drop down menu not showing behind form select element?



pashah72
02-23-2006, 01:51 PM
Hello

On a HTML page, there is a JavaScript mouse drop down navigation menu on the top, and some HTML elements down. When a mouseover event triggers, the drop down menu displays its menu item, but the menu item list is not shown properly as it goes below select form element whereas its above text box element. why it shows properly on text box & not on select form element. I surf the net & there is something about z index. I don't know how to go about it?

Looking forward for an early reply

Thanks

JeffSinNHUSA
02-23-2006, 02:46 PM
This article on Form Elements Overlapping A Styled Layer may help:

http://www.webreference.com/programming/javascript/form/2.html

I have the same problem...

JeffSinNHUSA
02-23-2006, 04:06 PM
The solution in this forum post worked for me:

http://www.dynamicdrive.com/forums/showthread.php?t=2233&highlight=select

pashah72
02-24-2006, 07:44 AM
Hello,

Solution U have provided is to hide select box, not overlap select box. What I mean was drop down menu (which is coming from JS file) should overlap selectmenu.

Looking forward for an early reply.

Thanks

jscheuer1
02-24-2006, 09:26 AM
In IE6, hiding (in some fashion) the select is all that can be done short of the ideal solution which is to move the select and/or the script so that the situation can never arise where one will need to compete with the other in the page stacking order. In such a battle, in IE6, the select will always win unless it is temporarily hidden or temporarily set to display value none. In other, less used browsers this whole issue generally never comes up as a javascript drop down usually will overlap most content, including selects (unless such content has had its stacking order set higher than the script's drop down).

pashah72
02-24-2006, 11:22 AM
Hi

Sending code :

just copy paste the code in one directory.
make a directory, copy test1.html, index1.js & menu_com1.js as written below, run test1.html in IE browser & see the result that menu is going below select element & over text box. Drop down menu coming from 'js' file should overlap select element. I surf the net & in various articles they have said that select element get hidden when there is mouseover & visible when there is mouseout. I need dropdown menu to overlap the select element.

test1.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="scripts/stylesheet.css" rel="stylesheet" type="text/css">

<script language="JavaScript">

<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<script type="text/javascript" src="header1.js"></script>
<table width="779" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr align="left" valign="top">
<td width="629" align="center">
<table border=0 width="100%" cellpadding="0" cellspacing="3">
<tbody>
<tr>
<td valign=top width="22%"> <div align="right">Name (First) <b><font color="#FF0000">*</font></b>:</div></td>
<td valign=top width="5%">&nbsp;</td>
<td valign=top width="73%"><font face="Verdana" size="2">
<select name="select">
<option selected>asasassasas</option>
<option>zsasasasas</option>
<option>asasasbajks ahsk ahks as akshak </option>
<option>hs jkh skdh</option>
</select>
&nbsp;</font></td>
</tr>
<tr>
<td valign=top width="22%"> <div align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
(Last) <b><font color="#FF0000">*</font></b>:</div></td>
<td valign=top width="5%">&nbsp;</td>
<td valign=top width="73%"><font face="Verdana" size="2">
<input type="text" name="lname" size="35" value="" style="background-color: #FFFFFF; color: #000000; border: 1 solid #000000">
</font></td>
</tr>

</div>
</body>
</html>


header1.js :

document.write('<table width="779" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">');
document.write(' <tr align="left" valign="top"> ');
document.write(' <td width="490" height="80"></td>');
document.write(' </tr>');
document.write(' <tr align="left" valign="top"> ');
document.write(' <td height="4" bgcolor="#FFFFFF"></td>');
document.write(' <td align="right" valign="bottom" bgcolor="#FFFFFF"></td>');
document.write(' <td></td>');
document.write(' </tr>');
document.write(' </table>');
document.write('<table width="779" border="0" cellspacing="0" cellpadding="0">');
document.write(' <tr> ');
document.write(' <td height="17">&nbsp;</td>');
document.write(' </tr>');
document.write(' </table>');
document.write(' <table width="779" border="0" cellspacing="0" cellpadding="0">');
document.write(' <tr> ');
document.write(' <td height="32" align="right" valign="middle" background="images/blue.jpg"><script type="text/javascript" src="scripts/index1.js"></script> ');
document.write(' <script type="text/javascript" src="scripts/menu_com.js"></script></td>');
document.write(' <td width="20" align="center" valign="middle" background="images/blue.jpg">&nbsp;</td>');
document.write(' </tr>');
document.write(' </table>');

pashah72
02-24-2006, 11:34 AM
menu_com1.js(part1) (dividing the script since can't take more characters, please join the script):

var AgntUsr=navigator.userAgent.toLowerCase();
var DomYes=document.getElementById?1:0;
var NavYes=AgntUsr.indexOf('mozilla')!=-1&&AgntUsr.indexOf('compatible')==-1?1:0;
var ExpYes=AgntUsr.indexOf('msie')!=-1?1:0;
var Opr=AgntUsr.indexOf('opera')!=-1?1:0;
var DomNav=DomYes&&NavYes?1:0;
var DomExp=DomYes&&ExpYes?1:0;
var Nav4=NavYes&&!DomYes&&document.layers?1:0;
var Exp4=ExpYes&&!DomYes&&document.all?1:0;
var PosStrt=(NavYes||ExpYes)&&!Opr?1:0;

var FrstLoc,ScLoc,DcLoc;
var ScWinWdth,ScWinHght,FrstWinWdth,FrstWinHght;
var ScLdAgainWin;
var FirstColPos,SecColPos,DocColPos;
var RcrsLvl=0;
var FrstCreat=1,Loadd=0,Creatd=0,IniFlg,AcrssFrms=1;
var FrstCntnr=null,CurrntOvr=null,CloseTmr=null;
var CntrTxt,TxtClose,ImgStr;
var Ztop=100;
var ShwFlg=0;
var M_StrtTp=StartTop,M_StrtLft=StartLeft;
var StaticPos=0;
var LftXtra=DomNav?LeftPaddng:0;
var TpXtra=DomNav?TopPaddng:0;
var M_Hide=Nav4?'hide':'hidden';
var M_Show=Nav4?'show':'visible';
var Par=parent.frames[0]&&FirstLineFrame!=SecLineFrame?parent:window;
var Doc=Par.document;
var Bod=Doc.body;
var Trigger=NavYes?Par:Bod;

MenuTextCentered=MenuTextCentered==1||MenuTextCentered=='center'?'center':MenuTextCentered==0||MenuTextCentered!='right'?'left':'right';
WbMstrAlrts=["Item not defined: ","Item needs height: ","Item needs width: "];

if(Trigger.onload)Dummy=Trigger.onload;
if(DomNav&&!Opr)Trigger.addEventListener('load',Go,false);
else Trigger.onload=Go;

function Dummy(){return}

function CnclSlct(){return false}

function RePos(){
FrstWinWdth=ExpYes?FrstLoc.document.body.clientWidth:FrstLoc.innerWidth;
FrstWinHght=ExpYes?FrstLoc.document.body.clientHeight:FrstLoc.innerHeight;
ScWinWdth=ExpYes?ScLoc.document.body.clientWidth:ScLoc.innerWidth;
ScWinHght=ExpYes?ScLoc.document.body.clientHeight:ScLoc.innerHeight;
if(MenuCentered=='justify'&&FirstLineHorizontal){
FrstCntnr.style.width=FrstWinWdth;
ClcJus();
var P=FrstCntnr.FrstMbr,W=Menu1[5],i;
for(i=0;i<NoOffFirstLineMenus;i++){P.style.width=W;P=P.PrvMbr}}
StaticPos=-1;
if(TargetLoc)ClcTrgt();
if(MenuCentered)ClcLft();
if(MenuVerticalCentered)ClcTp();
PosMenu(FrstCntnr,StartTop,StartLeft)}

function UnLoaded(){
if(CloseTmr)clearTimeout(CloseTmr);
Loadd=0; Creatd=0;
if(HideTop){
var FCStyle=Nav4?FrstCntnr:FrstCntnr.style;
FCStyle.visibility=M_Hide}}

function ReDoWhole(){
if(ScWinWdth!=ScLoc.innerWidth||ScWinHght!=ScLoc.innerHeight||FrstWinWdth!=FrstLoc.innerWidth||FrstWinHght!=FrstLoc.innerHeight)Doc.location.reload()}

function Check(WMnu,NoOf){
var i,array,ArrayLoc;
ArrayLoc=parent.frames[0]?parent.frames[FirstLineFrame]:self;
for(i=0;i<NoOf;i++){
array=WMnu+eval(i+1);
if(!ArrayLoc[array]){WbMstrAlrt(0,array); return false}
if(i==0){ if(!ArrayLoc[array][4]){WbMstrAlrt(1,array); return false}
if(!ArrayLoc[array][5]){WbMstrAlrt(2,array); return false}}
if(ArrayLoc[array][3])if(!Check(array+'_',ArrayLoc[array][3])) return false}
return true}

function WbMstrAlrt(No,Xtra){
return confirm(WbMstrAlrts[No]+Xtra+' ')}

function Go(){
Dummy();
if(Loadd||!PosStrt)return;
BeforeStart();
Creatd=0; Loadd=1;
status='Building menu';
if(FrstCreat){
if(FirstLineFrame =="" || !parent.frames[FirstLineFrame]){
FirstLineFrame=SecLineFrame;
if(FirstLineFrame =="" || !parent.frames[FirstLineFrame]){
FirstLineFrame=SecLineFrame=DocTargetFrame;
if(FirstLineFrame =="" || !parent.frames[FirstLineFrame])FirstLineFrame=SecLineFrame=DocTargetFrame=''}}
if(SecLineFrame =="" || !parent.frames[SecLineFrame]){
SecLineFrame=DocTargetFrame;
if(SecLineFrame =="" || !parent.frames[SecLineFrame])SecLineFrame=DocTargetFrame=FirstLineFrame}
if(DocTargetFrame =="" || !parent.frames[DocTargetFrame])DocTargetFrame=SecLineFrame;
if(WebMasterCheck){ if(!Check('Menu',NoOffFirstLineMenus)){status='build aborted';return}}
FrstLoc=FirstLineFrame!=""?parent.frames[FirstLineFrame]:window;
ScLoc=SecLineFrame!=""?parent.frames[SecLineFrame]:window;
DcLoc=DocTargetFrame!=""?parent.frames[DocTargetFrame]:window;
if (FrstLoc==ScLoc) AcrssFrms=0;
if (AcrssFrms)FirstLineHorizontal=MenuFramesVertical?0:1;
FrstWinWdth=ExpYes?FrstLoc.document.body.clientWidth:FrstLoc.innerWidth;
FrstWinHght=ExpYes?FrstLoc.document.body.clientHeight:FrstLoc.innerHeight;
ScWinWdth=ExpYes?ScLoc.document.body.clientWidth:ScLoc.innerWidth;
ScWinHght=ExpYes?ScLoc.document.body.clientHeight:ScLoc.innerHeight;
if(Nav4){ CntrTxt=MenuTextCentered!='left'?"<div align='"+MenuTextCentered+"'>":"";
TxtClose="</font>"+MenuTextCentered!='left'?"</div>":""}}
FirstColPos=Nav4?FrstLoc.document:FrstLoc.document.body;
SecColPos=Nav4?ScLoc.document:ScLoc.document.body;
DocColPos=Nav4?DcLoc.document:ScLoc.document.body;
if (TakeOverBgColor)FirstColPos.bgColor=AcrssFrms?SecColPos.bgColorocColPos.bgColor;
if(MenuCentered=='justify'&&FirstLineHorizontal)ClcJus();
if(FrstCreat){
FrstCntnr=CreateMenuStructure('Menu',NoOffFirstLineMenus);
FrstCreat=AcrssFrms?0:1}
else CreateMenuStructureAgain('Menu',NoOffFirstLineMenus);
if(TargetLoc)ClcTrgt();
if(MenuCentered)ClcLft();
if(MenuVerticalCentered)ClcTp();
PosMenu(FrstCntnr,StartTop,StartLeft);
IniFlg=1;
Initiate();
Creatd=1;
ScLdAgainWin=ExpYes?ScLoc.document.body:ScLoc;
ScLdAgainWin.onunload=UnLoaded;
Trigger.onresize=Nav4?ReDoWhole:RePos;
AfterBuild();
if(MenuVerticalCentered=='static'&&!AcrssFrms)setInterval('KeepPos()',250);
status='.:: Knowledge Management Systems ::.'}

function KeepPos(){
var TS=ExpYes?FrstLoc.document.body.scrollTop:FrstLoc.pageYOffset;
if(TS!=StaticPos){
var FCStyle=Nav4?FrstCntnr:FrstCntnr.style;
FCStyle.top=FrstCntnr.OrgTop=StartTop+TS;StaticPos=TS}}

function ClcJus(){
var a=BorderBtwnElmnts?1:2,b=BorderBtwnElmnts?BorderWidth:0;
var Size=Math.round(((FrstWinWdth-a*BorderWidth)/NoOffFirstLineMenus)-b),i,j;
for(i=1;i<NoOffFirstLineMenus+1;i++){j=eval('Menu'+i);j[5]=Size}
StartLeft=0}

function ClcTrgt(){
var TLoc=Nav4?FrstLoc.document.layers[TargetLoc]omYes?FrstLoc.document.getElementById(TargetLoc):FrstLoc.document.all[TargetLoc];
StartTop=M_StrtTp;
StartLeft=M_StrtLft;
if(DomYes){
while(TLoc){StartTop+=TLoc.offsetTop;StartLeft+=TLoc.offsetLeft;TLoc=TLoc.offsetParent}}
else{ StartTop+=Nav4?TLoc.pageY:TLoc.offsetTop;StartLeft+=Nav4?TLoc.pageX:TLoc.offsetLeft}}

function ClcLft(){
if(MenuCentered!='left'&&MenuCentered!='justify'){
var Size=FrstWinWdth-(!Nav4?parseInt(FrstCntnr.style.width):FrstCntnr.clip.width);
StartLeft=M_StrtLft;
StartLeft+=MenuCentered=='right'?Size:Size/2}}

function ClcTp(){
if(MenuVerticalCentered!='top'&&MenuVerticalCentered!='static'){
var Size=FrstWinHght-(!Nav4?parseInt(FrstCntnr.style.height):FrstCntnr.clip.height);
StartTop=M_StrtTp;
StartTop+=MenuVerticalCentered=='bottom'?Size:Size/2}}

function PosMenu(CntnrPntr,Tp,Lt){
var Topi,Lefti,Hori;
var Cntnr=CntnrPntr;
var Mmbr=Cntnr.FrstMbr;
var CntnrStyle=!Nav4?Cntnr.style:Cntnr;
var MmbrStyle=!Nav4?Mmbr.style:Mmbr;
var PadL=Mmbr.value.indexOf('<')==-1?LftXtra:0;
var PadT=Mmbr.value.indexOf('<')==-1?TpXtra:0;
var MmbrWt=!Nav4?parseInt(MmbrStyle.width)+PadL:MmbrStyle.clip.width;
var MmbrHt=!Nav4?parseInt(MmbrStyle.height)+PadT:MmbrStyle.clip.height;
var CntnrWt=!Nav4?parseInt(CntnrStyle.width):CntnrStyle.clip.width;
var CntnrHt=!Nav4?parseInt(CntnrStyle.height):CntnrStyle.clip.height;
var SubTp,SubLt;
RcrsLvl++;
if (RcrsLvl==1 && AcrssFrms)!MenuFramesVertical?Tp=FrstWinHght-CntnrHt+(Nav4?4:0):Lt=RightToLeft?0:FrstWinWdth-CntnrWt+(Nav4?4:0);
if (RcrsLvl==2 && AcrssFrms)!MenuFramesVertical?Tp=0:Lt=RightToLeft?ScWinWdth-CntnrWt:0;
if (RcrsLvl==2 && AcrssFrms){Tp+=VerCorrect;Lt+=HorCorrect}
CntnrStyle.top=RcrsLvl==1?Tp:0;
Cntnr.OrgTop=Tp;
CntnrStyle.left=RcrsLvl==1?Lt:0;
Cntnr.OrgLeft=Lt;
if (RcrsLvl==1 && FirstLineHorizontal){
Hori=1;Lefti=CntnrWt-MmbrWt-2*BorderWidth;Topi=0}
else{ Hori=Lefti=0;Topi=CntnrHt-MmbrHt-2*BorderWidth}
while(Mmbr!=null){
MmbrStyle.left=Lefti+BorderWidth;
MmbrStyle.top=Topi+BorderWidth;
if(Nav4)Mmbr.CmdLyr.moveTo(Lefti+BorderWidth,Topi+BorderWidth);
if(Mmbr.ChildCntnr){
if(RightToLeft)ChldCntnrWdth=Nav4?Mmbr.ChildCntnr.clip.widtharseInt(Mmbr.ChildCntnr.style.width);
if(Hori){ SubTp=Topi+MmbrHt+2*BorderWidth;
SubLt=RightToLeft?Lefti+MmbrWt-ChldCntnrWdth:Lefti}
else{ SubLt=RightToLeft?Lefti-ChldCntnrWdth+ChildOverlap*MmbrWt+BorderWidth:Lefti+(1-ChildOverlap)*MmbrWt+BorderWidth;
SubTp=RcrsLvl==1&&AcrssFrms?Topi:Topi+ChildVerticalOverlap*MmbrHt}
PosMenu(Mmbr.ChildCntnr,SubTp,SubLt)}
Mmbr=Mmbr.PrvMbr;
if(Mmbr){ MmbrStyle=!Nav4?Mmbr.style:Mmbr;
PadL=Mmbr.value.indexOf('<')==-1?LftXtra:0;
PadT=Mmbr.value.indexOf('<')==-1?TpXtra:0;
MmbrWt=!Nav4?parseInt(MmbrStyle.width)+PadL:MmbrStyle.clip.width;
MmbrHt=!Nav4?parseInt(MmbrStyle.height)+PadT:MmbrStyle.clip.height;
Hori?Lefti-=BorderBtwnElmnts?(MmbrWt+BorderWidth)MmbrWt):Topi-=BorderBtwnElmnts?(MmbrHt+BorderWidth)MmbrHt)}}
RcrsLvl--}

function Initiate(){
if(IniFlg){ Init(FrstCntnr);IniFlg=0;
if(ShwFlg)AfterCloseAll();ShwFlg=0}}

function Init(CntnrPntr){
var Mmbr=CntnrPntr.FrstMbr;
var MCStyle=Nav4?CntnrPntr:CntnrPntr.style;
RcrsLvl++;
MCStyle.visibility=RcrsLvl==1?M_Show:M_Hide;
while(Mmbr!=null){
if(Mmbr.Hilite){Mmbr.Hilite=0;if(KeepHilite)LowItem(Mmbr)}
if(Mmbr.ChildCntnr) Init(Mmbr.ChildCntnr);
Mmbr=Mmbr.PrvMbr}
RcrsLvl--}

function ClearAllChilds(Pntr){
var CPCCStyle;
while (Pntr){
if(Pntr.Hilite){
Pntr.Hilite=0;
if(KeepHilite)LowItem(Pntr);
if(Pntr.ChildCntnr){
CPCCStyle=Nav4?Pntr.ChildCntnr:Pntr.ChildCntnr.style;
CPCCStyle.visibility=M_Hide;
ClearAllChilds(Pntr.ChildCntnr.FrstMbr)}
break}
Pntr=Pntr.PrvMbr}}

pashah72
02-24-2006, 12:01 PM
menu_com1.js (part2) (continuing the script):

function GoTo(){
if(this.LinkTxt){
status='';
var HP=Nav4?this.LowLyr:this;
LowItem(HP);
this.LinkTxt.indexOf('javascript:')!=-1?eval(this.LinkTxt)cLoc.location.href=this.LinkTxt}}

function HiliteItem(P){
if(Nav4){
if(P.ro)P.document.images[P.rid].src=P.ri2;
else{ if(P.HiBck)P.bgColor=P.HiBck;
if(P.value.indexOf('<img')==-1){
P.document.write(P.Ovalue);
P.document.close()}}}
else{ if(P.ro){ var Lc=P.Level==1?FrstLoc:ScLoc;
Lc.document.images[P.rid].src=P.ri2}
else{ if(P.HiBck)P.style.backgroundColor=P.HiBck;
if(P.HiFntClr)P.style.color=P.HiFntClr}}
P.Hilite=1}

function LowItem(P){
if(P.ro){ if(Nav4)P.document.images[P.rid].src=P.ri1;
else{ var Lc=P.Level==1?FrstLoc:ScLoc;
Lc.document.images[P.rid].src=P.ri1}}
else{ if(Nav4){ if(P.LoBck)P.bgColor=P.LoBck;
if(P.value.indexOf('<img')==-1){
P.document.write(P.value);
P.document.close()}}
else{ if(P.LoBck)P.style.backgroundColor=P.LoBck;
if(P.LwFntClr)P.style.color=P.LwFntClr}}}

function OpenMenu(){
if(!Loadd||!Creatd) return;
var TpScrlld=ExpYes?ScLoc.document.body.scrollTop:ScLoc.pageYOffset;
var LScrlld=ExpYes?ScLoc.document.body.scrollLeft:ScLoc.pageXOffset;
var CCnt=Nav4?this.LowLyr.ChildCntnr:this.ChildCntnr;
var ThisHt=Nav4?this.clip.heightarseInt(this.style.height);
var ThisWt=Nav4?this.clip.widtharseInt(this.style.width);
var ThisLft=AcrssFrms&&this.Level==1&&!FirstLineHorizontal?0:Nav4?this.Container.leftarseInt(this.Container.style.left);
var ThisTp=AcrssFrms&&this.Level==1&&FirstLineHorizontal?0:Nav4?this.Container.toparseInt(this.Container.style.top);
var HP=Nav4?this.LowLyr:this;
CurrntOvr=this;
IniFlg=0;
ClearAllChilds(this.Container.FrstMbr);
HiliteItem(HP);
if(CCnt!=null){
if(!ShwFlg){ShwFlg=1; BeforeFirstOpen()}
var CCW=Nav4?this.LowLyr.ChildCntnr.clip.widtharseInt(this.ChildCntnr.style.width);
var CCH=Nav4?this.LowLyr.ChildCntnr.clip.heightarseInt(this.ChildCntnr.style.height);
var ChCntTL=Nav4?this.LowLyr.ChildCntnr:this.ChildCntnr.style;
var SubLt=AcrssFrms&&this.Level==1?CCnt.OrgLeft+ThisLft+LScrlld:CCnt.OrgLeft+ThisLft;
var SubTp=AcrssFrms&&this.Level==1?CCnt.OrgTop+ThisTp+TpScrlld:CCnt.OrgTop+ThisTp;
if(MenuWrap){
if(RightToLeft){
if(SubLt<LScrlld)SubLt=this.Level==1?LScrlld:SubLt+(CCW+(1-2*ChildOverlap)*ThisWt);
if(SubLt+CCW>ScWinWdth+LScrlld)SubLt=ScWinWdth+LScrlld-CCW}
else{ if(SubLt+CCW>ScWinWdth+LScrlld)SubLt=this.Level==1?ScWinWdth+LScrlld-CCW:SubLt-(CCW+(1-2*ChildOverlap)*ThisWt);
if(SubLt<LScrlld)SubLt=LScrlld}
if(SubTp+CCH>TpScrlld+ScWinHght)SubTp=this.Level==1?SubTp=TpScrlld+ScWinHght-CCH:SubTp-CCH+(1-2*ChildVerticalOverlap)*ThisHt;
if(SubTp<TpScrlld)SubTp=TpScrlld}
ChCntTL.top=SubTp;ChCntTL.left=SubLt;ChCntTL.visibility=M_Show}
status=this.LinkTxt}

function OpenMenuClick(){
if(!Loadd||!Creatd) return;
var HP=Nav4?this.LowLyr:this;
CurrntOvr=this;
IniFlg=0;
ClearAllChilds(this.Container.FrstMbr);
HiliteItem(HP);
status=this.LinkTxt}

function CloseMenu(){
if(!Loadd||!Creatd) return;
if(!KeepHilite){
var HP=Nav4?this.LowLyr:this;
LowItem(HP)}
status='';
if(this==CurrntOvr){
IniFlg=1;
if(CloseTmr)clearTimeout(CloseTmr);
CloseTmr=setTimeout('Initiate(CurrntOvr)',DissapearDelay)}}

function CntnrSetUp(Wdth,Hght,NoOff){
var x=RcrsLvl==1?BorderColor:BorderSubColor;
this.FrstMbr=null;
this.OrgLeft=this.OrgTop=0;
if(x)this.bgColor=x;
if(Nav4){ this.visibility='hide';
this.resizeTo(Wdth,Hght)}
else{ if(x)this.style.backgroundColor=x;
this.style.width=Wdth;
this.style.height=Hght;
this.style.fontFamily=FontFamily;
this.style.fontWeight=FontBold?'bold':'normal';
this.style.fontStyle=FontItalic?'italic':'normal';
this.style.fontSize=FontSize+'pt';
this.style.zIndex=RcrsLvl+Ztop}}

function MbrSetUp(MmbrCntnr,PrMmbr,WhatMenu,Wdth,Hght){
var Location=RcrsLvl==1?FrstLoc:ScLoc;
var MemVal=eval(WhatMenu+'[0]');
var t,T,L,W,H,S;
var a,b,c,d;
this.PrvMbr=PrMmbr;
this.Level=RcrsLvl;
this.LinkTxt=eval(WhatMenu+'[1]');
this.Container=MmbrCntnr;
this.ChildCntnr=null;
this.Hilite=0;
this.style.overflow='hidden';
this.style.cursor=ExpYes&&(this.LinkTxt||(RcrsLvl==1&&UnfoldsOnClick))?'hand':'default';
this.ro=0;
if(MemVal.indexOf('rollover')!=-1){
this.ro=1;
this.ri1=MemVal.substring(MemVal.indexOf(':')+1,MemVal.lastIndexOf(':'));
this.ri2=MemVal.substring(MemVal.lastIndexOf(':')+1,MemVal.length);
this.rid=WhatMenu+'i';MemVal="<img src='"+this.ri1+"' name='"+this.rid+"'>"}
this.value=MemVal;
if(RcrsLvl==1){
a=LowBgColor;
b=HighBgColor;
c=FontLowColor;
d=FontHighColor}
else{ a=LowSubBgColor;
b=HighSubBgColor;
c=FontSubLowColor;
d=FontSubHighColor}
this.LoBck=a;
this.LwFntClr=c;
this.HiBck=b;
this.HiFntClr=d;
this.style.color=this.LwFntClr;
if(this.LoBck)this.style.backgroundColor=this.LoBck;
this.style.textAlign=MenuTextCentered;
if(eval(WhatMenu+'[2]'))this.style.backgroundImage="url(\'"+eval(WhatMenu+'[2]')+"\')";
if(MemVal.indexOf('<')==-1){
this.style.width=Wdth-LftXtra;
this.style.height=Hght-TpXtra;
this.style.paddingLeft=LeftPaddng;
this.style.paddingTop=TopPaddng}
else{ this.style.width=Wdth;
this.style.height=Hght}
if(MemVal.indexOf('<')==-1&&DomYes){
t=Location.document.createTextNode(MemVal);
this.appendChild(t)}
else this.innerHTML=MemVal;
if(eval(WhatMenu+'[3]')&&ShowArrow){
a=RcrsLvl==1&&FirstLineHorizontal?3:RightToLeft?6:0;
S=Arrws[a];
W=Arrws[a+1];
H=Arrws[a+2];
T=RcrsLvl==1&&FirstLineHorizontal?Hght-H-2Hght-H)/2;
L=RightToLeft?2:Wdth-W-2;
if(DomYes){
t=Location.document.createElement('img');
this.appendChild(t);
t.style.position='absolute';
t.src=S;
t.style.width=W;
t.style.height=H;
t.style.top=T;
t.style.left=L}
else{ MemVal+="<div style='position:absolute; top:"+T+"; left:"+L+"; width:"+W+"; height:"+H+";visibility:inherit'><img src='"+S+"'></div>";
this.innerHTML=MemVal}}
if(ExpYes){this.onselectstart=CnclSlct;
this.onmouseover=RcrsLvl==1&&UnfoldsOnClick?OpenMenuClick:OpenMenu;
this.onmouseout=CloseMenu;
this.onclick=RcrsLvl==1&&UnfoldsOnClick&&eval(WhatMenu+'[3]')?OpenMenu:GoTo }
else{ RcrsLvl==1&&UnfoldsOnClick?this.addEventListener('mouseover',OpenMenuClick,false):this.addEventListener('mouseover',OpenMenu,false);
this.addEventListener('mouseout',CloseMenu,false);
RcrsLvl==1&&UnfoldsOnClick&&eval(WhatMenu+'[3]')?this.addEventListener('click',OpenMenu,false):this.addEventListener('click',GoTo,false)}}

pashah72
02-24-2006, 12:09 PM
menu_com1.js (part3) (continuing the script):

function NavMbrSetUp(MmbrCntnr,PrMmbr,WhatMenu,Wdth,Hght){
var a,b,c,d;
if(RcrsLvl==1){
a=LowBgColor;
b=HighBgColor;
c=FontLowColor;
d=FontHighColor}
else { a=LowSubBgColor;
b=HighSubBgColor;
c=FontSubLowColor;
d=FontSubHighColor }
this.value=eval(WhatMenu+'[0]');
this.ro=0;
if(this.value.indexOf('rollover')!=-1){
this.ro=1;
this.ri1=this.value.substring(this.value.indexOf(':')+1,this.value.lastIndexOf(':'));
this.ri2=this.value.substring(this.value.lastIndexOf(':')+1,this.value.length);
this.rid=WhatMenu+'i';this.value="<img src='"+this.ri1+"' name='"+this.rid+"'>"}
if(LeftPaddng&&this.value.indexOf('<')==-1&&MenuTextCentered=='left')this.value='&nbsp\;'+this.value;
if(FontBold)this.value=this.value.bold();
if(FontItalic)this.value=this.value.italics();
this.Ovalue=this.value;
this.value=this.value.fontcolor(c);
this.Ovalue=this.Ovalue.fontcolor(d);
this.value=CntrTxt+"<font face='"+FontFamily+"' point-size='"+FontSize+"'>"+this.value+TxtClose;
this.Ovalue=CntrTxt+"<font face='"+FontFamily+"' point-size='"+FontSize+"'>"+this.Ovalue+TxtClose;
this.LoBck=a;
this.HiBck=b;
this.ChildCntnr=null;
this.PrvMbr=PrMmbr;
this.Hilite=0;
this.visibility='inherit';
if(this.LoBck)this.bgColor=this.LoBck;
this.resizeTo(Wdth,Hght);
if(!AcrssFrms&&eval(WhatMenu+'[2]'))this.background.src=eval(WhatMenu+'[2]');
this.document.write(this.value);
this.document.close();
this.CmdLyr=new Layer(Wdth,MmbrCntnr);
this.CmdLyr.Level=RcrsLvl;
this.CmdLyr.LinkTxt=eval(WhatMenu+'[1]');
this.CmdLyr.visibility='inherit';
this.CmdLyr.onmouseover=RcrsLvl==1&&UnfoldsOnClick?OpenMenuClick:OpenMenu;
this.CmdLyr.onmouseout=CloseMenu;
this.CmdLyr.captureEvents(Event.MOUSEUP);
this.CmdLyr.onmouseup=RcrsLvl==1&&UnfoldsOnClick&&eval(WhatMenu+'[3]')?OpenMenu:GoTo;
this.CmdLyr.LowLyr=this;
this.CmdLyr.resizeTo(Wdth,Hght);
this.CmdLyr.Container=MmbrCntnr;
if(eval(WhatMenu+'[3]')&&ShowArrow){
a=RcrsLvl==1&&FirstLineHorizontal?3:RightToLeft?6:0;
this.CmdLyr.ImgLyr=new Layer(Arrws[a+1],this.CmdLyr);
this.CmdLyr.ImgLyr.visibility='inherit';
this.CmdLyr.ImgLyr.top=RcrsLvl==1&&FirstLineHorizontal?Hght-Arrws[a+2]-2Hght-Arrws[a+2])/2;
this.CmdLyr.ImgLyr.left=RightToLeft?2:Wdth-Arrws[a+1]-2;
this.CmdLyr.ImgLyr.width=Arrws[a+1];
this.CmdLyr.ImgLyr.height=Arrws[a+2];
ImgStr="<img src='"+Arrws[a]+"' width='"+Arrws[a+1]+"' height='"+Arrws[a+2]+"'>";
this.CmdLyr.ImgLyr.document.write(ImgStr);
this.CmdLyr.ImgLyr.document.close()}}

function CreateMenuStructure(MName,NumberOf){
RcrsLvl++;
var i,NoOffSubs,Mbr,Wdth=0,Hght=0;
var PrvMmbr=null;
var WMnu=MName+'1';
var MenuWidth=eval(WMnu+'[5]');
var MenuHeight=eval(WMnu+'[4]');
var Location=RcrsLvl==1?FrstLoc:ScLoc;
if (RcrsLvl==1&&FirstLineHorizontal){
for(i=1;i<NumberOf+1;i++){
WMnu=MName+eval(i);
Wdth=eval(WMnu+'[5]')?Wdth+eval(WMnu+'[5]'):Wdth+MenuWidth}
Wdth=BorderBtwnElmnts?Wdth+(NumberOf+1)*BorderWidth:Wdth+2*BorderWidth;Hght=MenuHeight+2*BorderWidth}
else{ for(i=1;i<NumberOf+1;i++){
WMnu=MName+eval(i);
Hght=eval(WMnu+'[4]')?Hght+eval(WMnu+'[4]'):Hght+MenuHeight}
Hght=BorderBtwnElmnts?Hght+(NumberOf+1)*BorderWidth:Hght+2*BorderWidth;Wdth=MenuWidth+2*BorderWidth}
if(DomYes){
var MmbrCntnr=Location.document.createElement("div");
MmbrCntnr.style.position='absolute';
MmbrCntnr.style.visibility='hidden';
Location.document.body.appendChild(MmbrCntnr)}
else{ if(Nav4) var MmbrCntnr=new Layer(Wdth,Location)
else{ WMnu+='c';
Location.document.body.insertAdjacentHTML("AfterBegin","<div id='"+WMnu+"' style='visibility:hidden; position:absolute;'><\/div>");
var MmbrCntnr=Location.document.all[WMnu]}}
MmbrCntnr.SetUp=CntnrSetUp;
MmbrCntnr.SetUp(Wdth,Hght,NumberOf);
if(Exp4){ MmbrCntnr.InnerString='';
for(i=1;i<NumberOf+1;i++){
WMnu=MName+eval(i);
MmbrCntnr.InnerString+="<div id='"+WMnu+"' style='position:absolute;'><\/div>"}
MmbrCntnr.innerHTML=MmbrCntnr.InnerString}
for(i=1;i<NumberOf+1;i++){
WMnu=MName+eval(i);
NoOffSubs=eval(WMnu+'[3]');
Wdth=RcrsLvl==1&&FirstLineHorizontal?eval(WMnu+'[5]')?eval(WMnu+'[5]'):MenuWidth:MenuWidth;
Hght=RcrsLvl==1&&FirstLineHorizontal?MenuHeight:eval(WMnu+'[4]')?eval(WMnu+'[4]'):MenuHeight;
if(DomYes){
Mbr=Location.document.createElement("div");
Mbr.style.position='absolute';
Mbr.style.visibility='inherit';
MmbrCntnr.appendChild(Mbr)}
else Mbr=Nav4?new Layer(Wdth,MmbrCntnr):Location.document.all[WMnu];
Mbr.SetUp=Nav4?NavMbrSetUp:MbrSetUp;
Mbr.SetUp(MmbrCntnr,PrvMmbr,WMnu,Wdth,Hght);
if(NoOffSubs) Mbr.ChildCntnr=CreateMenuStructure(WMnu+'_',NoOffSubs);
PrvMmbr=Mbr}
MmbrCntnr.FrstMbr=Mbr;
RcrsLvl--;
return(MmbrCntnr)}

function CreateMenuStructureAgain(MName,NumberOf){
var i,WMnu,NoOffSubs,PrvMmbr,Mbr=FrstCntnr.FrstMbr;
RcrsLvl++;
for(i=NumberOf;i>0;i--){
WMnu=MName+eval(i);
NoOffSubs=eval(WMnu+'[3]');
PrvMmbr=Mbr;
if(NoOffSubs)Mbr.ChildCntnr=CreateMenuStructure(WMnu+'_',NoOffSubs);
Mbr=Mbr.PrvMbr}
RcrsLvl--}

pashah72
02-24-2006, 02:23 PM
sorry, I forgot to give index1.js, here is the code for index1.js :

var brow= navigator.appName;
if(brow == "Microsoft Internet Explorer")
{
if (window.screen.width == 1024)
{
var StartLeft=25;
var StartTop=105;
}
else
{
var StartLeft=25;
var StartTop=105;
}
}
else
{
if (window.innerWidth == 1024)
{
var StartLeft=25;
var StartTop=105;
}
else
{
var StartLeft=25;
var StartTop=105;
}
}

var NoOffFirstLineMenus=11; // Number of first level items
var LowBgColor="#0066CB"; // Background color when mouse is not over
var LowSubBgColor='#8C8C8C'; // Background color when mouse is not over on subs
var HighBgColor="#0066CB"; // Background color when mouse is over
var HighSubBgColor='#0066CB'; // Background color when mouse is over on subs
var FontLowColor='#C9EBFF'; // Font color when mouse is not over
var FontSubLowColor='#ffffff'; // Font color subs when mouse is not over
var FontHighColor='#FFFFFF'; // Font color when mouse is over
var FontSubHighColor='#FFFFFF'; // Font color subs when mouse is over
var BorderColor="#0066CB"; // Border color
var BorderSubColor="#ffffff"; // Border color for subs
var BorderWidth=1; // Border width
var BorderBtwnElmnts=1; // Border between elements 1 or 0
var FontFamily="arial" // Font family menu items
var FontSize=9; // Font size menu items
var FontBold=0; // Bold menu items 1 or 0
var FontItalic=0; // Italic menu items 1 or 0
var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right'
var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right'
var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
var ChildOverlap=0; // horizontal overlap child/ parent
var ChildVerticalOverlap=0; // vertical overlap child/ parent
//var StartTop=20; // Menu offset x coordinate
//var StartLeft=150; // Menu offset y coordinate
var VerCorrect=0; // Multiple frames y correction
var HorCorrect=0; // Multiple frames x correction
var LeftPaddng=2; // Left padding
var TopPaddng=2; // Top padding
var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
var MenuFramesVertical=0; // Frames in cols or rows 1 or 0
var DissapearDelay=75; // delay before menu folds in
var TakeOverBgColor=0; // Menu frame takes over background color subitem frame
var FirstLineFrame='navig'; // Frame where first level appears
var SecLineFrame='space'; // Frame where sub levels appear
var DocTargetFrame='space'; // Frame where target documents appear
var TargetLoc=''; // span id for relative positioning
var HideTop=0; // Hide first level when loading new document 1 or 0
var MenuWrap=0; // enables/ disables menu wrap 1 or 0
var RightToLeft=0; // enables/ disables right to left unfold 1 or 0
var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover
var WebMasterCheck=0; // menu tree checking on or off 1 or 0
var ShowArrow=1; // Uses arrow gifs when 1
var KeepHilite=1; // Keep selected path highligthed
var Arrws=['/RLL_Intra/images/tri.gif',3,10,'/RLL_Intra/images/tridown.gif',6,4,'/RLL_Intra/images/trileft.gif',5,10];
// Arrow source, width and height

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}


// Menu tree
//MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
// For rollover images set "Text to show" to: "companyprofileroll:Image1.jpg:contactus.jpg"
//Menu1=new Array("rollover:images/companyprofileroll.jpg:images/exportsroll.jpg","","",0,83,125);
// <font face='webdings' size=2>4</font>
/*Menu1=new Array("<img src='images/whitepatch.jpg' border=0>","","",0,20,25);

Menu2=new Array("<img src='images/logistics.jpg' border=0>","","",0,20,70);

Menu3=new Array("rollover:images/home.jpg:images/homeroll.jpg","index.htm","",0,20,51);
//Menu2_2=new Array("rollover:images/menus/management.jpg:images/menus/managementroll.jpg","management.htm","",0,17,84);

//Menu4=new Array("<img src='images/whitepatch.jpg' border=0>","","",0,20,1);*/

// MENU 1

Menu1=new Array("About Company","http://www.ril.com","",3,20,100);
Menu1_1=new Array("Menu1","#","",0,18,100);
Menu1_2=new Array("Menu2","#","",0,18,100);
Menu1_3=new Array("Menu3","#","",0,18,100);
Menu2=new Array("|","","",0,18,5);
Menu3=new Array("Documents","#","",3,20,90);
Menu3_1=new Array("Menu1","#","",0,18,100);
Menu3_2=new Array("Menu2","#","",0,18,100);
Menu3_3=new Array("Menu3","#","",0,18,100);
Menu4=new Array("|","","",0,18,5);
Menu5=new Array("Corporate Announcements","#","",3,20,165);
Menu5_1=new Array("Menu1","#","",0,18,165);
Menu5_2=new Array("Menu2","#","",0,18,165);
Menu5_3=new Array("Menu3","#","",0,18,165);
Menu6=new Array("|","","",0,18,5);
Menu7=new Array("Library Management ","#","",3,20,135);
Menu7_1=new Array("Menu1","#","",0,18,135);
Menu7_2=new Array("Menu2","#","",0,18,135);
Menu7_3=new Array("Menu3","#","",0,18,135);
Menu8=new Array("|","","",0,18,5);
Menu9=new Array("HR-Process","#","",3,20,93);
Menu9_1=new Array("Menu1","#","",0,18,100);
Menu9_2=new Array("Menu2","#","",0,18,100);
Menu9_3=new Array("Menu3","#","",0,18,100);
Menu10=new Array("|","","",0,18,5);
Menu11=new Array("Collaboration","#","",3,20,95);
Menu11_1=new Array("Menu1","#","",0,18,100);
Menu11_2=new Array("Menu2","#","",0,18,100);
Menu11_3=new Array("Menu3","#","",0,18,100);

pashah72
02-24-2006, 02:25 PM
By the way, index1.js & menu_com1.js is call in header1.js

if U see header1.js, there is code written where index1.js & menu_com1.js is embeded as writted below :

document.write(' <td height="32" align="right" valign="middle" background="images/blue.jpg"><script type="text/javascript" src="scripts/index1.js"></script> ');
document.write(' <script type="text/javascript" src="scripts/menu_com.js"></script></td>');


just change filename menu_com.js to menu_com1.js

pashah72
02-24-2006, 03:10 PM
Hi

sending zip file.

Looking forward for an early reply.

Thanks

JeffSinNHUSA
02-24-2006, 06:27 PM
Looks like Milonic has a solution:

http://www.milonic.com/menusample14.php

jscheuer1
02-24-2006, 08:01 PM
Looks like Milonic has a solution:

http://www.milonic.com/menusample14.php

Ya, that's amazing! I didn't think it was possible but, don't get too excited yet. I had a look at his fairly well protected source code and it is extremely complex, uses iframes, browser sniffing, and who knows what else that generally should be avoided in such an exercise. I could probably reverse engineer it to find what really does the trick in IE but, that would be technically illegal and perhaps fruitless. The odd thing is that he would require so much code for a simple effect that is the default behavior in all browsers save IE.

To use his code though, if you want to, do the ethical thing and purchase it. Just be aware that it will load up your page with tons of code and (from the looks of it, I could be wrong on this one) be hard to use.

pashah72
02-25-2006, 01:05 PM
Hi

U can copy paste the code or see the zip file which I have sent as attachment. Just Click on test1.html & U will see the menu. I need drop down menu (which is coming from 'js' file) overlap select form element & not hide select form element.

Looking forward for an early reply.

Thanks

jscheuer1
02-25-2006, 02:43 PM
Well, for your example, all you need to do to use the hiding method is add to the OpenMenu() function in menu_com1.js:


function OpenMenu(){
if (document.body.filters)
document.getElementById('select').style.visibility='hidden'
if(!Loadd||!Creatd) return;
var TpScrlld=ExpYes?ScLoc.document.body.scrollTop:ScLoc.pageYOffset;
var LScrlld=ExpYes?ScLoc.document.body.scrollLeft:ScLoc.pageXOffset;
var CCnt=Nav4?this.LowLyr.ChildCntnr:this.ChildCntnr;
var ThisHt=Nav4?this.clip.height:pars
. . . snip!

and add to CloseMenu():


function CloseMenu(){
if (document.body.filters)
document.getElementById('select').style.visibility=''
if(!Loadd||!Creatd) return;
if(!KeepHilite){
var HP=Nav4?this.LowLyr:this;
LowItem(HP)}
status='';
if(this==CurrntOvr){
IniFlg=1;
if(CloseTmr)clearTimeout(CloseTmr);
CloseTmr=setTimeout('Initiate(CurrntOvr)',DissapearDelay)}}

JeffSinNHUSA
02-27-2006, 04:15 PM
This solution seems less verbose. Maybe it can be tweaked for our needs.

http://dev2dev.bea.com/pub/a/2005/04/portal_menus.html

JeffSinNHUSA
02-28-2006, 08:51 PM
Not fully tested on all browsers, but this seems to work in IE6. Basically, an Iframe is created. When the menu is displayed, the Iframe is displayed at the same coordinates with a z-index one less.

New functions (in bold):

// Hide IFrame
function hideIframe() {
var theIframe = document.getElementById("dropmenuiframe")
theIframe.style.display = "none";
}

// Unhide IFrame
function unhideIframe() {
var theIframe = document.getElementById("dropmenuiframe")
var theDiv = document.getElementById("dropmenudiv");
theIframe.style.visibility = "visible";
theIframe.style.width = theDiv.offsetWidth;
theIframe.style.height = theDiv.offsetHeight;
theIframe.style.top = theDiv.offsetTop;
theIframe.style.left = theDiv.offsetLeft;
theIframe.style.zIndex = theDiv.style.zIndex - 1;
theIframe.style.position="absolute";
theIframe.style.display = "block";
}

Modified Script (changes in bold):

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="z-index:100;
visibility:hidden;width:160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
document.write('<iframe id="dropmenuiframe" src="" ></iframe>')



Modified Functions (names in bold, changes in bold):

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") {
obj.visibility=visible
unhideIframe() }
else if (e.type=="click") {
obj.visibility=hidden
hideIframe() }
}

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
unhideIframe()
}

return clickreturnvalue()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
hideIframe()
}
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes") {
document.onclick=hidemenu
hideIframe()
}

jscheuer1
03-01-2006, 04:53 AM
Not fully tested on all browsers, but this seems to work in IE6. Basically, an Iframe is created. When the menu is displayed, the Iframe is displayed at the same coordinates with a z-index one less.

Since these shenanigans are only required and possible in IE5+ (current beta7 without standing), might as well make them IE specific. There are various ways to do this, for HTML markup, use IE conditional comments:

<!--[if gte IE 5]>
IE5+ specific HTML code here
<![endif]-->

For the script code, a good IE5+ check would be:


if (document.body.filters) {
stuff to do only for IE5+ here
}

Hopefully, and there is a good chance of it, this stuff will no longer be needed in the v7 full release but, if so, a method of shielding it from them will need to be devised.

pashah72
03-01-2006, 09:14 AM
Hi jscheuer1 & JeffSinNHUSA

First of all, jscheuer1 code (which is in red) works fine but select gets hidden & I need drop down menu (which is coming from 'js') to overlap select. Secondly whenever there is mouseover on any drop down main menu (there are 6 main menu), select gets hidden which looks dirty. whenever there is mouseover over Main Menu like 'About Company', 'Colloboration' , select get hidden & select element is not below this main menu.

And JeffSinNHUSA did something with IFrame which I tried to implement but could'nt succeed.

If U can help with files(zip) which I have sent as attachment.

Looking forward for an early reply.

Thanks

adaminco
03-01-2006, 04:00 PM
Why make thing's so complicated???
Just make the select boxes dissapear whilst the menu is active. Nobody will care that they are gone for a moment because they are looking at the dropdown. The only problem that hiding the select boxes causes (in the suggestions you've seen) is that they can make content move upwards without their presence. It can also mean having to directly change selectboxes to hide them.


Here's my simple solution for you.


Make this function available somewhere so that it runs either at the end of the page or in your HEAD possible in the same place your menu works.



function hide_dropdowns(what){
if(what=="in"){
var anchors = document.getElementsByTagName("select");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
anchor.style.position="relative";
anchor.style.top="0px";
anchor.style.left="-2000px";
}
}else{
var anchors = document.getElementsByTagName("select");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
anchor.style.position="relative";
anchor.style.top="0px";
anchor.style.left="0px";
}
}
}


Then..on the main parent DIV of your menu... run two events on mouseover and mouseout. Obviously so you can hide the selects on mouseover and bring them back on mouseout


onmouseout="hide_dropdowns('in')" onmouseout="hide_dropdowns('out')"

This method makes the select boxes vanish WITHOUT making the content move or jolt all over the place.
Hope that helps.


Sometimes, it's alot better to make things less complicated than to try and be clever and apply 400 more lines of code and 30 layers. At the end of the day you just need to think..will you're visitors really care.

jscheuer1
03-01-2006, 04:13 PM
Why make thing's so complicated???
Just make the select boxes dissapear whilst the menu is active. Nobody will care that they are gone for a moment because they are looking at the dropdown. The only problem that hiding the select boxes causes (in the suggestions you've seen) is that they can make content move upwards without their presence. It can also mean having to directly change selectboxes to hide them.

Nothing jumped with my method of hiding the selects, I think you have the visibility and display properties confused. Visibility, when hidden, still maintains the space occupied by the hidden element. It is when display is set to none, that the formatting of the page is thrown off. So, it is actually more complicated to do it your way if, all you are after is hiding the element.

jscheuer1
03-01-2006, 04:29 PM
Hi jscheuer1 & JeffSinNHUSA

First of all, jscheuer1 code (which is in red) works fine but select gets hidden & I need drop down menu (which is coming from 'js') to overlap select. Secondly whenever there is mouseover on any drop down main menu (there are 6 main menu), select gets hidden which looks dirty. whenever there is mouseover over Main Menu like 'About Company', 'Colloboration' , select get hidden & select element is not below this main menu.

And JeffSinNHUSA did something with IFrame which I tried to implement but could'nt succeed.

If U can help with files(zip) which I have sent as attachment.

Looking forward for an early reply.

Thanks

I've tried out JeffSinNHUSA's code with DD's anylink drop down menu (which is what it is written for). It is pretty good but, as written in his post, needs a bit of tweaking. Particularly the 'horizontaloffset' variable, it is undefined, unless I missed something. Also the dropmenuobj.style.top, just below that, needed an offset of some kind as well. Substituting/inserting the apparently appropriate values (at least for the demo version) fixed that but then, I noticed that the onlclick iframe 'shim' would not disappear onclick (second click on the activating link) as the menu does and as the both do for the onmouseover activated drop down. I'll look into fixing that, creating the IE specific branching I mentioned in a previous post, and defining the 'horizontaloffset' variable, perhaps automatically but, even with success, this will only apply to DD's anylink. What would be really cool would be to find a unit, applied to any drop down menu, that could make it use this technique in only the browsers that need it. This may be impossible, owing to its complexity, individual fixes for each type drop down menu may be required.

All things considered though, very nice work, JeffSinNHUSA!

pashah72
03-03-2006, 10:40 AM
Hi

I am using IE 6.0. It is not overlapping select in IE but I heard it is overlapping in netscape, firefox, mozilla. Looks like some bug in IE, maybe later version of IE may solve this problem, but can't say if z-index problem of select is not solved in IE 7.0 also.

If U goto : http://dev2dev.bea.com/pub/a/2005/04/portal_menus.html, they have solved it. I don't know how to incorporate in mycode.

Looking forward for an early reply.

Thanks

jscheuer1
03-03-2006, 01:34 PM
Hi

I am using IE 6.0. It is not overlapping select in IE but I heard it is overlapping in netscape, firefox, mozilla. Looks like some bug in IE, maybe later version of IE may solve this problem, but can't say if z-index problem of select is not solved in IE 7.0 also.

If U goto : http://dev2dev.bea.com/pub/a/2005/04/portal_menus.html, they have solved it. I don't know how to incorporate in mycode.

Looking forward for an early reply.

Thanks

Their solution works with their menu only, if you want it, use their menu. I'm still working on using this seamlessly with DD's anylink drop down menu but, if you (can) follow JeffSinNHUSA's method and tweak it a bit, it is already serviceable for DD's anylink drop down. Here is what I have for that so far, it has some problems but works mostly (really messes up in FF though, that is why branching is needed):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Anylink drop down 'Shim' - a work in progress</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}

</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">CNN</a>'
menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'

var menuwidth='165px' //default menu width
var menubgcolor='lightyellow' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

//if (ie4||ns6)
//document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="z-index:100;visibility:hidden;width:160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
document.write('<iframe id="dropmenuiframe" src="" style="display:none;"></iframe>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") {
obj.visibility=visible
unhideIframe() }
else if (e.type=="click") {
obj.visibility=hidden
hideIframe() }
}


function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth-80+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+20+"px"
unhideIframe()
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
hideIframe()
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes") {
document.onclick=delayhidemenu//function(){
//hidemenu();
//hideIframe();
//}
}


// Hide IFrame
function hideIframe() {
var theIframe = document.getElementById("dropmenuiframe")
theIframe.style.display = "none";
}

// Unhide IFrame
function unhideIframe() {
var theIframe = document.getElementById("dropmenuiframe")
var theDiv = document.getElementById("dropmenudiv");
theIframe.style.visibility = "visible";
theIframe.style.width = theDiv.offsetWidth;
theIframe.style.height = theDiv.offsetHeight;
theIframe.style.top = theDiv.offsetTop;
theIframe.style.left = theDiv.offsetLeft;
theIframe.style.zIndex = theDiv.style.zIndex - 1;
theIframe.style.position="absolute";
theIframe.style.display = "block";
}
</script>
</head>
<body>
<img name="bob" src="../fold.gif">
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a> |

<a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a> (onclick)<br>
<form name="layers">
<select>
<option value="b">mjkujdhgdffghbz;jfhvgzfg
<option value="r">fhagh
<option value="f">wgjsuk
</select>
</form>
</body>
</html>

jscheuer1
03-03-2006, 03:10 PM
Here's a version of DD's AnyLink Drop Down Menu that works for selects in IE5.5+ and still looks good for Opera and FF. Once IE7 comes out, modification may be required to shield it from these changes but that will be a simple matter. However this may not be needed and in fact these changes may benefit IE7. Time will tell. The demo:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Anylink Drop Down Menu over Selects - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}

</style>


<!--[if gte IE 5.5]>
<iframe id="dropmenuiframe" src="" style="z-index:99;display:none;position:absolute;"></iframe>
<![endif]-->

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified here to drop over selects by
* jscheuer1 & JeffSinNHUSA in http://www.dynamicdrive.com/forums
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">CNN</a>'
menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'

var menuwidth='165px' //default menu width
var menubgcolor='lightyellow' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ie5_5=typeof dropmenuiframe=='undefined'? 0 : 1
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="z-index:100;visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top='-500px'
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") {
obj.visibility=visible
unhideIframe() }
else if (e.type=="click") {
setTimeout("hideIframe();",0);
obj.visibility=hidden
}
}


function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
unhideIframe()
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
hideIframe()
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes") {
document.onclick=delayhidemenu
}

// Hide IFrame
function hideIframe() {
if (ie5_5){
var theIframe = document.getElementById("dropmenuiframe")
theIframe.style.display = "none";
}
}

// Unhide IFrame
function unhideIframe() {
if (ie5_5){
var theIframe = document.getElementById("dropmenuiframe")
var theDiv = document.getElementById("dropmenudiv");
theIframe.style.width = theDiv.offsetWidth+'px';
theIframe.style.height = theDiv.offsetHeight+'px';
theIframe.style.top = theDiv.offsetTop+'px';
theIframe.style.left = theDiv.offsetLeft+'px';
theIframe.style.display = "block";
}
}
</script>
</head>
<body>
<form>
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a> |
<a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a> (onclick)
<br>&nbsp;<br>
<select>
<option value="b">mjkujdhgdffghbz;jfhvgzfg
<option value="r">fhagh
<option value="f">wgjsuk
</select>
</form>
</body>
</html>

JeffSinNHUSA
03-03-2006, 04:26 PM
All things considered though, very nice work, JeffSinNHUSA!


Thanks - we went live with it yesterday - www.l-com.com (search for cables and you will see select boxes)

Seems to work well in netscape, IE and Firefox

jscheuer1
03-03-2006, 04:35 PM
Thanks - we went live with it yesterday

Ah, but in FF the iframe's border is showing, or looks to be, while in Opera all I see is the iframe, even when there is no select. My mod (in which I credited you) doesn't use an iframe except for IE5.5+. The iframe shouldn't be used in any other browsers anyway, just takes up resources.

JeffSinNHUSA
03-03-2006, 07:35 PM
Great - thanks for the cleanup!

Bad Mojo
04-07-2006, 04:35 AM
Hi New here to this forum....and really javascript in general. I am using this menu and have tried your example however if there are multiple drop down lists then only the first one will disappear, the rest of them continue to display while using the navigation.

So, obviously my question is, is how do I make all the lists disappear?

Other than that this works very well.


Well, for your example, all you need to do to use the hiding method is add to the OpenMenu() function in menu_com1.js:


function OpenMenu(){
if (document.body.filters)
document.getElementById('select').style.visibility='hidden'
if(!Loadd||!Creatd) return;
var TpScrlld=ExpYes?ScLoc.document.body.scrollTop:ScLoc.pageYOffset;
var LScrlld=ExpYes?ScLoc.document.body.scrollLeft:ScLoc.pageXOffset;
var CCnt=Nav4?this.LowLyr.ChildCntnr:this.ChildCntnr;
var ThisHt=Nav4?this.clip.height:pars
. . . snip!

and add to CloseMenu():


function CloseMenu(){
if (document.body.filters)
document.getElementById('select').style.visibility=''
if(!Loadd||!Creatd) return;
if(!KeepHilite){
var HP=Nav4?this.LowLyr:this;
LowItem(HP)}
status='';
if(this==CurrntOvr){
IniFlg=1;
if(CloseTmr)clearTimeout(CloseTmr);
CloseTmr=setTimeout('Initiate(CurrntOvr)',DissapearDelay)}}

kag
05-09-2006, 03:20 PM
It would be nice if an updated version would be posted to the site!

jscheuer1
05-09-2006, 05:04 PM
Hi New here to this forum....and really javascript in general. I am using this menu and have tried your example however if there are multiple drop down lists then only the first one will disappear, the rest of them continue to display while using the navigation.

So, obviously my question is, is how do I make all the lists disappear?

Other than that this works very well.

Where this sort of thing is done:


if (document.body.filters)
document.getElementById('select').style.visibility='hidden'

add to it like so:


if (document.body.filters){
document.getElementById('select').style.visibility='hidden'
document.getElementById('select1').style.visibility='hidden'
document.getElementById('select2').style.visibility='hidden'
document.getElementById('select3').style.visibility='hidden'
}

Use as many id's as you need, with each one assigned to the select element you want to hide. Don't forget to reverse the process for each one later.