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.
-
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! -
One solution is to use javascript to just hide all selects while hovering. Then on mouseout, show the selects.
-
Yes, but do you know HOW to achieve this? I mean do you have an example somewhere?
Thanks! -
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='';
}
}
} -
Great! I'll give it a go! I'll keep you posted. ;-)
-
Hey it works!!
Thank you so much for your help! -
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? -
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. -
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/ -
Cool! I'll give that a whirl!
1 to 10 of 10