Support Forum Softcomplex logo
About Us  | Services  | Download  | Order  | Support  | |
| Search | Today's Posts | Stats | Board Rules | Not logged in [ Login | Register ]
go to bottom
Last active: Never

Printable Version | Subscribe | Add to Favourites   Post new thread
Author: Subject: IE: z-index above select boxes
[email protected]
Newbie

Posts: 1
Registered: 11/17/2003
Member Is Offline
posted on 11/17/2003 at 06:06 PM Reply With Quote
IE: z-index above select boxes


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!
View User's Profile View All Posts By User U2U Member
nik


Posts:
Registered: 1/1/1970
Member Is Offline
posted on 11/19/2003 at 10:34 AM Reply With Quote

It is possible only in Tigra Menu GOLD ( http://www.softcomplex.com/products/tigra_menu_gold/ ).
View User's Profile View All Posts By User U2U Member
Phill
Junior Member

Posts: 2
Registered: 12/12/2003
Member Is Offline
posted on 12/12/2003 at 12:36 PM Reply With Quote
Fixing z-order for menu items


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.
View User's Profile View All Posts By User U2U Member
Phill
Junior Member

Posts: 2
Registered: 12/12/2003
Member Is Offline
posted on 12/12/2003 at 02:35 PM Reply With Quote
z-order on menu items


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
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 12/13/2003 at 02:21 AM Reply With Quote

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/
View User's Profile View All Posts By User U2U Member
jgillin
Newbie

Posts: 1
Registered: 12/19/2003
Member Is Offline
posted on 12/19/2003 at 12:48 AM Reply With Quote

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
View User's Profile View All Posts By User U2U Member
tspurr
Junior Member

Posts: 4
Registered: 10/6/2004
Member Is Offline
posted on 11/2/2004 at 12:44 AM Reply With Quote

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
View User's Profile View All Posts By User U2U Member
kjhstuph
Newbie

Posts: 1
Registered: 4/15/2005
Location: Middlebury, VT
Member Is Offline
posted on 4/15/2005 at 12:14 AM Reply With Quote

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.
View User's Profile View All Posts By User U2U Member
yespbs
Newbie

Posts: 1
Registered: 8/1/2005
Location: india
Member Is Offline
posted on 8/1/2005 at 10:25 AM Reply With Quote
Help on hiding select in IE below div


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
View User's Profile View All Posts By User U2U Member
dsavatta
Newbie

Posts: 1
Registered: 8/29/2005
Member Is Offline
posted on 8/29/2005 at 09:48 PM Reply With Quote
can you...


use a tigra menu as a select box?
View User's Profile View All Posts By User U2U Member
popufig
Newbie

Posts: 1
Registered: 1/13/2006
Member Is Offline
posted on 1/13/2006 at 03:52 AM Reply With Quote

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?
View User's Profile View All Posts By User U2U Member
cesarlee
Newbie

Posts: 1
Registered: 7/5/2006
Member Is Offline
posted on 7/5/2006 at 04:31 PM Reply With Quote
one more thing you have to do to make it work


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
View User's Profile View All Posts By User U2U Member
redzex
Junior Member

Posts: 6
Registered: 7/17/2006
Location: Ortigas, philippines
Member Is Offline
posted on 7/17/2006 at 09:25 PM Reply With Quote

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 (",)
View User's Profile View All Posts By User U2U Member
Post new thread

Related Links:
Product Page Tigra Menu
Product Demonstrations Live Demos:
Traditional Blue
White Steps
Inner HTML
All Together
Frames Targeting
Free Download Free Download
Free Download Menu Builders
Online Builder
Builder for Windows
Product Documentation Documentation:
Documenation Page
Change Log
Menus Comparison Table
Support Forum Support Forum
 
Tigra Menu PRO
Product Demonstrations Live Demos
Alignment & Multimenus
Unlimited Depth
Item sizing and positioning
Inner HTML
Frames, Targeting
Static Positioning
Free Download Menu Builders
Online Builder
Product Documentation Documentation
Documenation Page
Tigra Menu PRO FAQ
Change Log
Menus Comparison Table
Support Forum Technical Support
Support Forum
Customer Care System
Order Now ORDER NOW!
Add to Cart
View Cart
 
Product Page Tigra Menu GOLD
Functionality demos Functionality demos
Multiple
Cross-framed
Select-boxes
Effects
Design demos Design demos
Icons & arrows
Idea!
Hi there!
Matrix
MS Style
XP Style
Dots
3D-Buttons
Product Documentation Documentation
Documenation Page
Change Log
Menus Comparison Table
Support Forum Technical Support
Support Forum
Customer Care System
Order Now ORDER NOW!
Add to Cart
View Cart
 

Go To Top


Powered by XMB 1.9.1 Nexus
Developed By Aventure Media & The XMB Group © 2002-2004