asked on

Div over form

Hi,
I use div to make my html dynamic. My div appear over all except form object. Any idea? (i don't want to hide my form).

Thanks

Daniel

fritz_the_blank

Here is what I use. You may have trouble hiding just part of a form, however, no matter what you do:

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>

</SCRIPT>
</HEAD>

<BODY>

<FORM action="" method=POST id=form1 name=form1>
<p><INPUT type="button" value="Show" name=ShowMe onClick="switchDiv('myDiv',true)">
<INPUT type="button" value="Hide" name=HideMe onClick="switchDiv('myDiv',false)"></p>
</form>
<div id="myDiv" style="visibility:hidden;position:relative">
<form>
Text1<INPUT type="text" name="text1"><br>
Text2<INPUT type="text" name="text2"><br>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
</FORM>
</div>

</BODY>
</HTML>

Fritz the Blank

DanielBlais

ASKER

Humm, you don't understand what I mean.

I have a form with about 30 fields. I want to make appear a div over the form. The div don't contain a form.

gph

I think fritz_the_blank is showing you what you need to use to hide form elements when a div is over them. In IE there is no other way that I know of.

ASKER CERTIFIED SOLUTION

fritz_the_blank

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

vosk

If I understand well you have a form and a div with dynamic position over the rest of the page. When you move the div it appears behind the form fields, and you want to set the div to be visible over that form. Then you have to use the z-index and, to be sure, set to 2 or 3. Also you can set the z-index of the form to 1 or 0. That's an example:
<html>
<head>
<script language="JavaScript">
var d;
function A()
{
d = window.setInterval("e()",50);
}
function e()
{
document.all.c.style.pixelTop += 1;
}
</script>
</head>
<body onLoad="A();">
<form name="a"><input type="text" name="b" value="textfield"></form>
<div id="c" style="position:absolute;top:0;left:0;z-index:3;background-color:#FF0000">That's the div</div>
</body>
</html>

fritz_the_blank

No, no!

Look, having a simple div is not problem. Having a complete form within a div is also not a problem. Having certain fields contained within a div inside a form can very often be a problem.

Fritz the Blank

DanielBlais

ASKER

vosk, it work with text box but doesn't work with select (drop down) object.

fritz_the_blank

That's because the z-index of a select list is infinite so to speak...

Fritz the Blank

DanielBlais

ASKER

So, the only solution is to hide the form or using a pop-up?

fritz_the_blank

Pretty much. You could use multiple forms, but that poses a whole set of other problems.

Fritz the Blank

fritz_the_blank

This will work in later versions of IE, but not in Netscape:

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>

</SCRIPT>
</HEAD>

<BODY>

<FORM action="" method=POST id=form1 name=form1>
<p><INPUT type="button" value="Show" name=ShowMe onClick="switchDiv('myDiv',true)">
<INPUT type="button" value="Hide" name=HideMe onClick="switchDiv('myDiv',false)"></p>
</form>
<form>
<div id="myDiv" style="visibility:hidden;position:relative">
Select:<SELECT id=select1 name=select1>
<OPTION></OPTION>
<OPTION>A</OPTION>
<OPTION>B</OPTION>
</SELECT>
</div>

Text:<INPUT type="text" name="text2"><br>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
</FORM>

</BODY>
</HTML>

vosk

You have reason, I've seen now that my code don't work with select tags. Surely the better option is hidding the select as fritz the blank says, althought I don't know other way to do that. I'm sorry for cannot help more.
jbosch(vosk)

fritz_the_blank

The problem here is that my last bit of code will only work on later versions of IE. On anything else the results will vary from nothing happening to just the labels showing and etc. Very unreliable in any case.

Fritz the Blank

DanielBlais

ASKER

So, there is no good way to make div over select object, I have make an pop-up.

fritz_the_blank

Okay, so why the grade of C?

Just because the answer is not what you want to hear, does that make it any less correct or complete? What is it that you were hoping, perhaps that I could have a meeting with the folks at Netscape and Microsoft and have them modify browser software retroactively to meet your needs? All we need to do is create a time machine so that we can go back, present this question to the heads of the development team, and have them re-engineer browser technology so that it will suit your particular needs....

Or if there was something else that I could have added to this answer other than the detailed code above, I would love to know,

Fritz the Blank

DanielBlais

ASKER

C is average?

I give you C because you help me, but it is not really what I was searching for.

Daniel

fritz_the_blank

What were you searching for, then? You asked:

" I use div to make my html dynamic. My div appear over all except form object. Any idea? (i don't want to hide my form)."

I gave you the answer. Now, please tell me how my answer could have been any more correct or complete? Just because the answer is not what you want to hear, it does not make it any less correct.

Fritz the Blank

fritz_the_blank

Also, if you look at my last bit of code that I posted, you will see an example of a div within a form. It works, but only on later versions of IE. It is not my fault that other browsers cannot support this.

Fritz the Blank

fritz_the_blank

So, have you given any more thought to this? After all, if you read through this thread, it should be clear that I have answered this question as well as it can be.

Fritz the Blank

DigitalXtreme

grade changed as it seems the solution worked for the asker. Any objections to this change should be posted here and I will review. Thank You

DigitalXtreme
CS Moderator