|
|
dear readers:
i have an expandable DHTML menu positioned above an HTML SELECT list. when i mouse over the dhtml menu, it drops down to display the available menu items, but these items are displayed "beneath" the SELECT list. i have tried the CSS property z-Index on the DHTML menu items with no success. does anyone have any suggestions or code examples where something like this works? please help. thanks an advance.
archie
|
|
|
|
archimedes - a very annoying bug this one and one that I'm afraid I'm 99% certain there's no solution for. I had this problem several times and searched long and hard for a solution, all to no avail. I believe it's a bug in how IE deals with CSS. Sorry I can't help more.
Jeff
<Added>
Here's what blooberry.com says about the issue in IE5+
- SELECT lists do not obey the normal z-index stacking order. Nothing can be placed "on top of" a SELECT list unless it is another SELECT list with a higher z-index. Other elements are always rendered below SELECT lists, even if they are given a higher z-index value than the SELECT.
|
|
|
|
|
|
Hi
There's a hack to fix this -- in IE 5.5 and above, you can position an IFRAME element over a select item, and the select item will not burn through.
Therefore you can put an empty IFRAME (or one that points to a blank page url) over the select box, then put whatever you want on top of the IFRAME.
|
|
|
|
Also see this thread:
http://www.codetoad.com/forum/20_22919.asp
Hmmm....the IFRAME hack..maybe that is how Milonic is doing it. I've not attempted to take apart the code--nor will I most likely. I'm just too lazy!
|
|
|
|
|
|
Hi there,
Do you by any chance have a snippet of code for this issue? I don't quite know what you mean by using iframes in this manner...thanks!
- Sung
|
|
|
|
Copy this into a new HTML document. This is a rough example to show you the basic technique. Thanks to pablissimo for this hack idea.
<script language=javascript>
function ShowMenu() {
document.getElementById("frTest").style.display = "inline";
}
function HideMenu() {
document.getElementById("frTest").style.display = "none";
}
</script>
<body>
<IFRAME id="frTest" style="width:120px;height:150px;position:absolute;top:20;left:40;display:none;" frameborder=0 scrolling=no marginwidth=0 src="" marginheight=0></iframe>
<form name="myForm">
Here are some select lists<br>
<table><tr><td>
<select name=colors>
<option value=1>Red</option>
<option value=2>Green</option>
<option value=3>Blue</option>
</select>
</td><td>
<select name=cars>
<option value=1>Chevy</option>
<option value=2>Toyota</option>
<option value=3>Volkswagon</option>
</select>
</td></tr></table>
<br><br>
<input type=button value="Place IFRAME over select lists" onclick="ShowMenu()">
<input type=button value="Hide the IFRAME" onclick="HideMenu()">
</form>
</body>
|
|
|
|
|
|
|
|
archimedes, don't forget to follow up here in the forum with your solution. That's what forums are all about-- getting answers, and letting others learn from your journey!
Thanks for using codetoad.com forums! :)
|
|
|
|
|
|
I'm having the same kind of problem. I have a menu in a div and a drop-down menu underneath is burning through it. I tried to add an iframe with its coordinates dynamically set according to the menu's coordinates, like the following:
//HTML START
<div id='some_menu'>
(...)
</div>
document.write("<iframe style='width:"+document.all.some_menu.offsetWidth+"px;'>")
//HTML END
However, the iframe that is generated doesn't have the same width as the div. Can somebody help me?
|
|
|
|
There is a way to do this without using iframe (at least in IE).
Just toggle the select whenever you're toggling the other item.
to hide:
document.forms[0]["selectname"].style.display = "none";
to show
document.forms[0]["selectname"].style.display = "inline";
-eva
http://www.kaniasty.com
|
|
|
|
I find the Iframe solution not so smooth...
I've got a div with id="menu" which needs to be shown all the time. The choices within will activate other divs.
if a div contains a select, this select will have an id that contains the full id of the div
so when the div's id = "div1"
the select within that div will have an id like "div1Sel1"
with a onmouseover="showDiv(divId);" the choice is activated:
function showDiv(divName){
svn=document.getElementsByTagName("DIV");
for (a=0;a<svn.length;a++){
svn[a].style.zIndex=-1;
}
svn=document.getElementsByTagName("SELECT");
for (a=0;a<svn.length;a++){
if (svn[a].id.indexOf(divName)>=0){
svn[a].style.visibility="visible";
} else {
svn[a].style.visibility="hidden";
}
}
document.getElementById("menu").style.zIndex=0;
document.getElementById(divName).style.zIndex=1;
}
the first for-loop will set all div z-indices to -1
the second for-loop will set all selects visibility to hidden
unless the id contains the id of the div to be shown, then it is set to visible
finally the z-indices of menu div and the chosen div will be set to the required levels
it works for me.
|
|
|
|
Hi,
I'm having a similiar problem with the z-index and select lists.
My problem is I have a form where user's are enter a date range to generate a report. Rather than enter the date manually, there is a small calendar icon which the user can click on to generate a pop-up calendar using javascript. The select list I have is going through the middle half of the calendar. I've tried the couple suggestions mentioned here in this post but I'm still not having any success. I dont' even know if i'm positioning the inline frame in the right position. Any help that anyone coudl give would be very appreciated.
Thank You
|
|
|
|
If you read this entire thread, you'll find one of my earlier posts where I provide a complete, working code snippet demonstrating the IFRAME technique. You can copy & paste that code into your own blank HTML file, then open in your browser to see it. You are asking for more explanation on how to do this, but I don't know how to explain the technique any better than that simple code example already does. To get your own code working, break it down into the smallest, simplest pieces, get each piece working along the way, and add your complexity in small bits.
A rather simple thing you can do instead of the IFRAME trick is to temporarily hide the select list(s) when showing the calendar div. This technique was explained and demonstrated already in this thread, so go back and read about it if you want to try that.
|
|
|
|
|
|
Here's another way to do it without an IFrame:
In a script tag define these functions:
function hideSelect()
{if (document.all){document.all.formselect.style.visibility="hidden";}}
function unhideSelect()
{if (document.all){document.all.formselect.style.visibility="visible";}}
Add the formselect ID to your select box (or the form itself if you have multiple select boxes, as I did):
<form action="/forum/reportpost.html" method="post" id="formselect">
Invoke your script with a mouseover/mouseout:
<a href="whatever.html" onmouseover="hideSelect()" onmouseout="unhideSelect()">Show or Hide Select</a>
Works in IE. Not sure about other browsers/platforms but it's pretty simple so give it a try.
Kristen
|
|
|
|
Thanks for the post Kristen. Kristen's code is simple and elegant.
It's not exactly another solution since it's almost exactly what glamgirl already posted. Main difference being that glamgirl used display=none while Kristen used visibility=hidden. The latter is a better choice for most people since you simply want to make the select list (or entire form) temporarily invisible. display=none actually tells the browser to not even give space to the element meaning your page layout may shift to adjust for the now missing element(s).
It's good to see the excellent posts in the forums. Don't forget to click an interesting ad every now and then to support CodeToad.
|
|
|
|
|
|
I had a menu in a site template so I might have multiple forms with multiple select boxes but I did not no the names of any. So this will loop through all forms and hide the selects.
function hideSelect(){
for (j=0; j<document.forms.length; j++) {
var theForm = document.forms[j]
for(i=0; i<theForm.elements.length; i++){
var alertText = ""
if(theForm.elements.type == "select-one") {
theForm.elements.style.visibility = "hidden";
}
}
}
}
function unhideSelect(){
for (j=0; j<document.forms.length; j++) {
var theForm = document.forms[j]
for(i=0; i<theForm.elements.length; i++){
var alertText = ""
if(theForm.elements.type == "select-one") {
theForm.elements.style.visibility = "visible";
}
}
}
}
-Steve
|
|
|
This 45 message thread spans 3 pages: [1] 2 3 > > |
archimedes
Jeff Anderson
