Posted By

Todd on 12/14/06


Tagged

ie dropdowns suckerfish


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Hirmine


Fix for 'menu under select' issue in IE


 / Published in: JavaScript
 

URL: http://www.htmldog.com/articles/suckerfish/dropdowns/

In Internet Explorer, it's a well-known issue that tags are rendered above other layers and things like drop-down menus. This fix is specifically for the "Son of Suckerfish" drop-down menus (see URL), which are entirely CSS-based (JS is needed only for Internet Explorer). However, it could be adapted for use with similar drop-down menus. The lines I added to the original js are "var selects" and the two "for" loops with comments.

Be sure to read the note at the end of this script.

  1. /* Son of Suckerfish Dropdowns. JS needed only for
  2.   Internet Explorer. Documented here:
  3.   http://www.htmldog.com/articles/suckerfish/dropdowns/*/
  4. sfHover = function() {
  5. var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  6. /* Create an array of all <select> tags on the page (could be limited to
  7.   those within an element with a specific id -- see line above. */
  8. var selects = document.getElementsByTagName("select");
  9. for (var i=0; i<sfEls.length; i++) {
  10. sfEls[i].onmouseover=function() {
  11. this.className+=" sfhover";
  12. for (var n=0; n<selects.length; n++) {
  13. /* Hides <select> tags, which appear above menu in IE */
  14. selects[n].className+=" hide_select";
  15. }
  16. }
  17. sfEls[i].onmouseout=function() {
  18. this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  19. for (var n=0; n<selects.length; n++) {
  20. /* Makes <select> tags visible again */
  21. selects[n].className = selects[n].className.replace(new RegExp(" hide_select\\b"), "");
  22. }
  23. }
  24. }
  25. }
  26.  
  27. /*
  28.  * NOTE: In order for this snippet to work, you need to add the
  29.  * following lines (or something similar) to your CSS:
  30.  *
  31.  * select.hide_select {
  32.  * visibility: hidden;
  33.  * }
  34.  *
  35.  * Using "display: none" may cause other elements to shift as the is
  36.  * completely removed from the flow of the document. By using
  37.  * "visibility: hidden", the just becomes "invisible."
  38.  */

Report this snippet  

You need to login to post a comment.