I have implemented the menu control, with a fairly basic copy of the example styles, but when it drops down above form I get an overlay issue (see
http://www.goinsane.co.uk/menu.jpg )
I've tried messing around with various zindex numbers in various styles, but can't seem to get the combination to stop the problem....
It would be very helpful if you could let me know if you think this modification should be made in the next rev of the kit. Is the proposed solution acceptable or is it too distracting to be used on real web sites?
The solution you posted before does the job, looks a bit odd to see form elements disappear though .... but mostly the reason I don't think I can use it is that the performance for the menu drops badly, rolling over options is like molasses.
The solution I have read elsewhere involves dropping an IFrame over elements to force proper redraw, but I don't really have the time to investigate and implement for my immediate needs (this is a spike for demo purposes). The Microsoft KB article explaining
why IE renders this way (its not a bug,m it's deliberate) suggests the IFrame trick.
For others the hide trick may work, for a built in option within the CSS Adapters kit, I would strongly suggest that the IFrame route would be better.
For the short term I'll stick to demoing in Firefox or IE7 (neither of which does this), if this isn't easily solved for the 'real' project then we will probably have to drop the ASP.NET controls and use a third party control where the problem has already
been reolved.
I decided to rework the JS per your idea of using the iframe solution. I'd been thinking that we ought to go this route. It's clearly the preferred model, and I believe it's being used in Atlas.
So, here is a first draft of what we might want to use for JavaScript\MenuAdapter.js. If you like, give it a quick try and let me know what you think.
var hoverClass = "AspNet-Menu-Hover";
var topmostClass = "AspNet-Menu";
function Hover__AspNetMenu(element)
{
if ((typeof(element.iFrameFormElementMask) != "undefined") && (element.iFrameFormElementMask != null))
{
element.iFrameFormElementMask.style.display = "";
}
The javascript you provided does solve the problem, but again by virtue of hiding the dropdown lists - albeit now with an IFrame ..... but the effect is still the same, a nasty removal and reappearance of the lists.
An example of IE not doing this can be seen at :
http://www.milonic.com/menusample14.php - so it can be done. Also this menu doesn't have the massive slowdown that is evident in the ASP.NET menu with the tricks so far applied.
The MenuAdapter is great, this issue is quite important for the use of this adapter since most websites have at least one page that have dropdownlists and/or listboxes and menus are used on every page.
On my pages, your latest solution makes Everything disappear Except my menu.
It's probably ignorance on my part, but other drop down menus cover up the dropdownlists without making them invisible. Not sure if it's because they use tables of somthing else. For instance, the microsoft menu without using the menuadapter covers the dropdownlists
ok.
Can you post some code (even just some HTML if that's all you can give me) that demonstrates the problem wherein everything disappears? I'd like to help solve this. Thanks.
OK, folks, here is a revised version of the JavaScript code for the Menu adapter. I think it is better than what I offered previously. This version should only mask off the portion of the page that is occupied by the menu and should not make other things
disappear.
I would be VERY helpful if one or more readers could try out this new version and let me know if it solves their problems on pages with menus and form elements... or if it messes things up still.
Thanks, Juan. Your testing and feedback are very helpful.
Re: release schedule... let me post something in the next day or two separately. I'll try to sketch out where we're heading, what will be included and when. The bottom line, though, is that there will be more releases and they won't be too long from now.
caseyc69
Member
15 Points
3 Posts
Overlay / ZIndex issue with Menu and Form controls
Jun 14, 2006 09:08 AM|LINK
I have implemented the menu control, with a fairly basic copy of the example styles, but when it drops down above form I get an overlay issue (see http://www.goinsane.co.uk/menu.jpg )
I've tried messing around with various zindex numbers in various styles, but can't seem to get the combination to stop the problem....
Anyone have any ideas?
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Overlay / ZIndex issue with Menu and Form controls
Jun 14, 2006 04:40 PM|LINK
Please refer to this earlier posting, http://forums.asp.net/thread/1285393.aspx.
It would be very helpful if you could let me know if you think this modification should be made in the next rev of the kit. Is the proposed solution acceptable or is it too distracting to be used on real web sites?
Groovybits.com
caseyc69
Member
15 Points
3 Posts
Re: Overlay / ZIndex issue with Menu and Form controls
Jun 14, 2006 05:09 PM|LINK
Russ
Thanks for the quick reply....
The solution you posted before does the job, looks a bit odd to see form elements disappear though .... but mostly the reason I don't think I can use it is that the performance for the menu drops badly, rolling over options is like molasses.
The solution I have read elsewhere involves dropping an IFrame over elements to force proper redraw, but I don't really have the time to investigate and implement for my immediate needs (this is a spike for demo purposes). The Microsoft KB article explaining why IE renders this way (its not a bug,m it's deliberate) suggests the IFrame trick.
For others the hide trick may work, for a built in option within the CSS Adapters kit, I would strongly suggest that the IFrame route would be better.
For the short term I'll stick to demoing in Firefox or IE7 (neither of which does this), if this isn't easily solved for the 'real' project then we will probably have to drop the ASP.NET controls and use a third party control where the problem has already been reolved.
Thanks again for the quick reply!
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Overlay / ZIndex issue with Menu and Form controls
Jun 14, 2006 08:12 PM|LINK
Good luck with the demo.
I decided to rework the JS per your idea of using the iframe solution. I'd been thinking that we ought to go this route. It's clearly the preferred model, and I believe it's being used in Atlas.
So, here is a first draft of what we might want to use for JavaScript\MenuAdapter.js. If you like, give it a quick try and let me know what you think.
var hoverClass = "AspNet-Menu-Hover";
var topmostClass = "AspNet-Menu";
function Hover__AspNetMenu(element)
{
if ((typeof(element.iFrameFormElementMask) != "undefined") && (element.iFrameFormElementMask != null))
{
element.iFrameFormElementMask.style.display = "";
}
AddClass__CssFriendlyAdapters(element, hoverClass);
}
function Unhover__AspNetMenu(element)
{
RemoveClass__CssFriendlyAdapters(element, hoverClass);
if ((typeof(element.iFrameFormElementMask) != "undefined") && (element.iFrameFormElementMask != null))
{
element.iFrameFormElementMask.style.display = "none";
}
}
function SetHover__AspNetMenu()
{
var isIE = (navigator.userAgent.indexOf("MSIE") >= 0);
var menus = document.getElementsByTagName("ul");
for (var i=0; i<menus.length; i++)
{
if(menus[i].className == topmostClass)
{
var iFrameFormElementMask = null;
if (isIE)
{
iFrameFormElementMask = document.createElement("IFRAME");
iFrameFormElementMask.frameBorder = 0;
iFrameFormElementMask.src = "javascript:void(0);";
iFrameFormElementMask.style.position = "absolute";
iFrameFormElementMask.style.left = "-1000px";
iFrameFormElementMask.style.top = "-1000px";
iFrameFormElementMask.style.width = "4000px";
iFrameFormElementMask.style.height = "4000px";
iFrameFormElementMask.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
iFrameFormElementMask.style.display = "none";
iFrameFormElementMask = menus[i].parentNode.insertBefore(iFrameFormElementMask, menus[i]);
}
var items = menus[i].getElementsByTagName("li");
for (var k=0; k<items.length; k++)
{
items[k].onmouseover = function() { Hover__AspNetMenu(this); }
items[k].onmouseout = function() { Unhover__AspNetMenu(this); }
if (isIE)
{
items[k].iFrameFormElementMask = iFrameFormElementMask;
}
}
}
}
}
window.onload = SetHover__AspNetMenu;
Groovybits.com
caseyc69
Member
15 Points
3 Posts
Re: Overlay / ZIndex issue with Menu and Form controls
Jun 19, 2006 07:20 AM|LINK
Thanks again for the quick response....
The javascript you provided does solve the problem, but again by virtue of hiding the dropdown lists - albeit now with an IFrame ..... but the effect is still the same, a nasty removal and reappearance of the lists.
An example of IE not doing this can be seen at : http://www.milonic.com/menusample14.php - so it can be done. Also this menu doesn't have the massive slowdown that is evident in the ASP.NET menu with the tricks so far applied.
Hope that helps in your investigations
Casey
nex2006
Member
5 Points
1 Post
Re: Overlay / ZIndex issue with Menu and Form controls
Jun 21, 2006 02:23 AM|LINK
The MenuAdapter is great, this issue is quite important for the use of this adapter since most websites have at least one page that have dropdownlists and/or listboxes and menus are used on every page.
On my pages, your latest solution makes Everything disappear Except my menu.
It's probably ignorance on my part, but other drop down menus cover up the dropdownlists without making them invisible. Not sure if it's because they use tables of somthing else. For instance, the microsoft menu without using the menuadapter covers the dropdownlists ok.
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Overlay / ZIndex issue with Menu and Form controls
Jun 21, 2006 03:02 AM|LINK
Groovybits.com
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Overlay / ZIndex issue with Menu and Form controls
Jun 26, 2006 11:00 PM|LINK
OK, folks, here is a revised version of the JavaScript code for the Menu adapter. I think it is better than what I offered previously. This version should only mask off the portion of the page that is occupied by the menu and should not make other things disappear.
I would be VERY helpful if one or more readers could try out this new version and let me know if it solves their problems on pages with menus and form elements... or if it messes things up still.
Thanks.
****************************************************
JavaScript\MenuAdapter.js
****************************************************
var hoverClass = "AspNet-Menu-Hover";
var topmostClass = "AspNet-Menu";
function Hover__AspNetMenu(element)
{
AddClass__CssFriendlyAdapters(element, hoverClass);
if ((typeof(element.iFrameFormElementMask) != "undefined") && (element.iFrameFormElementMask != null))
{
var menu = element.offsetParent;
var mask = element.iFrameFormElementMask;
mask.style.display = "";
mask.style.top = element.offsetTop;
mask.style.left = element.offsetLeft;
var height = 0;
var width = 0;
var child = element.firstChild;
while (child)
{
height += child.offsetHeight;
width += child.offsetWidth;
if (child.tagName == "UL")
{
var grandchild = child.firstChild;
while (grandchild)
{
height += grandchild.offsetHeight;
width += grandchild.offsetWidth;
grandchild = grandchild.nextSibling;
}
}
child = child.nextSibling;
}
element.iFrameFormElementMask.style.height = height;
element.iFrameFormElementMask.style.width = width;
if (mask.style.zIndex > 0)
{
mask.style.zIndex = menu.style.zIndex - 1;
}
}
}
function Unhover__AspNetMenu(element)
{
RemoveClass__CssFriendlyAdapters(element, hoverClass);
if ((typeof(element.iFrameFormElementMask) != "undefined") && (element.iFrameFormElementMask != null))
{
element.iFrameFormElementMask.style.display = "none";
}
}
function SetHover__AspNetMenu()
{
var isIE = (navigator.userAgent.indexOf("MSIE") >= 0);
var menus = document.getElementsByTagName("ul");
for (var i=0; i<menus.length; i++)
{
if(menus[i].className == topmostClass)
{
var iFrameFormElementMask = null;
if (isIE)
{
iFrameFormElementMask = document.createElement("IFRAME");
iFrameFormElementMask.scrolling= "no";
iFrameFormElementMask.src = "about:blank";
iFrameFormElementMask.frameBorder = 0;
iFrameFormElementMask.style.position = "absolute";
iFrameFormElementMask.style.display = "none";
iFrameFormElementMask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
if ((menus[i].offsetParent != null) && (menus[i].offsetParent != "undefined"))
{
menus[i].parentNode.insertBefore(iFrameFormElementMask, menus[i]);
}
}
var items = menus[i].getElementsByTagName("li");
for (var k=0; k<items.length; k++)
{
items[k].onmouseover = function() { Hover__AspNetMenu(this); }
items[k].onmouseout = function() { Unhover__AspNetMenu(this); }
if (isIE)
{
items[k].iFrameFormElementMask = iFrameFormElementMask;
}
}
}
}
}
window.onload = SetHover__AspNetMenu;
Groovybits.com
Rasetti
Participant
1216 Points
286 Posts
Re: Overlay / ZIndex issue with Menu and Form controls
Jul 03, 2006 11:48 PM|LINK
Russ, I've testing the new .js code for a week, using IE6, IE7, Firefox and Opera
It works perfect for me, even if a overlap the Menu with some Flash movies.
BTW, There is going to be a new release soon?
Juan
MCTS
Please remember to click "Mark as Answer" on this post if it helped you.
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Overlay / ZIndex issue with Menu and Form controls
Jul 04, 2006 01:53 AM|LINK
Thanks, Juan. Your testing and feedback are very helpful.
Re: release schedule... let me post something in the next day or two separately. I'll try to sketch out where we're heading, what will be included and when. The bottom line, though, is that there will be more releases and they won't be too long from now.
Groovybits.com