advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

victorchamorro on 11/14/07


Tagged

form div select z-index


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

heinz1959


jquery: simule z-index to place divs over select objects (explorer bug)

Published in: JavaScript 

using bgiframe to solve a bug in explorer: you cannot apply z-index to place divs over selects in a form!!!

Plain TextExpand 
  1. INSIDE THE HEAD
  2. ......................................................................
  3. <script type="text/javascript" src="http://brandonaaron.net/jquery/plugins/bgiframe/jquery.bgiframe.js"></script>
  4.  
  5. <script type="text/javascript">
  6.   $(function() {
  7.     $('#box').bgiframe();
  8.   });
  9. </script>
  10.  
  11. <style type="text/css" media="screen">
  12.   form { position: absolute; top: 0; left: 0; width: 100%; }
  13.   select { position: relative; width: 100%; margin: 0 0 2px; z-index: 1; }
  14.   .box { position: relative; z-index: 2; float: left; margin: 5px; border: 5px solid #666; padding: 5px; width: 250px; height: 100px; color: #000; background-color: #999; }
  15. </style>
  16.  
  17.  
  18. HTML
  19. ......................................................................
  20. <form action="#" method="get" accept-charset="utf-8">
  21.   <select name="test"><option>valor 1</option></select>
  22.   <select name="test"><option>valor 2</option></select>
  23.   <select name="test"><option>valor 3</option></select>
  24. </form>
  25. <div id="box" class="box">contenido del box</div>

Report this snippet 

You need to login to post a comment.