PDA

Click to See Complete Forum and Search --> : Drop Down Menu and Select Boxes

webdev1
02-04-2003, 11:08 AM
I am using a javascript drop-down menu (I will attach the code below in a zip file). My only issue with this drop-down menu is anywhere I have a form with a select box, the js menu goes 'behind' the select box. It doesn't do this for any other form type (text, checkbox, textarea, etc.) only a select box. We use cold fusion so I tried both a cfform w/a cfselect and a regular form. I am puzzled as to why this is happening. Any suggestions? Thanks in advance for your help!

P.S. I also have a screenshot of what it looks like in the zip file.
pyro
02-04-2003, 12:48 PM
Why don't you go ahead and post the .htm file as well, so we don't have to guess.
webdev1
02-04-2003, 01:00 PM
Ok guys, here it is again. Any ideas are greatly appreciated. I've been picking my brain apart trying to figure this one out.

See the new attachment below.

Thanks again for your help.
webdev1
02-05-2003, 07:17 AM
Does anyone have any ideas as to why this is happening. Even suggestions might help. Thanks in advance!
pyro
02-05-2003, 07:19 AM
You could try setting the Z-index...It might work...
webdev1
02-05-2003, 07:21 AM
Do you mean as in coordinates x, y, and z? How do you do that? I'm confused.
pyro
02-05-2003, 07:35 AM
Here is a quote about the Z-index. It is a CSS property.

With the advent of the POSITION property, a third dimention was added, so that things can appear either "in front of" of "behind" other elements. This third axis is known as the Z axis, and elements can be controlled in this fashion by using the Z-INDEX property.So, try something like this for your pulldown menu.

<select name="yourmenu" size="1" style="z-index: 1">
webdev1
02-05-2003, 07:37 AM
That makes sense. Thanks for your help. I'll try it and let you know if that does it. It just might. Thanks again!
webdev1
02-05-2003, 08:00 AM
That was a great idea but it didn't work. Now I'm gonna go crazy. I don't understand b/c if you position the menu anywhere else on the page, it's 'on top' of the page, except for that stupid drop-down box. UhhH! WHY?!!
pyro
02-05-2003, 08:09 AM
Oops. My bad. What you need to do is give the Z-index to your menu items. Or, you could try this and let me know what happens.

<select name="yourmenu" size="1" style="z-index: -1">

The code I gave you before told the select menu to be on top, which after looking at the pic you sent along, I can see is what you don't want happening. :D
webdev1
02-05-2003, 08:11 AM
Ya, I tried it as -1 and also as 0 just to see what would happen and nothing changed. I'm stumped.
pyro
02-05-2003, 08:18 AM
I think you will need to set the z-index to 1 on your menu, then.
webdev1
02-05-2003, 08:52 AM
I found a fix. It's not exactly what I wanted but it works. It uses a div tag to make the select box 'disappear' when you use the menu. Heres the code in case anyone else ever has this problem. Thanks for all the help!!

1- Put the form(s), element(s) or object(s) inside a named div: (For Netscape4 it is better to include the whole form instead of single elements)
<div id='HideDiv1' style="position:relative;"> element(s) </div>
2- Make an array in the document with the elements
<script type='text/javascript'>
var HideArray=['HideDiv1','HideDiv2',...............];
</script>
<body>
3- Replace the empty functions BeforeFirstOpen and AfterCloseAll (Found in the variable file) with:
function BeforeFirstOpen(){
if(ScLoc.HideArray){
var H_A,H_Al,H_El,i;
H_A=ScLoc.HideArray;
H_Al=H_A.length;
for (i=0;i<H_Al;i++){
H_El=Nav4?ScLoc.document.layers[H_A[i]]:DomYes?ScLoc.document.getElementById(H_A[i]).style:ScLoc.document.all[H_A[i]].style;
H_El.visibility=M_Hide}}}

function AfterCloseAll(){
if(ScLoc.HideArray){
var H_A,H_Al,H_El,i;
H_A=ScLoc.HideArray;
H_Al=H_A.length;
for (i=0;i<H_Al;i++){
H_El=Nav4?ScLoc.document.layers[H_A[i]]:DomYes?ScLoc.document.getElementById(H_A[i]).style:ScLoc.document.all[H_A[i]].style;
H_El.visibility=M_Show}}}