Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorwebfairy
    • CommentTimeMar 3rd 2008
     permalink
    Greetings y'all,

    I'm aware this has been a long standing problem with IE6, but I'd like to know if any of you has an easy and practical solution to the select box overlap problem.

    Here is an example of my code:
    http://www.webfairy.ca/dev/cvm/test.html

    If you look at it using IE6 and mouse over the vertical menu on the left-hand side, you'll notice the select box overlapping.

    I've heard of the iframe solution. Is that the best solution? If so, does anybody have an easy example of it to show me?

    Thanks in advance!
    • CommentAuthordavist11
    • CommentTimeMar 3rd 2008
     permalink
    One solution is to use javascript to just hide all selects while hovering. Then on mouseout, show the selects.
    • CommentAuthorwebfairy
    • CommentTimeMar 5th 2008
     permalink
    Yes, but do you know HOW to achieve this? I mean do you have an example somewhere?

    Thanks!
    • CommentAuthordavist11
    • CommentTimeMar 6th 2008
     permalink
    eh try updating your drop_down.js with something like this. Not tested but should work:

    /* ---[ Menu principal ]--------------------- */
    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    toggleSelects('hide');
    this.className+=" over";
    }
    sfEls[i].onmouseout=function() {
    toggleSelects('show');
    this.className=this.className.replace(new RegExp(" over\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);


    /* ---[ Menu contextuel - 2e niveau ]--------------------- */

    sfHover = function() {
    var sfEls = document.getElementById("subNav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    toggleSelects('hide');
    this.className+=" over";
    }
    sfEls[i].onmouseout=function() {
    toggleSelects('show');
    this.className=this.className.replace(new RegExp(" over\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);


    function toggleSelects(action) {
    var selects = document.getElementsByTagName('select');
    if(action == 'hide') {
    for(i=0; i < selects.length; i++) {
    selects[i].style.display='none';
    }
    } else if(action == 'show') {
    for(i=0; i < selects.length; i++) {
    selects[i].style.display='';
    }
    }
    }
    • CommentAuthorwebfairy
    • CommentTimeMar 8th 2008
     permalink
    Great! I'll give it a go! I'll keep you posted. ;-)
    • CommentAuthorwebfairy
    • CommentTimeMar 8th 2008
     permalink
    Hey it works!!
    Thank you so much for your help!
    • CommentAuthorwebfairy
    • CommentTimeMar 11th 2008
     permalink
    It works quite well but I'm curious to know if there are other possible solutions...

    You see there is another select in the top right hand corner of my page and it flickers on and off whenever I get near the menu (evidently). I find it annoying. Is there a way to prevent that effect (hiding one specific select ONLY on mouseover) to be applied to all selects?
    • CommentAuthordave_o
    • CommentTimeMar 11th 2008 edited
     permalink
    Sure there is, but you have to choose it manually, so this solutiun isn't that flexible. What if you add selects later, you'll have to manually update your script every time. If you want only one specific select to hide, give it an id and modify your code like this:

    /*var selects = document.getElementsByTagName('select');*/
    var selects = new Array(1);
    selects[0] = document.getElementById('theIdOfYourSelectElement');

    If you want to add more selects later, just adjust the size of the array and add further lines of javascript below, like this:
    selects[1] = document.getElementById('theIdOfYourSecondSelectElement');
    ...

    Further I advice you to change the code lines

    selects[i].style.display='none';
    selects[i].style.display='';

    into

    selects[i].style.visibility = 'hidden';
    selects[i].style.visibility = 'visible';

    to prevent your layout from collapsing.
    • CommentAuthordoozy
    • CommentTimeMar 13th 2008
     permalink
    One more old solution for your problem - it's you can place all selects to iframe/s.
    Or you can try using dynamic replacing selects with JS, like here http://www.cult-f.net/2007/12/14/elselect/
    • CommentAuthorwebfairy
    • CommentTimeMar 25th 2008
     permalink
    Cool! I'll give that a whirl!
Add your comments
    Username Password
  • Format comments as (Help)