Board Logo

IE: z-index above select boxes
[email protected] - 11/17/2003 at 06:06 PM

Hello everybody,

I have difficulties placing a tigra menu (free version) over a select box. Whenever a menu item pops up over a select box, it's not rendered right above the select box. The menu splits up into two parts: one part with items above the select box and a second part will all remaining items below the select box.

It somewhat looks like a IE specific z-index trouble. Any hints?

Thanks!


nik - 11/19/2003 at 10:34 AM

It is possible only in Tigra Menu GOLD ( http://www.softcomplex.com/products/tigra_menu_gold/ ).


Phill - 12/12/2003 at 12:36 PM

Hi,
If you change the line of code in menu.js that reads:
' z-index: ' + this.n_depth + ';"
to read:
' z-index: ' + (this.n_depth + 10000) + ';"

or some other value than 10000 once it is bigger than the z-index of any other controls on your page the menu will display correctly over select boxes, textboxes, etc.

Hope that helps some people,
Phill.


Phill - 12/12/2003 at 02:35 PM

Further to my previous post it would of course be advantageous to instead change the line in menu.js from
' z-index: ' + this.n_depth + ';" ' to
' z-index: ' + (this.n_depth + this.getprop('z-order')) + ';" '

allowing a new property to be added in the menu_tpl.js

'z-order': n

where n is a the z-order to set the menu items to.
Maybe the SoftComplex team could consider this change for a future release of the product?
Regards,
Phill


tigra - 12/13/2003 at 02:21 AM

Unfortunately, it's not that simple. The solution you offer will only work for other absolutely positioned elements, but not for form elements.
Windowed controls such as select boxes will be seen through all DHTML elements regardless of their z-index. This is well known bug in the browsers' implementation. Possible solutions are:
- hiding form elements when menu is in action
- covering them with other windowed control (doesn't work cross browser)

Tigra Menu GOLD supports all above including custom definable base z-index.

Live demo is available at:
http://www.softcomplex.com/products/tigra_menu_gold/demo/selects/

More discussion as well as solution for flash movies can be found at:
http://www.softcomplex.com/forum/viewthread_10/


jgillin - 12/19/2003 at 12:48 AM

It's cool that tiagra gold shows above the select boxes. I'm trying to create a custom dhtml "alert box", and I was wondering if you would inform me as to how to go above the select box. I've found some custom alert boxes on the web, but they all have problems with select boxes. If this menu uses another "windowed control" what control does it use. Would an iframe work?
Thanks for any suggestions.
Jeff


tspurr - 11/2/2004 at 12:44 AM

I had a problem going over a Flash -- so I made a custom menu that's in a DIV tag that contains an iframe -- this went over the Flash in IE, might work for form items as well, I don't know. In netscape I had to do something different. Worth a try... If your form is absolutely positioned or is wrapped with a DIV tag maybe you can try hiding it (or move it off screen) when your DHTML alert box comes up


kjhstuph - 4/15/2005 at 12:14 AM

Quote:
Originally posted by Phill
Hi,
If you change the line of code in menu.js that reads:
' z-index: ' + this.n_depth + ';"
to read:
' z-index: ' + (this.n_depth + 10000) + ';"

or some other value than 10000 once it is bigger than the z-index of any other controls on your page the menu will display correctly over select boxes, textboxes, etc.

Hope that helps some people,
Phill.


Helped me. Thanks.


yespbs - 8/1/2005 at 10:25 AM

Hi ,
You can find a right solution at this link
http://dotnetjunkies.com/WebLog/jking/archive/category/139.aspx

the article by Joe King uses iframe below div to hide select .

Cool !

Hope this helps


dsavatta - 8/29/2005 at 09:48 PM

use a tigra menu as a select box?


popufig - 1/13/2006 at 03:52 AM

Yes, we can use iframe to solve this problem.

we can insert a iframe before the tigra menu <a> tag, just use the same style . just as:

var tmp = '<iframe id="e' + o_root.n_id + '_'
+ this.n_id +'f" src="javascript:false;" scrolling="no" frameborder=0 style="position:absolute; top: ' +
this.n_y + 'px; left: ' + this.n_x + 'px; width: ';
if (this.n_depth == 0)
{
tmp = tmp + this.getprop('width' + topMenuIndex);
}else{
tmp = tmp + this.getprop('width');
}
tmp = tmp + 'px; height: '
+ (this.getprop('height') + 1) + 'px; visibility: hidden;'
+' z-index: ' + (this.n_depth + 99) + '; background-color: #FFFFFF; "></iframe>';

tmp += '<a id="e' + o_root.n_id + '_'
+ this.n_id +'o" class="';

the we set the <a> z-index to : this.n_depth + 100, larger than iframe is ok.

After that ,we can add a property :
this.f_oelement = document.getElementById('e' + o_root.n_id + '_' + this.n_id + 'f');
follow the e_ielement & e_oelement defind.
The we could use f_oelement as a reference to iframe to control the show or hidden.
That`s all.
Not too hard, right?


cesarlee - 7/5/2006 at 04:31 PM

Quote:
Originally posted by popufig
Yes, we can use iframe to solve this problem.

we can insert a iframe before the tigra menu <a> tag, just use the same style . just as:

var tmp = '<iframe id="e' + o_root.n_id + '_'
+ this.n_id +'f" src="javascript:false;" scrolling="no" frameborder=0 style="position:absolute; top: ' +
this.n_y + 'px; left: ' + this.n_x + 'px; width: ';
if (this.n_depth == 0)
{
tmp = tmp + this.getprop('width' + topMenuIndex);
}else{
tmp = tmp + this.getprop('width');
}
tmp = tmp + 'px; height: '
+ (this.getprop('height') + 1) + 'px; visibility: hidden;'
+' z-index: ' + (this.n_depth + 99) + '; background-color: #FFFFFF; "></iframe>';

tmp += '<a id="e' + o_root.n_id + '_'
+ this.n_id +'o" class="';

the we set the <a> z-index to : this.n_depth + 100, larger than iframe is ok.

After that ,we can add a property :
this.f_oelement = document.getElementById('e' + o_root.n_id + '_' + this.n_id + 'f');
follow the e_ielement & e_oelement defind.
The we could use f_oelement as a reference to iframe to control the show or hidden.
That`s all.
Not too hard, right?



you also need to add the following lines:

for (n_id = 0; n_id < this.a_index.length; n_id++) {
var o_curritem = this.a_index[n_id];
if (o_curritem.n_depth > n_tolevel && o_curritem.b_visible) {
o_curritem.e_oelement.style.visibility = 'hidden';
o_curritem.f_oelement.style.visibility = 'hidden'; // <-- Add this!
o_curritem.b_visible = false;
}
}


and also

for (var n_order = 0; n_order < o_item.a_children.length; n_order++) {
var o_curritem = o_item.a_children[n_order];
o_curritem.e_oelement.style.visibility = 'visible';
o_curritem.f_oelement.style.visibility = 'visible'; // <--- add this one too
o_curritem.b_visible = true;
}

also, on the version of the tigra menu I have, you'll have to change the frame code to this:

var tmp = '<iframe id="e' + o_root.n_id + '_'
+ this.n_id +'f" src="javascript:false;" scrolling="no" frameborder=0 style="position:absolute; top: ' +
this.n_y + 'px; left: ' + this.n_x + 'px; width: ';
if (this.n_depth == 0)
{
tmp = tmp + this.getprop('width');
}else{
tmp = tmp + this.getprop('width');
}
tmp = tmp + 'px; height: '
+ (this.getprop('height') + 1) + 'px; visibility: hidden;'
+' z-index: ' + (this.n_depth + 99) + '; background-color: #FFFFFF; "></iframe>';
document.write( tmp );

it goes right above the line that reads:

document.write (
'<a id="e' + o_root.n_id + '_'



and then you need to add one last thing:

this.e_ielement = document.getElementById('e' + o_root.n_id + '_' + this.n_id + 'i');
this.e_oelement = document.getElementById('e' + o_root.n_id + '_' + this.n_id + 'o');
this.f_oelement = document.getElementById('e' + o_root.n_id + '_' + this.n_id + 'f'); // <-- add this line



if you're capable of following my crazy instructions, you'll be able to make it so that your tigra menu doesn't show up under select boxes for internet explorer


redzex - 7/17/2006 at 09:25 PM

Modify the line

+ (this.getprop('height') + 1) + 'px; visibility: hidden;'

to:

+ (this.getprop('height') ) + 'px; visibility: hidden;'

to remove garbage under the child menu

Thanks Cesarlee for your wit! i now have a great Tigra Menu (",)


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/