?
Solved

Div over form

Posted on 2003-03-07
20
Medium Priority
?
224 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:DanielBlais
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 5
  • 2
  • +2
20 Comments
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8091530
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>
<!--
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;

function switchDiv(strDivName,bolVisible){

 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName];
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName);
 }
 
 if(isNS4){
     if(!bolVisible) {
       objElement.visibility ="hidden"
     } else {
       objElement.visibility ="visible"
     }    
 }else{
     if(!bolVisible) {
       objElement.style.visibility = "hidden";
     } else {
       objElement.style.visibility = "visible";
     }
 }
}
//-->
</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
0
 
LVL 2

Author Comment

by:DanielBlais
ID: 8091738
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.
0
 
LVL 3

Expert Comment

by:gph
ID: 8091769
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.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 46

Accepted Solution

by:
fritz_the_blank earned 500 total points
ID: 8091869
I realize that, but it doesn't work very well--all manner of funkiness results if you attempt to hide form elements within a div.


Fritz the Blank
0
 
LVL 3

Expert Comment

by:vosk
ID: 8092066
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>
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8092155
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
0
 
LVL 2

Author Comment

by:DanielBlais
ID: 8092337
vosk, it work with text box but doesn't work with select (drop down) object.
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8092360
That's because the z-index of a select list is infinite so to speak...

Fritz the Blank
0
 
LVL 2

Author Comment

by:DanielBlais
ID: 8094144
So, the only solution is to hide the form or using a pop-up?
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8094220
Pretty much. You could use multiple forms, but that poses a whole set of other problems.

Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8094234
This will work in later versions of IE, but not in Netscape:

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;

function switchDiv(strDivName,bolVisible){

 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName];
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName);
 }
 
 if(isNS4){
     if(!bolVisible) {
       objElement.visibility ="hidden"
     } else {
       objElement.visibility ="visible"
     }    
 }else{
     if(!bolVisible) {
       objElement.style.visibility = "hidden";
     } else {
       objElement.style.visibility = "visible";
     }
 }
}
//-->
</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>
0
 
LVL 3

Expert Comment

by:vosk
ID: 8094752
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)
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8095165
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
0
 
LVL 2

Author Comment

by:DanielBlais
ID: 8096078
So, there is no good way to make div over select object, I have make an pop-up.
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8096486
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
0
 
LVL 2

Author Comment

by:DanielBlais
ID: 8097965
C is average?

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

Daniel
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8098010
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
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8098030
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
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8124117
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
0
 

Expert Comment

by:DigitalXtreme
ID: 8236557
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
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question