Posted By

Todd on 12/14/06

Tagged

Versions (?)

Last Edited at 12/14/06 11:05am

Statistics

Viewed 769 times

Favorited by 1 user(s)

Related snippets

Fix for 'menu under select' issue in IE

/ Published in: JavaScript

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.

Highlighted TextExpand

/* 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."
 */

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.