Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Div over form

Posted on 2003-03-07
20
Medium Priority
?
225 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
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to create an extensible mechanism for linked drop downs.
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

572 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