|
|
|
This 45 message thread spans 3 pages: < < 1 2 [3] > >
|
|
|
First of all I apologyze for digging up an old topic, but I've just now run into this problem.
In my case it's an ASP .NET DropDownList (which gets turned into a <select>, anyway) that refuses to stay on the layer below a drop down menu made with DHTML (some <div> that show or hide via JavaScript). The menu works perfectly except for this problem.
I've read thought the Web (and these forums) for a solution and I've been trying to solve the problem using the IFrame hack, because I'd like the DropDownList to show, even partially. However, though I'm able to cover the DropDownList with the IFrame, the DDList will get completely hidden (and unusable) because the IFrame is above it (but the menu hovers above the IFrame). Is there a way to fix this? Here's the code:
<iframe id="iframeA" style="width:500px; height:22px; position:absolute; border:solid 0px black; z-index:10; display:none;" src="javascript:false;" scrolling="no" frameborder="0" ></iframe>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"></asp:DropDownList>
<script type="text/javascript">
var iframeA = document.getElementById('iframeA');
iframeA.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';
iframeA.style.display='block';
iframeA.style.visibility='visible';
</script>
I also tried filter=alpha(opacity=0), with no luck :(
If I remove the filter applied above, I get the whole IFrame in white, again without seeing the DDList. If I leave it like it's above, I get an IFrame that has exactly the same width of the DDList (when the width changes, the IFrame seems to also change), but still can't see the DDList. :S
Thanks in advance :)
|
|
|
|
I'm not certain of what other code you have but the iframe needs to shadow the top layer. So the div layer on top would be z-index 10, and the iframe z-index 9. Then simply assign an id to the iframe and turn it on and off with the top div layer.
<iframe id="coverShop" src='images/spacer.gif' width="167" height="146" frameborder="0" scrolling="no" style="left:199px;top:130px;position:absolute;z-index:8;visibility:hidden;"><img src="images/spacer.gif" width="1" height="1" border="0" /></iframe>
<div id="Shop" class="Shop"></div>
The "Shop" layer is in the same location as the iframe shadowing it.
Awful lot of work, would seem simpler if MS would just fix their browser :)
|
|
|
|
| Then simply assign an id to the iframe and turn it on and off with the top div layer |
|
Thanks for your reply :)
When you say "turn it on and off with the top div layer" you mean set it to visibility='visible' when the menu is activated?
But won't that cover up the DropDownList? I need the DDList to be visible, even if only partially. The IFrame has z-index=10 and the menu div has z-index=100. Like I said, I can make the IFrame cover the DropDownList and the menu will hover over it perfectly, but in these conditions the IFrame will hide the DropDownList - I'm clueless on what to do next :\
Keep those ideas coming :))
|
|
|
|
Did you try the code I posted months ago? I successfully used it for ages!
Just copy and paste the following and try it out!
(If you need some insight, read my previous post)
Lorenzo
PS. Let me know!
<html>
<head>
<script>
function showMenu(value){
if(document.all)
if(document.all.selectMenuOuter)
if(document.all.selectMenuOuter.filters){
if(value){
document.all.selectMenuOuter.filters["revealTrans"].apply();
document.all.selectMenuInner.style.display = "none";
document.all.dropDownMenu.style.display = "block";
}else{
document.all.dropDownMenu.style.display = "none";
document.all.selectMenuInner.style.display = "block";
}
}
}
</script>
</head>
<body>
<div id="selectMenuOuter" style="filter:revealTrans; height=50; width=100;">
<select id="selectMenuInner">
<option>select menu</option>
<option>select menu</option>
<option>select menu</option>
</select>
</div>
<br>
<br>
<a href="javascript:showMenu(true)">show menu</a>
<a href="javascript:showMenu(false)">hide menu</a>
<div id="dropDownMenu" style="DISPLAY:none;BACKGROUND-COLOR: pink; LEFT: 10pt; POSITION: absolute; TOP: 1pt ">
Menu<br>
Menu<br>
Menu<br>
</div>
</body>
</html>
|
|
|
|
|
|
OK, I've made progress :)))
Right now I'm able to get the menu to hover over the <select> - the only strange thing is that when it hovers the div that contains all these elements (including the menu) get's resized (it's width is increased and then it requires scrolling to view the elements that are more to the right)
The content div that get's resized is defined as:
div.content{
(...)
position: absolute;
width: 96%;
(...)
}
The Javascript is something like:
if( Showing the menu items ){
(...)
coverDiv.filters["revealTrans"].apply();
//display=block messed with the DDL's positioning
dropdownlist.style.visibility='hidden';
}
else{
dropdownlist.style.visibility='visible';
//A WORKAROUND: content.style.width='500px'
}
If I use content.style.width='500px' it'll get resized back to it's proper width, but that isn't very nice for different resolutions (a requirement) and the content will be constantly moving when the user activates de menu; is there anyway to stop this from happening?
Thank you very much! Keep 'em coming! :)
<Added>
By the way, I defined the HTML like this:
<div class="content">
<div id="coverDiv" style="filter:revealTrans; height:50px; width:200px;>
<DropDownList>
</div>
</div>
|
|
|
|
The resizing was happening because I had specified the div's width as 96% - setting it's width to pixels (e.g. 768px) solved the problem.
|
|
|
|
I have multiple SELECT elements on the page and was unable to get this to work by putting id="formselect" in the action as suggested here.
Instead I created the following functions:
function hideSelect()
{
if (document.all){
var myEls = document.getElementsByTagName("select");
for ( i=0;i<myEls.length;i++ )
{
myEls.style.visibility="hidden";
}
}
}
function unhideSelect()
{
if (document.all){
var myEls = document.getElementsByTagName("select");
for ( i=0;i<myEls.length;i++ )
{
myEls.style.visibility="visible";
}
}
}
I have a very large web site with 100 SELECT elements scattered across many, many pages. The code above allows me to hide all the SELECT elements on a page without adding id="formselect" to each of them.
|
|
|
|
sroszko code works fine, but you must add the element identificator in the inner for of each function
the right code is
function hideSelect()
{
for (j=0; j<document.forms.length; j++) {
var theForm = document.forms[j]
for(i=0; i<theForm.elements.length; i++){
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++){
if(theForm.elements.type == "select-one"){
theForm.elements.style.visibility = "visible";
}
}
}
}
|
|
|
|
Harking back a bit, just wanted to say thanks to LorenzoM, I found the IE filter solution most useful. (Good old Microsoft, if only they'd get the basics working instead of making all these fancy features!)
Just a word of caution, although Lorenzo's code worked fine in isolation, I found I had to use style="filter:revealTrans; height:50px; width:100px;" instead of style="filter:revealTrans; height=50; width=100;" to get my version working. Might be my doctype, I'm not sure, but it's probably better to do it that way anyway.
Thanks again!
Jillian
|
|
|
|
Something I've run into using Lorenzo's solution...
If I have the filter applied on a select box, and use javascript to change the value of the select box, the display won't update (although the value itself does).
I've tried setting the select box to display briefly before updating the value, and then hiding it again, but it goes back to what it was originally displaying.
I know what I'm trying to do doesn't make any sense in the context of this thread, I'm using it for something entirely different :)
I guess since the select box is set to hidden it theoretically shouldn't matter what it is displaying, but in this case you can see it! Any ideas...?
|
|
|
|
|
|
|
|
Instead of creating another function to show and hide the dropdown list, i made another solution and it is really suit my needs....yes at least..after all method suggested here not really suit my objective.
Because:
1) there is flickering effect when i'm jumping from <li> to another <li>..n result, my dropdown list keep flickering...show...hide...show..hide...n sometime not even hide..and it shows in front of my menu!!.
2) iframe is not the best solution for SEO...is it? no?
So the solution in my case is:
...to make another dropdown menu on behalf of dropdown list as can be seen here...:
http://www.idealisme.net/leesaformula
Hope this solution might be a little help for others....
Regards,
NAZRI
<Added>
The specific page for it is here:
http://www.idealisme.net/leesaformula/?page=agen/stokis
Regards,
NAZRI
|
|
|
|
Hello experts,
I am wondering when I visit this site.
please review this site. they have solved the select with z-index prob.
When I mouse over the menus there is no more issue with select option.
I tried to figure out the code but not have much experience.
I think you guys are experts could solve this prob.
http://www.target.com/gp/browse.html/ref=sc_iw_r_1_0/?node=607608011
|
|
|
|
The z-index works only if your element position is absolute!
Use these links if you want more info about z-index and position
|
|
|
|
A short while back, I mentioned an issue where a DHTML layer was being obstructed by underlying select lists.
In the comments, Josh mentioned the CSS property z-index, and I mentioned using CSS to simply "hide" the troublesome select lists, while the DHTML layer was visible - and then once the DHTML layer went away, I’d "show" the select lists again. This is also a CSS approach.
It turns out the best approach is a combination of both techniques.
And, truthfully, using z-index alone would solve all of our problems, but IE 6 doesn’t deal with it well.
So... for browsers that treat z-index the way it should be treated, the CSS rule is as simple as: credit report
#dhtmlLayer
{
z-index: 10;
}
So, for our example, that DHTML layer (with an ID of dhtmlLayer) is surely going to be displayed on top of everything else, including select lists. business cards
Problem solved for 90% of browsers on the market. But again, whereas many browsers utilize z-index properly, IE 6 does not.
So... for IE 6, we still have to use the old approach of "hiding" troublesome select lists, while the DHTML layer is showing.
Also, since the z-index property won’t hurt anything in IE 6, we can safely leave it in there. IE 6 will simply ignore it (or most of it).
Thankfully, the JavaScript part is rather simple. Within your JavaScript script, make variables into all the select lists you want to hide: customer service
var selectList1 = document.getElementById("selectList1");
var selectList2 = document.getElementById("selectList2");
var selectList3 = document.getElementById("selectList3");
var selectList4 = document.getElementById("selectList4");
...
Then, when you want to hide those specific select lists, you just specify that:
selectList1.style.visibility = 'hidden';
selectList2.style.visibility = 'hidden';
selectList3.style.visibility = 'hidden';
selectList4.style.visibility = 'hidden';
...
Then, when you want to re-show those specific lists, you just specify that:
selectList1.style.visibility = 'visible';
selectList2.style.visibility = 'visible';
selectList3.style.visibility = 'visible';
selectList4.style.visibility = 'visible';
...
The problem is... the larger your form grows, the more possible select lists there might be to hide. Also, if you move form elements around, there’s a chance that another select list might be "in the way" of the DHTML layer.
And then, for every select list, you have to enter a new line of JavaScript code, which targets it.
This is becoming a mess.
A better approach is to use an array, and simply hide all select lists, on the form. This way, it doesn’t matter where the select lists are, in the form insurance, or how many of them there are.
They’ll just all disappear (temporarily), and we’ll be set.
First, we initialize the array, which will hold all of the select lists in the form:
selectLists = document.getElementsByTagName('select');
|
|
| This 45 message thread spans 3 pages: < < 1 2 [3] > > |
|
|
|
|
|
derelict
