fi76631
asked on
DIV over a Dropdown (1000 points!!)
Hi All,
I have a HTML on which I display a floating DIV. The problem is that the Drop Down boxes on the page show through the DIV.
This is a known problem with IE5.x (and previous I think!).
However, I need to find a clever way of overcoming this problem by doing something like for example - hiding the dropdown controls on the form when the div passes over them. The problem with this approach would be that it would look a little strange to the user. Any time they passed partially over the combobox, the box would completely dissappear!
My question is -- does anyone have any clever code or clever ideas on how I could do something along the lines of the above, that would not look so strange.
If someone can answer this and ideally give me a complete working solution I will happily award 1000 points!
Regards
I have a HTML on which I display a floating DIV. The problem is that the Drop Down boxes on the page show through the DIV.
This is a known problem with IE5.x (and previous I think!).
However, I need to find a clever way of overcoming this problem by doing something like for example - hiding the dropdown controls on the form when the div passes over them. The problem with this approach would be that it would look a little strange to the user. Any time they passed partially over the combobox, the box would completely dissappear!
My question is -- does anyone have any clever code or clever ideas on how I could do something along the lines of the above, that would not look so strange.
If someone can answer this and ideally give me a complete working solution I will happily award 1000 points!
Regards
can you give a url for us to look at?
All you can do is make the drop down visibility=hidden
Try this.... I make this to hide all drop down...
But maybe you can make it by give an ID on it...
<script>
function myCmbAction(myAction)
{
var tmp = document.getElementsByTagN
if(tmp==null) return
if(tmp.length!=null)
{
for(i=0; i<tmp.length; i++) {
tmp[i].style.visibility = myAction
}
}
else tmp.style.visibility = myAction
}
</script>
and use it on the drop down site by
onmouseOver="myCmbAction('
onmouseOver="myCmbAction('
Have this stuff can help you much :P
That's all we can do for now...
Try this.... I make this to hide all drop down...
But maybe you can make it by give an ID on it...
<script>
function myCmbAction(myAction)
{
var tmp = document.getElementsByTagN
if(tmp==null) return
if(tmp.length!=null)
{
for(i=0; i<tmp.length; i++) {
tmp[i].style.visibility = myAction
}
}
else tmp.style.visibility = myAction
}
</script>
and use it on the drop down site by
onmouseOver="myCmbAction('
onmouseOver="myCmbAction('
Have this stuff can help you much :P
That's all we can do for now...
ASKER
Bing2x,
This is similar to the answer that I proposed, but it is not really suitable. First off, onmouseOver events are not suitable, because the mouse may NOT be over the drop down when you want to hide it -- the DIV will be!
Second off, as stated in the original question, whereas I could get something along these lines to work, it would look a bit silly from a users perspective. Ie: everything the the DIV is dragged over / near the combo, the combo would dissappear.
EricWestbo,
I dont have a sample site, but I am using a DIV in a manner similar to this popup window DIV that can be seen on this site:
http://www.dynamicdrive.com/dynamicindex11/abox2.htm
To see the problem I am experiencing, simply download this guys window example and put a dropdown somewhere on the page. Then move the popup window over the drop down!
I am not looking for some sort of miracle cure here! However, I am guessing that someone out there has come accross this issue before and has come up with a novel way of fixing it!
For example, is there anything that I can put behing the DIV (Thought of an IFRAME, but these cant be moved dynamically)
Thanks
This is similar to the answer that I proposed, but it is not really suitable. First off, onmouseOver events are not suitable, because the mouse may NOT be over the drop down when you want to hide it -- the DIV will be!
Second off, as stated in the original question, whereas I could get something along these lines to work, it would look a bit silly from a users perspective. Ie: everything the the DIV is dragged over / near the combo, the combo would dissappear.
EricWestbo,
I dont have a sample site, but I am using a DIV in a manner similar to this popup window DIV that can be seen on this site:
http://www.dynamicdrive.com/dynamicindex11/abox2.htm
To see the problem I am experiencing, simply download this guys window example and put a dropdown somewhere on the page. Then move the popup window over the drop down!
I am not looking for some sort of miracle cure here! However, I am guessing that someone out there has come accross this issue before and has come up with a novel way of fixing it!
For example, is there anything that I can put behing the DIV (Thought of an IFRAME, but these cant be moved dynamically)
Thanks
<SELECT> control is a windowed control. The "zOrder" cannot be set for windowed controls. And hence the problem.
I think, you can use modal dialog insted of using a floating div. That will probably solve your problem.
I think, you can use modal dialog insted of using a floating div. That will probably solve your problem.
** bing2x has proposed an answer to this question. The question is locked until fi76631 evaluates the answer. **
Bing,
As a newbie, I've been slammed for the mistake of proposing an answer that I believed to be the correct one... which later was determined not to work. Please, in the future, suggest a comment & give the rest of us a chance to provide commentary as well.
Bing,
As a newbie, I've been slammed for the mistake of proposing an answer that I believed to be the correct one... which later was determined not to work. Please, in the future, suggest a comment & give the rest of us a chance to provide commentary as well.
With some styling it is possible to build fake elements that can be put in a layer and and swap with the real element with visibility changes when the layer pases over them. It is just a matter of positioning and getting the right look with styling. I happen to have this one form another question. It is a straight select, but you can also style a drop down version and other form elements. They are not functional bu they can be made to bahave correct with a little script.
<HTML>
<head>
<STYLE>
.selectBOX {border:3px ridge #dddddd;height:75;width:12
border-right:3px double #bbbbbb; border-bottom:3px double #bbbbbb;}
.hiliteON {color:white;background-co
.hiliteOFF {color:black;background-co
</STYLE>
<script language="JavaScript">
<!--
var lastone=false;
function chgcls(EL)
{
if (lastone)
{
lastone.className="hiliteO
}
lastone=EL;
lastone.className="hiliteO
}
//-->
</script>
</HEAD>
<BODY>
<h1 align="center"> Fake Select </h1>
<div class="selectBOX" style="position:absolute;l
<table border=0 cellspacing=0 cellpadding=0>
<tr><td class="hiliteOFF" onClick="chgcls(this)">Alb
<tr><td class="hiliteOFF" onClick="chgcls(this)">Ont
<tr><td class="hiliteOFF" onClick="chgcls(this)">Que
<tr><td class="hiliteOFF" onClick="chgcls(this)">New
<tr><td class="hiliteOFF" onClick="chgcls(this)">all
</table>
</div>
<!--
Note:
Even though the fake select is not a functional form element, we
could still capture the cell value with the onClick event and use
it for processing
-->
</BODY>
</HTML>
Let me know.
Cd&
<HTML>
<head>
<STYLE>
.selectBOX {border:3px ridge #dddddd;height:75;width:12
border-right:3px double #bbbbbb; border-bottom:3px double #bbbbbb;}
.hiliteON {color:white;background-co
.hiliteOFF {color:black;background-co
</STYLE>
<script language="JavaScript">
<!--
var lastone=false;
function chgcls(EL)
{
if (lastone)
{
lastone.className="hiliteO
}
lastone=EL;
lastone.className="hiliteO
}
//-->
</script>
</HEAD>
<BODY>
<h1 align="center"> Fake Select </h1>
<div class="selectBOX" style="position:absolute;l
<table border=0 cellspacing=0 cellpadding=0>
<tr><td class="hiliteOFF" onClick="chgcls(this)">Alb
<tr><td class="hiliteOFF" onClick="chgcls(this)">Ont
<tr><td class="hiliteOFF" onClick="chgcls(this)">Que
<tr><td class="hiliteOFF" onClick="chgcls(this)">New
<tr><td class="hiliteOFF" onClick="chgcls(this)">all
</table>
</div>
<!--
Note:
Even though the fake select is not a functional form element, we
could still capture the cell value with the onClick event and use
it for processing
-->
</BODY>
</HTML>
Let me know.
Cd&
Try as you may, I think the final answer will be that there is no working solution.
Check out this article... after months of having a similar problem, I've finally changed my layout as well.
In Navigator, this problem persists with most FORM tags; in Explorer, it has been reduced to only the SELECT element, purportedly due to the browsers close integration with the OS.
http://www.webreference.com/dhtml/diner/seethru/
I *know* it's not the answer you want, but I'm almost certain it's the only answer out there that rings true.
I'm actually hoping someone will snub me on this one. :)
Check out this article... after months of having a similar problem, I've finally changed my layout as well.
In Navigator, this problem persists with most FORM tags; in Explorer, it has been reduced to only the SELECT element, purportedly due to the browsers close integration with the OS.
http://www.webreference.com/dhtml/diner/seethru/
I *know* it's not the answer you want, but I'm almost certain it's the only answer out there that rings true.
I'm actually hoping someone will snub me on this one. :)
BTW... if you aren't accepting the answer from bing2x, please reject it so that the rest of us have a chance to help.
THX!
THX!
The only real way that I know of is by placing a java applet, activex control or IFRAME above the select box.
The Iframe can then be hidden or shown and it can contain HTML code (also dynamical).
<html>
<head>
<style type="text/css">
<!--
#myApplet{position:absolut
//-->
</style>
</head>
<body>
<div id="myApplet">
<iframe src="http://www.google.com" width="300" height="300"></iframe>
</div>
<form>
<select style="width:500px;">
<option>CHECKM/option>
<option>CHECKM/option>
<option>CHECKM/option>
</select>
</form>
</body>
</html>
The Iframe can then be hidden or shown and it can contain HTML code (also dynamical).
<html>
<head>
<style type="text/css">
<!--
#myApplet{position:absolut
//-->
</style>
</head>
<body>
<div id="myApplet">
<iframe src="http://www.google.com" width="300" height="300"></iframe>
</div>
<form>
<select style="width:500px;">
<option>CHECKM/option>
<option>CHECKM/option>
<option>CHECKM/option>
</select>
</form>
</body>
</html>
This line(s): <option>CHECKM/option>
should of course be: <option>CHECK</option>
should of course be: <option>CHECK</option>
ASKER
CJ_S,
I read your reply and was about to dismiss it, but I think you are onto something here, but in reverse! If I create a DIV and place an IFRAME in the DIV and then create another DIV to appear on top of the IFRAME with my content...then this would achieve the result --- I think!!...
I am going off to play for a while...!!!
Will let you know how I get on
I read your reply and was about to dismiss it, but I think you are onto something here, but in reverse! If I create a DIV and place an IFRAME in the DIV and then create another DIV to appear on top of the IFRAME with my content...then this would achieve the result --- I think!!...
I am going off to play for a while...!!!
Will let you know how I get on
Any luck on this??
NNo, not for most browsers. If you want to do THAT the iframe will show through :-) And eventually you'll get the same info inside the div. Not solving anything.
Above method is the only one I know of...the iframe can be your div...with anyof the information you want there to be.
CJ
Above method is the only one I know of...the iframe can be your div...with anyof the information you want there to be.
CJ
ASKER
CJ_S,
Hmm...thats a pitty. The problem is that my DIV MUST be draggable around the screen. However, I did a quick test and put an IFRAME on the page and then created a draggable floating div. When I drag the DIV over the IFRAME, it doesn't show through -- so success. Maybe this is something that only works with IE5.x and that will break with NS/Opera, but I could live with that.
The one issue that I am getting (but is minor) is that the performance while dragging is poor. The DIV moves quite slowly and in a jerky manner. Obviously a lot of recalculations etc... going on (And Im running on a reasonably high spec machine!).
Im still playing with this to see if this achieves the desired result. Will let you know.
Ta
Hmm...thats a pitty. The problem is that my DIV MUST be draggable around the screen. However, I did a quick test and put an IFRAME on the page and then created a draggable floating div. When I drag the DIV over the IFRAME, it doesn't show through -- so success. Maybe this is something that only works with IE5.x and that will break with NS/Opera, but I could live with that.
The one issue that I am getting (but is minor) is that the performance while dragging is poor. The DIV moves quite slowly and in a jerky manner. Obviously a lot of recalculations etc... going on (And Im running on a reasonably high spec machine!).
Im still playing with this to see if this achieves the desired result. Will let you know.
Ta
NS does not support the IFRAME tag anyway. If your target platform is IE5.x I guess you';d have to satisfy with this. I believe IE5.x also has a drag feature build in but I'd have to look that up!
CJ
CJ
Again, not to play the devil's advocate, there is no fix. And you're not alone in the frustration:
FROM WEBREFERENCE.COM
"When HTML first introduced the use of forms, it called upon already-existing controls within the operating system to display form elements. A checkbox, a text input, a drop-down SELECT menu, or any other form element, was created by placing the operating system's built-in checkbox, text input, or menu in a web page. That is, although they are called through HTML, they are not created by HTML, as say, a heading or a paragraph is. The easiest way to prove this is to view form elements on different platforms. They always correspond to the platform standard, not to anything you have coded..."
"... the persistence problem is most commonly evident in FORM elements, at least as far as Navigator is concerned. Explorer, in its Windows incarnation, with its close relation to the OS, has a problem only with the SELECT element."
For full details:
http://www.webreference.com/dhtml/diner/seethru/
Just trying to save you a bunch of headache
FROM WEBREFERENCE.COM
"When HTML first introduced the use of forms, it called upon already-existing controls within the operating system to display form elements. A checkbox, a text input, a drop-down SELECT menu, or any other form element, was created by placing the operating system's built-in checkbox, text input, or menu in a web page. That is, although they are called through HTML, they are not created by HTML, as say, a heading or a paragraph is. The easiest way to prove this is to view form elements on different platforms. They always correspond to the platform standard, not to anything you have coded..."
"... the persistence problem is most commonly evident in FORM elements, at least as far as Navigator is concerned. Explorer, in its Windows incarnation, with its close relation to the OS, has a problem only with the SELECT element."
For full details:
http://www.webreference.com/dhtml/diner/seethru/
Just trying to save you a bunch of headache
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
All,
I have managed to get this to work!
Yes EricWestBo -- you heard me.
The solution is browser specific and will work with IE5 or better only. Basically I dynamically position an IFRAME behind the DIV (ie: by settings its Z-Order). When the DIV is moved or sized, I size / move the IFRAME element in paralell (Im doing a lot more than this to achieve the desired result, but the above is the basic summary)
Result!
CJ_S, it was your initial idea that put me on the solution, therefore I award the points to you. Thanks for your help.
EricWestBo - Thinking outside the 'box' DOES yield results!
Regards
I have managed to get this to work!
Yes EricWestBo -- you heard me.
The solution is browser specific and will work with IE5 or better only. Basically I dynamically position an IFRAME behind the DIV (ie: by settings its Z-Order). When the DIV is moved or sized, I size / move the IFRAME element in paralell (Im doing a lot more than this to achieve the desired result, but the above is the basic summary)
Result!
CJ_S, it was your initial idea that put me on the solution, therefore I award the points to you. Thanks for your help.
EricWestBo - Thinking outside the 'box' DOES yield results!
Regards