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
PeejAvery
February 23rd, 2006, 10:19 AM
Please post your code. Without it we cannot see what the possible problems might be.
Concerning z-index, that only sets which absolute item will be on top or below another item. If you are using a drop-down menu, you would be using absolute DIV tags and this would already be set to on top.
paresh72
February 24th, 2006, 05:00 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);
// -->
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;
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 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]:DomYes?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.width:parseInt(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}}
paresh72
February 24th, 2006, 05:08 AM
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):DcLoc.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.height:parseInt(this.style.height);
var ThisWt=Nav4?this.clip.width:parseInt(this.style.width);
var ThisLft=AcrssFrms&&this.Level==1&&!FirstLineHorizontal?0:Nav4?this.Container.left:parseInt(this.Container.style.left);
var ThisTp=AcrssFrms&&this.Level==1&&FirstLineHorizontal?0:Nav4?this.Container.top:parseInt(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.width:parseInt(this.ChildCntnr.style.width);
var CCH=Nav4?this.LowLyr.ChildCntnr.clip.height:parseInt(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 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--}
PeejAvery
February 24th, 2006, 08:24 AM
You are missing index1.js and forgot to mention header1.js in your paragraph explaining how to set it up. Can you please just ZIP it and attach it?
paresh72
February 24th, 2006, 09:09 AM
sorry, 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);
Also menu_com1.js and index1.js have to go in a sub folder names scripts. Can you please make these corrections and post all this in a ZIP file?
I am on my Mac right now and I am not seeing the menu. I will have to take a look at it when I get back from my trip and go to work.
paresh72
February 24th, 2006, 09:56 AM
Hi
sending zip file.
Looking forward for an early reply.
Thanks
paresh72
February 25th, 2006, 02:18 AM
Hi
I hope U had a good trip. I had sent 'zip' file. Just click on test1.html & U will see the menu. As I said drop down menu (which is coming from 'js' file) should overlap select form element & not hide select form element.
Please do the needful.
Looking forward for an early reply.
Thanks
cherish
February 27th, 2006, 12:22 AM
Hello guys. I have encountered a similar problem. In my search for a solution, I've found out that selects do not respect z-indexes and will appear above all other elements. One way to solve this is by by hiding the select as stated in the following link:
http://archivist.incutio.com/viewlist/css-discuss/62892 (follow the link for the "workaround").
Another way (which I just found out) is by using an IFRAME positioned on top of the select element as shown in the following link: http://www.codetoad.com/forum/20_22736.asp (look at 3rd post from top)
For more info on Z-Index:
http://support.microsoft.com/default.aspx?scid=kb;en-us;177378
paresh72
March 1st, 2006, 03:54 AM
Hi Cherish
If U see my previous thread, I have sent 'zip' files as attachment, can U work on it because I can't clearly get the idea which U have sent thru url links.
Looking forward for an early reply.
Thanks
cherish
March 1st, 2006, 04:30 AM
Hello,
Could you also please attach a snapshot (actual menu) of what you have so far? The solutions I have found actually depends on how your menu is setup. Is your menu on the left side, or is it on the top? I will try to help you, but I won't promise you anything.. for I also have a deadline this week.
Regards
cherish
March 2nd, 2006, 12:17 AM
Hello parehs72,
I don't have the time to analyze your codes. But what I can do is give you some idea as to how the IFRAME solution works. Have you seen and tried the HTML code Troy Wolf posted on that link I gave. Here's the code:<script language=javascript>
function ShowMenu() {
document.getElementById("frTest").style.display = "inline";
}
function HideMenu() {
document.getElementById("frTest").style.display = "none";
}
</script>
<body>
<IFRAME id="frTest" style="width:120px;height:150px;position:absolute;top:20;left:40;display:none;" frameborder=0 scrolling=no marginwidth=0 src="" marginheight=0></iframe>
<form name="myForm">
Here are some select lists<br>
<table><tr><td>
<select name=colors>
<option value=1>Red</option>
<option value=2>Green</option>
<option value=3>Blue</option>
</select>
</td><td>
<select name=cars>
<option value=1>Chevy</option>
<option value=2>Toyota</option>
<option value=3>Volkswagon</option>
</select>
</td></tr></table>
<br><br>
<input type=button value="Place IFRAME over select lists" onclick="ShowMenu()">
<input type=button value="Hide the IFRAME" onclick="HideMenu()">
</form>
</body>The above code generates the following page:
http://www.geocities.com/che_rish2000/codeguru/iframe_scr1.jpg
Clicking on the "Place IFRAME over select lists" button will produce this:
http://www.geocities.com/che_rish2000/codeguru/iframe_scr2.jpg
Do you see the white area that covered a part of the SELECT list? This is activated by the following codes (take note of the ID attribute of IFRAME):<script language=javascript>
function ShowMenu() {
document.getElementById("frTest").style.display = "inline";
}
function HideMenu() {
document.getElementById("frTest").style.display = "none";
}
</script>
<body>
<IFRAME id="frTest" style="width:120px;height:150px;position:absolute;top:20;left:40;display:none;" frameborder=0 scrolling=no marginwidth=0 src="" marginheight=0></iframe>The most important part of this code is the IFRAME part. So basically, you would wrap your pulldown menu in IFRAME tag with the width and height to accomodate the pulldown you want to show. I guess, you would have to do this on every pulldown that appears per menu item (I believe you can do this dynamically too).
Just think of it this way, IFRAME creates the space for your pulldown menu that goes over these SELECT lists. I'm sure your pulldown code works just fine except for that part where the SELECT lists shows thru. You just need this IFRAME to place your pulldown menu in.
Hope these helps. Regards. :)
PeejAvery
March 2nd, 2006, 10:39 AM
EDIT: I guess I have lost track of what the real problem is. I though that it was the DIV showing up under the select tag. Is this the case? This works in Firefox also.
Well, here's the problem for me. I can only work on a solution when I am at work because Safari for Mac shows it properly. On my iBook using Safari I see the following.
paresh72
March 3rd, 2006, 01:36 AM
Hi peejavery
Welcome back, 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
PeejAvery
March 3rd, 2006, 07:49 AM
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.
Well, all that they did at this website is basically turn it into frames. If you make the JavaScript menu the only thing that shows up on the first webpage. Now make all the rest of this index1.html show up in the IFRAME.
bigBA
March 3rd, 2006, 11:02 AM
Well, all that they did at this website is basically turn it into frames. If you make the JavaScript menu the only thing that shows up on the first webpage. Now make all the rest of this index1.html show up in the IFRAME.
well, no. they didn't just turned all into an iframe.
what they did is putting an iframe between the select field and the menu div.
IMHO, thats really awesome and the neatest idea i saw around to solve this problem. :thumb:
and it shouldn't be hard to adept this to other sites.
codeguru.com
Copyright Internet.com Inc., All Rights Reserved.