Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Z-index does not help

Status
Not open for further replies.
296097

296097

Programmer
Aug 13, 2004
32
US
The porblem I am having is that on one partciular screen when my drop down is made visible via some Javascript when the user hovers over the relevant main menu item my drop down appears over everything except for the drop down boxes already displayed which it goes behind. I have tried
setting the Z-index of the drop down when it is created but this seems to have no effect.I will post the Javascript code for the drop down menu if it helps for you to resolve this issue.
thank you
 
Sort by date Sort by votes
a select box is a windowed element, therefore nothing can be drawn over it.

however there is an IFRAME workaround.
i have an FAQ that has an example. just try modifying it (it draws divs over the seletc box and hides the div's borders)...

faq215-5316

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
The other workaround is to set the display of the select to "none" when the mouseOver event happens and show it again on the mouseOut event.

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

zen.gif

 
Upvote 0 Downvote
Just posetd the javaScript code i used for the drop down menu.I am a little bit confused where to make those changes.Please it is very annoying to see the select box on the top of the drop down menu. as always your help is appreciated.


<html>

<head>
<title>MnDOT- Bid Letting Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!--Your Header information should be copied into this location replacing the information between the first <head> under the <html> and the </head> right under this statement. -->

<STYLE TYPE="text/css">
<!--.nound{text-decoration:none}-->
</STYLE>
<style type="text/css">
<!--
a {
text-decoration:none;
}
a:hover {
color:#8b0000;
font-style:normal;
font-family:Arial;
}
body {
font-family:Arial, Helvetica, sans-serif, Geneva, Swiss, SunsSans-Regular;
}
.format1 {
font-weight:bold;
font-size:10pt;
}
clr {
color:#ffffff;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

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

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

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/topnav.js" type="text/javascript"></script>
<script language="JavaScript" src="js/maps.js" type="text/javascript"></script>

</head>

<!--This style code defines a class named "nound" which is easier to type than 'style="text-decoration:none"' -->

<body bgcolor="#FFFFFF" background="/images/templates/blue.gif" onLoad="MM_preloadImages('images/images4/intropicture_r2_c1_f2.jpg','images/images4/intropicture_r2_c7_f2.jpg','images/images4/intropicture_r9_c5_f2.jpg','images/images4/intropicture_r9_c1_f2.jpg')">
<div id="MNDOT_legacy_browser_notification">
<table bgcolor="#8b0000" width="100%" style="background-color:#8b0000; color:#ffee00; width:100%; margin:0px; padding:1px;">
<tr><td>
The browser version you are currently using is not supported by this web site.
The Mn/DOT Bid Letting&nbsp; strongly recommends viewing this web site only with a supported browser:
Netscape version 5+ and Internet Explorer 5+.
Click one of these links to download a supported browser:
<a style="color:white;" title="Click" href=" Explorer</a>,
<a style="color:white;" title="Click" href=" <a style="color:white;" title="Click" href=" </td></tr>
</table>
</div>
<script language="JavaScript" type="text/javascript">
//hide legacy notification; should fail for legacy browsers
MNDOT_legacy = document.getElementById("MNDOT_legacy_browser_notification");
MNDOT_legacy.style.display = "none";
</script>
<table border="0" cellspacing="0" cellpadding="3" width="468">
<tr>
<td width="139" align="left" valign="top">
<!--#include virtual="/ssi/logo.html" -->
<!--This is where you can insert your own navigation items. Begin Here. -->
<!--#include virtual="ssi/leftnavigationgreen.html" -->
<!--This is where you can insert your own navigation items. End Here. -->
<hr width="128" size="5" align="left"><br>
<!--#include virtual="/ssi/main.html" -->
</td>
<td valign="top" align="left" width="468">
<!--=====================================main content here=========================================-->
<table border="0" width="468" height="177">
<tr>
<td height="125" width="468">
<p align="center">
<img border="0" src="images/headerlogo1.gif" width="468" height="116" alt="Bid Letting Website Logo">
</td>
</tr>
<tr>
<td height="23" width="468">
<p></td>
</tr>
<tr>
<td bgcolor="#71B8FF" height="2" width="468"><img src="images/spacer.gif" height="1"></td>
</tr>
<tr>
<td height="1" width="468">
<script type="text/javascript" src="js/exmplmenu_var.js"></script>
<script type="text/javascript" src="js/menu_com.js"></script></td>
</tr>

<tr>
<td width="468">
<div align="left">
<table border="1" width="468" height="169" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<th width="468" bgcolor="#93C9FF" height="19" align="center">
<font size="2" face="Arial"> Advertisement</font></th>
</tr>
<tr>
<td width="468" class="special2" height="138" valign="top">
<p align="center"><b><font size="2" face="Arial">
<u>Note:</u></font></b><ul type="square">
<li>
<p align="left"><font size="2" face="Arial">Advertisements For Construction
Projects.</font></li>
<li>
<p align="left"><font size="2" face="Arial">3 Week Ad Includes Projects Previously
Advertised In the 4 week Ad</font></li>
</ul>
<form name="advertisment">
<p align="center">
<font face="Arial">

<select name="weekad" style="font-family: Arial; font-size: 10pt" ; "z-index:-1">
<option selected>----Advertisment Files----</option>
<option value="Nov121704AD">3 Week Ad for 11/17/04 Letting</option>
<option value="Dec121704AD">4 Week Ad for 12/17/04 Letting</option>
</select></font><font size="2" face="Arial">
<br />
&nbsp;</font></p>
<p align="center"><font face="Arial"><input type="button" value="View Adv in PDF format" onclick="postadvertise();" style="font-family: Arial; font-size: 10pt" /></font></p>
</form>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td bgcolor="#71B8FF" width="468"><img src="images/spacer.gif" width="1" height="1" /></td>
</tr>
<tr>
<td align="center" width="468"><script language="JavaScript" src="js/footer.js" type="text/javascript"></script><br />
<!--#include virtual="ssi/footer.html" -->
</td>
</tr>
</table>
<!--===============================main content end here===============================-->
</td>
</tr>
</table>
</body>
</html>







/***********************************************************************************
* (c) Ger Versluis 2000 version 5.41 24 December 2001 *
* For info write to menus@burmees.nl *
* You may remove all comments for faster loading *
***********************************************************************************/

var NoOffFirstLineMenus=6; // Number of first level items
var LowBgColor='#CCCCCC'; // Background color when mouse is not over
var LowSubBgColor='#CCCCCC'; // Background color when mouse is not over on subs
var HighBgColor='white'; // Background color when mouse is over
var HighSubBgColor='black'; // Background color when mouse is over on subs
var FontLowColor='navy'; // Font color when mouse is not over
var FontSubLowColor='black'; // Font color subs when mouse is not over
var FontHighColor='black'; // Font color when mouse is over
var FontSubHighColor='#D2DEE3'; // Font color subs when mouse is over
var BorderColor='black'; // Border color
var BorderSubColor='black'; // Border color for subs
var BorderWidth=1; // Border width
var BorderBtwnElmnts=1; // Border between elements 1 or 0
var FontFamily='arial,comic sans ms,technical'; // Font family menu items
var FontSize=9; // Font size menu items
var FontBold=1; // Bold menu items 1 or 0
var FontItalic=0; // Italic menu items 1 or 0
var MenuTextCentered='left'; // Item text position 'left', 'center' or 'right'
var MenuCentered='left'; // Menu horizontal position 'left', 'center' or 'right'
var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
var ChildOverlap=3; // horizontal overlap child/ parent
var ChildVerticalOverlap=3; // vertical overlap child/ parent
var StartTop=145; // Menu offset x coordinate
var StartLeft=165; // Menu offset y coordinate
var VerCorrect=0; // Multiple frames y correction
var HorCorrect=0; // Multiple frames x correction
var LeftPaddng=3; // Left padding
var TopPaddng=2; // Top padding
var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
var MenuFramesVertical=1; // Frames in cols or rows 1 or 0
var DissapearDelay=1000; // delay before menu folds in
var TakeOverBgColor=1; // Menu frame takes over background color subitem frame
var FirstLineFrame='index'; // Frame where first level appears
var SecLineFrame='index'; // Frame where sub levels appear
var DocTargetFrame='index'; // 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=1; // 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=['tri.gif',10,10,'tridown.gif',10,5,'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);



Menu1=new Array("How to bid","","",6,20,100);
Menu1_1=new Array("Guide to bidding in PDF format","/bidlet/misfiles/pdf/bidguide04.pdf","",0,20,200);
Menu1_2=new Array("Suspension notice to bidders "," Menu1_3=new Array("Ways to bid ","/bidlet/html/howtobid.html","",0,20,290);
Menu1_4=new Array("Minnesota human right "," Menu1_5=new Array("State Wages "," Menu1_6=new Array("Federal Wages ","
Menu2=new Array("Pre-letting","","",12,20,100);
Menu2_1=new Array("Advertisments","/bidlet/advfiles.html","",0,20,210);
Menu2_2=new Array("Addenda list for upcoming letting","/bidlet/addenda.html","",0,20,210);
Menu2_3=new Array("Current letting PlanHolders list","reports/projectlog.html","",0,20,210);
Menu2_4=new Array("Expedite files for electronic bidding","ebsfiles.html","",0,20,300);
Menu2_5=new Array("Letting dates","/bidlet/letdate.html","",0,20,200);
Menu2_6=new Array("Main vendor List","reports/pdf_report/cityname.pdf","",0,20,210);
Menu2_7=new Array("Recent vendor List","reports/pdf_report/citybyco.pdf","",0,20,250);
Menu2_8=new Array("One item per line","reports/pdf_report/consec.pdf","",0,20,210);
Menu2_9=new Array("Schedule of prices","reports/pdf_report/consec.pdf","",0,20,210);
Menu2_10=new Array("Plan and proposal price in PDF format","/bidlet/planprice.html","",0,20,250);
Menu2_11=new Array("3 Year program ","/bidlet/progfiles.html","",0,20,200);
Menu2_12=new Array("6 Month tentative schedule","/bidlet/6month.html","",0,20,200);

Menu3=new Array("Post-letting ","","",3,20,100);
Menu3_1=new Array("Abstracts","/bidlet/abstract.html","",0,20,210);
Menu3_2=new Array("Bid results","/bidlet/bidresult.html","",0,20,210);
Menu3_3=new Array("Past letting PlanHolders list","reports/projectlog.html","",0,20,210);

Menu4=new Array("Historical data","","",8,20,100);
Menu4_1=new Array("English To Metric Conversion in PDF format","misfiles/pdf/eng2met.pdf","",0,20,250);
Menu4_2=new Array("Trans*port Item list / English System","/bidlet/itemeng.html","",0,20,200);
Menu4_3=new Array("Trans*port Item list / Metric System","/bidlet/itemtri.html","",0,20,200);
Menu4_4=new Array("Used item List","EBS.html","",0,20,180);
Menu4_5=new Array("List of Minnesota Citiest","/bidlet/misfiles/pdf/citylist.pdf","",0,20,180);
Menu4_6=new Array("List of Minnesota Counties","/bidlet/misfiles/pdf/countyno.pdf","",0,20,180);
Menu4_7=new Array("City-County Engineers List","/bidlet/misfiles/pdf/city-co.pdf","",0,20,180);
Menu4_8=new Array("Jobs-Sps","EBS.html","",0,20,180);


//Menu5=new Array("FAQ","","",2,20,100);
//Menu5_1=new Array("Ways to bid","howtobid.html","",0,20,200);
//Menu5_2=new Array("Frequently Asked Question","question.html","",0,20,200);

Menu5=new Array("Downloads","","",3,20,100);
Menu5_1=new Array("Expedite bid data","/bidlet/html/expedite.html","",0,20,200);
Menu5_2=new Array("Foreign Iron/Steel in PDF format","Report/Pdf/form1601.pdf","",0,20,200);
Menu5_3=new Array("Adobe/PK Zip","/bidlet/html/adozip.html","",0,20,200);

Menu6=new Array("Links","","",10,20,100);
Menu6_1=new Array("Spec. Books "," Menu6_2=new Array("EEO Office"," Menu6_3=new Array("Office of Construction"," Menu6_4=new Array("Supplemental Agreements"," Menu6_5=new Array("Innovative Contracting"," Menu6_6=new Array("Bid Express "," Menu6_7=new Array("Mn/DOT office of Investment Management-STIP "," Menu6_8=new Array("Mn/DOT Tech Support "," Menu6_9=new Array("Mn/DOT Materials "," Menu6_10=new Array("Alphabetical Listing of Mn/DOT Offices ","
 
Upvote 0 Downvote
Code: 
<select name="weekad" style="font-family: Arial; font-size: 10pt" ;  "z-index:-1" [highlight]id="weekad"[/highlight]>
                      <option selected>----Advertisment Files----</option>
                      <option value="Nov121704AD">3 Week Ad for 11/17/04 Letting</option>
                      <option value="Dec121704AD">4 Week Ad for 12/17/04 Letting</option>
                    </select>

Then in this file (<!--#include virtual="ssi/leftnavigationgreen.html" -->) there will be some onMouseOver and onMouseOut events that call menu functions, you will need to edit them simlar to this...


Code: 
<td onMouseOver="someMenuFunction(); [highlight]document.getElementById('weekad').style.display='none'[/highlight]"  onMouseOut="anotherMenuFunction(); [highlight]document.getElementById('weekad').style.display='block'[/highlight]">Menu Item</td>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

zen.gif

 
Upvote 0 Downvote
could be more specific what i need to do here.I am not sure if i need to create a function called someMenuFunction()as you displayed on your code and where i need to put this code.Please forgive me if i sound like ignorant i have a very limited knowledge of programing.
thank you
 
Upvote 0 Downvote
Like I said in my last post, those function should already by written. I was just attempting to show you where you might put the new code. I can't show you directly since the code that needs adapting is in the INCLUDE which you did not post.

You don't sound ignorant but I do question the label of (Programmer) next to your name [wink]

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

zen.gif

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
161
gmmastros
gmmastros
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
197
gmmastros
gmmastros
HansMaulwurf
  • Locked
  • Question
AJAX not working after database migration from MySQL to SQL Server ( Undefined index)
Replies
0
Views
139
HansMaulwurf
HansMaulwurf
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
426
JScannell
JScannell
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
386
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top