Solved

DIV over a Dropdown (1000 points!!)

Posted on 2002-04-23
18
279 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:fi76631
  • 6
  • 5
  • 4
  • +3
18 Comments
 
LVL 4

Expert Comment

by:EricWestbo
ID: 6964555
can you give a url for us to look at?
0
 

Expert Comment

by:bing2x
ID: 6964622
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.getElementsByTagName('SELECT')
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('hidden')" and
onmouseOver="myCmbAction('visible')"

Have this stuff can help you much :P
That's all we can do for now...
0
 

Author Comment

by:fi76631
ID: 6965306
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
0
 
LVL 2

Expert Comment

by:svd2002
ID: 6965372
<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.
0
 
LVL 4

Expert Comment

by:EricWestbo
ID: 6965465
** 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.


0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6965477
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:125;overflow-y:scroll;
               border-right:3px double #bbbbbb; border-bottom:3px double #bbbbbb;}
   
   .hiliteON {color:white;background-color:navy;font-family:arial;font-size:10pt}
   .hiliteOFF {color:black;background-color:white;font-family:arial;font-size:10pt}
</STYLE>
<script language="JavaScript">
<!--
   var lastone=false;
   function chgcls(EL)
   {
      if (lastone)
      {
         lastone.className="hiliteOFF";
      }
      lastone=EL;
      lastone.className="hiliteON"
   }
//-->
</script>
</HEAD>
<BODY>
<h1 align="center"> Fake Select </h1>
<div class="selectBOX" style="position:absolute;left:165;top:115">
   <table border=0 cellspacing=0 cellpadding=0>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Alberta</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Ontario</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Quebec</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Newfoundland</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">all fake</td></tr>
   </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&
0
 
LVL 4

Expert Comment

by:EricWestbo
ID: 6965677
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.  :)
0
 
LVL 4

Expert Comment

by:EricWestbo
ID: 6965679
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!
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 6965707
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:absolute;visibility:visible;top:0px;left:0px;}
  //-->
  </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>
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 22

Expert Comment

by:CJ_S
ID: 6965714
This line(s): <option>CHECKM/option>
should of course be: <option>CHECK</option>
0
 

Author Comment

by:fi76631
ID: 6967135
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
0
 
LVL 4

Expert Comment

by:EricWestbo
ID: 6967718
Any luck on this??
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 6967823
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
0
 

Author Comment

by:fi76631
ID: 6967968
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
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 6967991
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
0
 
LVL 4

Expert Comment

by:EricWestbo
ID: 6968516
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
0
 
LVL 22

Accepted Solution

by:
CJ_S earned 500 total points
ID: 6968552
0
 

Author Comment

by:fi76631
ID: 6972026
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
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

707 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now