Return to Snippet

Revision: 2014
at December 14, 2006 11:25 by Todd


Updated Code
/* Son of Suckerfish Dropdowns. JS needed only for
   Internet Explorer. Documented here:
   http://www.htmldog.com/articles/suckerfish/dropdowns/*/
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    /* Create an array of all <select> tags on the page (could be limited to 
    those within an element with a specific id -- see line above. */
    var selects = document.getElementsByTagName("select"); 
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
            for (var n=0; n<selects.length; n++) {
                /* Hides <select> tags, which appear above menu in IE */
                selects[n].className+=" hide_select";
            }
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            for (var n=0; n<selects.length; n++) {
                /* Makes <select> tags visible again */
                selects[n].className = selects[n].className.replace(new RegExp(" hide_select\\b"), "");
            }
        }
    }
}

/* 
 * NOTE: In order for this snippet to work, you need to add the 
 * following lines (or something similar) to your CSS:
 *
 * select.hide_select {
 *     visibility: hidden;
 * }
 *
 * Using "display: none" may cause other elements to shift as the is 
 * completely removed from the flow of the document. By using
 * "visibility: hidden", the just becomes "invisible."
 */

Revision: 2013
at December 14, 2006 11:05 by Todd


Initial Code
/* Son of Suckerfish Dropdowns. JS needed only for
   Internet Explorer. Documented here:
   http://www.htmldog.com/articles/suckerfish/dropdowns/*/
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    /* Create an array of all <select> tags on the page (could be limited to 
    those within an element with a specific id -- see line above. */
    var selects = document.getElementsByTagName("select"); 
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
            for (var n=0; n<selects.length; n++) {
                /* Hides <select> tags, which appear above menu in IE */
                selects[n].className+=" hide_select";
            }
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            for (var n=0; n<selects.length; n++) {
                /* Makes <select> tags visible again */
                selects[n].className = selects[n].className.replace(new RegExp(" hide_select\\b"), "");
            }
        }
    }
}

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

Initial Description
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.

Initial Title
Fix for 'menu under select' issue in IE

Initial Tags
ie

Initial Language
JavaScript