views:

100

answers:

1

I have read this iFrame workaround for IE6. But I really don't understand on how to use this if I display a DIV dynamically.

I have attached a sample. When clicking on the input element, I want to show a div panel that have the topmost z-index. (That should be displayed over the select control)

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
  <title>Test</title>

  <script type="text/javascript">
    function showItem(obj) {
      obj.style.visibility = 'visible';
      obj.focus();
    }
  </script>

</head>
<body>
  <input onclick="showItem(myPanel)" />
  <div id="myPanel" style="position: absolute; top: 35px; left: 10px; width: 200px;
    height: 200px; background-color: Gray; visibility: hidden; color: Silver;">
    Hello world
  </div>
  <div>
    <select name="thisDD" id="thisDD">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</body>
</html>
A: 

To use the iframe workaround, you need to declare an iframe at the same coordinates, same width, same height, with a low z-index.

<iframe id="iframe" style="position: absolute; top: 35px; left: 10px; width: 200px; height: 200px; visibility: hidden; z-index: 1" frameborder="0"></iframe>

Then you need to declare a higher z-index on the div:

<div id="myPanel" style="...; z-index: 2"></div>

Then when you showItem, show both the iframe and the div. The iframe will nestle behind the div because its z-index is lower.

Anthony Mills