Russ Helfand:

Apologies. My last message was totally rude.  Ouch.  That wasn't what it sounded like in my head!  I'm terribly sorry.

Would you be willing to put that aside and help me understand the proposed solution better so I can explore its implementation and use in the kit?  (I know that's a bit much to ask since I've just admitted being rude but I hope you're going to rise above that.)

Hi Russ! I was a little put off by your previous msg, but this one more than makes up for it. I'll do my best to join forces with you to find a solution, though I suspect my knowledge and understanding might be half of yours... But Two are better than one, right?

Russ Helfand:

I've visited the site you mentioned... twice.  I've done a view source and studied the code fairly thoroughly.  I have to admit that it isn't the easiest thing in the world for me to get my hands around.  If I understand, HedgerWow is saying that the basic implementation pattern is (or should be, in the case of our adapter kit):

<div class="select-free" id="dd3">
  <div class="bd">
    your content here
  </div>
  <!--[if lte IE 6.5]><iframe></iframe><![endif]-->
</div>

Is that it? Well, obviously, we would need to integrate into the CSS rules some of the properties of the rules that HedgerWow has proposed, ala:

.select-free
{
 position:absolute;
 z-index:10;/*any value*/
 overflow:hidden;/*must have*/
 width:33em;/*must have for any value*/;
}
.select-free iframe
{
 display:none;/*sorry for IE5*/
 display/**/:block;/*sorry for IE5*/
 position:absolute;/*must have*/
 top:0;/*must have*/
 left:0;/*must have*/
 z-index:-1;/*must have*/
 filter:mask();/*must have*/
 width:3000px;/*must have for any big value*/
 height:3000px/*must have for any big value*/;
}

Is that the gist of the proposal?

The is it. A div with a few CSS rules, and an 'optional' (i.e. only for ie6) iframe with it's own CSS rules, that basically, is hidden.

Russ Helfand:

If so, let's move on to what it would take to put this into the menu adapter...

Hmmmm.  This gets a bit sticky. HedgerWow's sample lacks an essential aspect inherent to menus: the content that is supposed to cover the <select> is:

1. Not shown all of the time. It appears and disappears depending on the cursor hovering over a different DOM element.
2. Within an <li>.  I'm not sure if this has bearing on the situation.  It does bring up the question of whether select-free is the <li> or if we should put a <div> inside the <li> and mark that <div> with a class like select-free.

Again, apologies for my abruptness earlier.  I'd be very interested in pursuing this solution if you are inclined.  Perhaps we can develop the code openly, here on the forum.

1. I don't know if this fact would have an effect. I'm simply hoping it won't.
2. That's what confused me too. Will the <li> behave the same way? Unknown. I like the idea of adding a <div> if it doesn't. I wouldn't want the <div> won't change the menu's behaviour, though.

What I'm going to do now is generate the HTML (and CSS) for a menu that overlaps a <select> and then see if the <li> will work, or not. If it does, then we know what we need to implement, at least.

Update: No luck so far. i just can't find the right combination. And the position:absolute is ruining the menu in many cases. We might need to manipulate the iframe via Javascript.

First, I appreciate that you've been able to put aside my earlier boarish behavior.  Thanks.

Second, I'm glad that you were able to confirm the proposed implementation pattern.  As I said, the original article by HedgerWow wasnt' entirely clear so your confirmation helps.

Third, I completely agree that a good way to investigate merging HedgerWow's solution with the adapters is to (ironically) put aside aside the adapters for the moment and simply see if we can develop some static HTML in the form of a "pure CSS menu" (i.e., with unordered lists and list items) that uses HedgerWow's technique to mask underlying form elements, like <select> tags.

Yikes, I'm sorry that you've run into problems on this third point.  Truly, I'm sorry that you've hit a snag there because, now that I understand the proposal, it does indeed look very clean and nice.

I'd like to help. Could you post the HTML and CSS you've been experimenting with along with whatever notes you wish to share about where you've hit snags.  I can use that static markup and CSS to experiment here, too.  Maybe if we both work on it we can make a breakthrough.

 I think that when you look at this page you'll recognize the source...

 

HTML (test.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0072)http://localhost:1566/CssAdapters1/GenericPage.aspx?goto=ProductsWindows -->
<HTML 
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Generic landing page</TITLE><!--[if lt IE 9]>
<META http-equiv=Content-Type content="text/html; charset=utf-8"><LINK 
id=ctl00_IEMenuCSS href="test_files/IEMenu.css" type=text/css rel=stylesheet><![endif]-->
<LINK href="test_files/DataList.css" type=text/css 
rel=stylesheet><LINK href="test_files/ExamplesMaster.css" type=text/css 
rel=stylesheet><LINK href="test_files/MainMaster.css" type=text/css 
rel=stylesheet><LINK href="test_files/Menu.css" type=text/css 
rel=stylesheet><LINK href="test_files/MenuExample.css" type=text/css 
rel=stylesheet><LINK href="test_files/WhitePaper.css" type=text/css 
rel=stylesheet>
<STYLE type=text/css>.ctl00_MainNav_0 {
	DISPLAY: none; LEFT: 0px; VISIBILITY: hidden; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: white
}
.ctl00_MainNav_1 {
	COLOR: #124500; TEXT-DECORATION: none
}
.ctl00_MainNav_2 {
	COLOR: #124500
}
.ctl00_MainNav_3 {
	
}
.ctl00_MainNav_4 {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
.ctl00_MainNav_5 {
	BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.ctl00_MainNav_6 {
	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
.ctl00_MainNav_7 {
	BORDER-RIGHT: #165ea9 2px solid; BORDER-TOP: #165ea9 2px solid; BORDER-LEFT: #165ea9 2px solid; BORDER-BOTTOM: #165ea9 2px solid; BACKGROUND-COLOR: #e6f0fa
}
.ctl00_MainNav_8 {
	COLOR: white; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.ctl00_MainNav_9 {
	COLOR: white; BACKGROUND-COLOR: #165ea9
}
.ctl00_MainNav_10 {
	COLOR: white; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.ctl00_MainNav_11 {
	COLOR: white; BACKGROUND-COLOR: #165ea9
}
</STYLE>

<META content="MSHTML 6.00.2900.2912" name=GENERATOR></HEAD>
<BODY>
<FORM id=aspnetForm name=aspnetForm action=GenericPage.aspx?goto=ProductsWindows 
method=post>

<SCRIPT src="test_files/AdapterUtils.js" type=text/javascript></SCRIPT>
<SCRIPT src="test_files/MenuAdapter.js" type=text/javascript></SCRIPT>

<DIV id=Banner>
	<DIV class=MainMenu>
		<DIV class=AspNet-Menu-Horizontal>
			<UL class=AspNet-Menu>

				  <LI class=AspNet-Menu-Leaf>
			  <SPAN class=AspNet-Menu-NonLink>home page</SPAN> 
<div  class="select-free">	
						<UL >							
							<LI class=AspNet-Menu-Leaf>
								<A class=AspNet-Menu-Link 
								title="live example of a Menu" 
								href="http://localhost:1566/CssAdapters1/Menu.aspx">Menu </A>							
							</LI>
							<LI class=AspNet-Menu-Leaf>
								<A class=AspNet-Menu-Link 
								title="live example of a Menu" 
								href="http://localhost:1566/CssAdapters1/Menu.aspx">Menu </A>							
							</LI>
							<LI class=AspNet-Menu-Leaf>
								<A class=AspNet-Menu-Link 
								title="live example of a Menu" 
								href="http://localhost:1566/CssAdapters1/Menu.aspx">Menu </A>							
							</LI>
							<LI class=AspNet-Menu-Leaf>
								<A class=AspNet-Menu-Link 
								title="live example of a Menu" 
								href="http://localhost:1566/CssAdapters1/Menu.aspx">Menu </A>							
							</LI>
							<LI class=AspNet-Menu-Leaf>
								<A class=AspNet-Menu-Link 
								title="live example of a Menu" 
								href="http://localhost:1566/CssAdapters1/Menu.aspx">Menu </A>							
							</LI>
							
						</ul>
</div>
				  </LI>
	

				  <LI class=AspNet-Menu-WithChildren>
					  <SPAN class=AspNet-Menu-NonLink>Examples 
					  </SPAN>
					  <UL>




							<LI class=AspNet-Menu-Leaf>
							
							<A class=AspNet-Menu-Link 
							title="live example of a TreeView" 
							href="http://localhost:1566/CssAdapters1/TreeView.aspx">TreeView </A>
							</LI>

							<LI class=AspNet-Menu-Leaf>
							<A class=AspNet-Menu-Link 
							title="live example of a DetailsView" 
							href="http://localhost:1566/CssAdapters1/DetailsView.aspx">DetailsView 
							</A>
							</LI>

							<LI class=AspNet-Menu-Leaf>
							
							<A class=AspNet-Menu-Link 
							title="live example of a FormView" 
							href="http://localhost:1566/CssAdapters1/FormView.aspx">FormView </A>
							
							</LI>
							<LI class=AspNet-Menu-Leaf>
								<A class=AspNet-Menu-Link 
								title="live example of a DataList" 
								href="http://localhost:1566/CssAdapters1/DataList.aspx">DataList 
								</A>
							</LI>
					  </UL>
				  </LI>
				  <LI class=AspNet-Menu-Leaf>
						<A class=AspNet-Menu-Link 
						title="white paper describing the architecture and theory behind this web site" 
						href="http://localhost:1566/CssAdapters1/WhitePaper.aspx">White Paper 
						</A>

				  </LI>
			</UL>
		</DIV>
	</DIV>
</DIV>


<DIV id=TheGoods>
This is the control 
<select>
	<option> what will the test say? </option>
	<option> what will the test say? </option>
	<option> what will the test say? </option>
	<option> what will the test say? </option>
	<option> what will the test say? </option>
	<option> what will the test say? </option>
	<option> what will the test say? </option>
	<option> what will the test say? </option>
	<option> what will the test say? </option>
</select>

</DIV></FORM>
<DIV id=corner-top-left></DIV></BODY></HTML>

 

 

 This is what I added to MainMaster.css :

.select-free
{
background-color:red;
/* position:<span class='val'>absolute</span>;*/
 z-index:10;/*any value*/
 overflow:hidden;/*must have*/
/* width:<span class='val'><span class='unit'>33</span>em</span>;*//*must have for any value*/;
}
.select-free iframe
{
 display:none;/*sorry for IE5*/
 display/**/:block;/*sorry for IE5*/
 position:absolute;/*must have*/
 top:0;/*must have*/
 left:0;/*must have*/
 z-index:-1;/*must have*/
 filter:mask();/*must have*/
 width:3000px;/*must have for any big value*/
 height:3000px/*must have for any big value*/;

 

A few simple  steps to get it to look like what I have:

1. Go to http://www.asp.net/CSSAdapters/GenericPage.aspx
2. Save it as test.html. the browser should create a folder with all the CSS files and images.
3. Open the html file with a text editor and replace everything with what I put up here.
4. Add the CSS code to MainMaster.css
5. Experiment...

OK, I rigged things up as you suggested.  One minor note: there's a closing brace missing from the CSS rule for the iframe. 

My first test shows the original problem: the <select> pierces through the display of the dropdown menu.

My first experiment was to add the requisite <iframe> within (and just inside the end of) the <div> whose class is select-free.  To be precise, I added:

 <!--[if lte IE 6.5]><iframe></iframe><![endif]-->

This comes immediately after the </ul> and before the </div>.

Wow, that makes things totally wonky in IE!  I wonder if we need to change the CSS display property on the <iframe> depending on the hover state in the menu item that causes the submenu to appear.  However, that sounds like we're back into JavaScript.  That's OK because the menu sort of requires JavaScript for IE6, anyway, because IE6 doesn't understand the hover pseudoclass on any tag but anchor (A)... and the pure-CSS menu solution requires recognition of hover on list items (LI)... which is what the kit's current JavaScript for the menu adapter simulates today. Whew... that was a mouthful.

So I guess the question may come down to whether or not there are elements of HedgerWow's solution that ought to be used within the Menu adapters existing JavaScirpt (or, more precisely, the JavaScript proposed for the next rev of the kit... that is shown earlier in this thread).

Or, can we somehow tweak the markup further so IE doesn't act wonky when the IFRAME is inserted (as noted above).  I'll try to look at how that might be accomplished, too, but if you come up with something brilliant, don't be shy about sharing your solution!

It's a little hard to be brilliant when I don't have any formal Javascript education...

I found 2 code snippets which might help, though...

1. The third solution here
2. And the last one here

Sorry for not being more useful. As far as i understand, things might work if we use javascript to create the iframe, put a div in it and then the <ul> in the div. The iframe would have to get the size and position of the <ul>, which I don't know how to do but I'm guessing should be simple for you.

 

 

Just another comment: Though many sites don't help with our problem, the iframe looks like the preferable solution for everyone. So at least we know we're in the right direction.

P.S.

Do you think the Atlas (.asp.net) team, or the ppl that wrote the Atlas control toolkit, have already delt with this? I know they have all kind of magical tricks like a modal form for a browser...

Atlas does use the IFRAME solution via JavaScript to solve problems of this nature.  That's what motivated me to propose the new code for MenuAdapter.js earlier in this thread at 06-26-2006, 4:00 PM. This new version of MenuAdapter.js dynamically creates and IFRAME and sets various style props on it to achieve a result very similar to what HedgerWow demonstrates and very similar what is used within Atlas.

Wait a sec! Isn't the code you're reffereing to the one I tried, which makes the whole <select> object invisible?

Yes, it is.  My point, though, is that that JavaScript does dynamically create an IFRAME, which I think is what you were suggesting that we do.  The fact that this JavaScript makes the <select> disappear is probably due to the particular way that that IFRAME's styles are set or the way it is being positioned on the page or within the DOM.  Happily, those may be things we can tweak... which makes me hopeful that we can simply modify the JavaScript posted earlier such that the <select> isn't made (temporarily) invisible. Does that sound right to you?

Russ Helfand:

...makes me hopeful that we can simply modify the JavaScript posted earlier such that the <select> isn't made (temporarily) invisible. Does that sound right to you?

It does. Can you test and see if you give that iframe the <ul>'s position and size, plus, add the CSS class to it, and see if we have any improvement?

I'm eagerly awaiting your results with the IFRAMES. I've been reading up on the issue today, and perhaps I can contribute more to that discussion in the near future.

Also, while you're visiting the overlay / z-index issue, it would be helpful to see if we could add tab-through-the-menu support for accessibility reasons, although that may get a bit more complex than what you're wanting to do here. (Even the unadapted menu doesn't support it, unfortunately.) Currently, tabbing through the menu created by the MenuAdapter only traverses the top level of menus. For accessibility purposes I need it to tab through all of the submenus as well.

http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html actually tabs through all of the sub-menus (at least in FF, haven't tested elsewhere), but unfortunately doesn't actually display any of the submenus while you're tabbing through them. The link is actually changing but there are no visual indicators (other than the URL at the bottom of most browser windows) that it's doing so.

http://www.udm4.com/ is an example of a drop-down menu that's also fully accessible and works with tabbing, but I'm not sure if they've solved the overlay issue.

Anyway, just wanted to stimulate some ideas while the menu is being worked on. I'll try to throw some more useful input into the z-index / overlay discussion in the near future. Thanks!

Falcon, thanks for pushing a little on the accessibility issue.  I'll see what I can do to get that fixed in the kit.

Meanwhile, for anyone and everyone who has been awaiting a new version of the JavaScript that creates and manipulates the IFRAME that masks off peek-a-boo <select> elements (etc.)... here is my latest draft of MenuAdapter.js.  Feedback is welcome.

 

//////////// MenuAdapter.js from the JavaScript folder of the kit //////////////////

var hoverClass = "AspNet-Menu-Hover";
var topmostClass = "AspNet-Menu";
var iFramePadding = 4;

function Hover__AspNetMenu(element)
{
    AddClass__CssFriendlyAdapters(element, hoverClass);

    var isIE = (navigator.userAgent.indexOf("MSIE") >= 0);
    if (isIE)
    {
        var child = element.firstChild;
        while (child)
        {
            if (child.tagName == "UL")
            {
                var grandchild = child.firstChild;
                while (grandchild)
                {
                    if (grandchild.tagName == "LI")
                    {
                        if ((typeof(grandchild.iFrameFormElementMask) != "undefined") && (grandchild.iFrameFormElementMask != null))
                        {
                            grandchild.iFrameFormElementMask.style.display = "block";
                            grandchild.iFrameFormElementMask.style.width = grandchild.offsetWidth + (iFramePadding * 2);
                            grandchild.iFrameFormElementMask.style.height = grandchild.offsetHeight + (iFramePadding * 2);
                        }
                    }
                   
                    grandchild = grandchild.nextSibling;
                }
            }

            child = child.nextSibling;
        }
    }
}

function Unhover__AspNetMenu(element)
{
    RemoveClass__CssFriendlyAdapters(element, hoverClass);

    var isIE = (navigator.userAgent.indexOf("MSIE") >= 0);
    if (isIE)
    {
        var child = element.firstChild;
        while (child)
        {
            if (child.tagName == "UL")
            {
                var grandchild = child.firstChild;
                while (grandchild)
                {
                    if (grandchild.tagName == "LI")
                    {
                        if ((typeof(grandchild.iFrameFormElementMask) != "undefined") && (grandchild.iFrameFormElementMask != null))
                        {
                            grandchild.iFrameFormElementMask.style.display = "none";
                        }
                    }

                    grandchild = grandchild.nextSibling;
                }
            }

            child = child.nextSibling;
        }
    }
}

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 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 && ((typeof(items[k].iFrameFormElementMask) == "undefined") || (items[k].iFrameFormElementMask == null)))
                {
                    var iFrameFormElementMask = document.createElement("IFRAME");
                    iFrameFormElementMask.scrolling= "no";
                    iFrameFormElementMask.src = "about:blank";
                    iFrameFormElementMask.frameBorder = 0;
                    iFrameFormElementMask.style.display = "none";
                    iFrameFormElementMask.style.position = "absolute";
                    iFrameFormElementMask.style.top = -1 * iFramePadding;
                    iFrameFormElementMask.style.left = -1 * iFramePadding;
                    iFrameFormElementMask.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
                    items[k].insertBefore(iFrameFormElementMask, items[k].firstChild);
                    items[k].iFrameFormElementMask = iFrameFormElementMask;
                }               
            }
        }
    }
}

window.onload = SetHover__AspNetMenu;

Ugh.  I just discovered a flaw in the JS posted immediately above.  Please disregard and don't use it.  I'll post a fixed version very soon.

OK.  Here's the fixed version of MenuAdapter.js.  The last version of nearly right... I 'd just forgotten to set the IFRAME's zIndex to -1.

 

var hoverClass = "AspNet-Menu-Hover";
var topmostClass = "AspNet-Menu";
var iFramePadding = 4;

function Hover__AspNetMenu(element)
{
    AddClass__CssFriendlyAdapters(element, hoverClass);

    var isIE = (navigator.userAgent.indexOf("MSIE") >= 0);
    if (isIE)
    {
        var child = element.firstChild;
        while (child)
        {
            if (child.tagName == "UL")
            {
                var grandchild = child.firstChild;
                while (grandchild)
                {
                    if (grandchild.tagName == "LI")
                    {
                        if ((typeof(grandchild.iFrameFormElementMask) != "undefined") && (grandchild.iFrameFormElementMask != null))
                        {
                            grandchild.iFrameFormElementMask.style.display = "block";
                            grandchild.iFrameFormElementMask.style.width = grandchild.offsetWidth + (iFramePadding * 2);
                            grandchild.iFrameFormElementMask.style.height = grandchild.offsetHeight + (iFramePadding * 2);
                        }
                    }
                   
                    grandchild = grandchild.nextSibling;
                }
            }

            child = child.nextSibling;
        }
    }
}

function Unhover__AspNetMenu(element)
{
    RemoveClass__CssFriendlyAdapters(element, hoverClass);

    var isIE = (navigator.userAgent.indexOf("MSIE") >= 0);
    if (isIE)
    {
        var child = element.firstChild;
        while (child)
        {
            if (child.tagName == "UL")
            {
                var grandchild = child.firstChild;
                while (grandchild)
                {
                    if (grandchild.tagName == "LI")
                    {
                        if ((typeof(grandchild.iFrameFormElementMask) != "undefined") && (grandchild.iFrameFormElementMask != null))
                        {
                            grandchild.iFrameFormElementMask.style.display = "none";
                        }
                    }

                    grandchild = grandchild.nextSibling;
                }
            }

            child = child.nextSibling;
        }
    }
}

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 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 && ((typeof(items[k].iFrameFormElementMask) == "undefined") || (items[k].iFrameFormElementMask == null)))
                {
                    var iFrameFormElementMask = document.createElement("IFRAME");
                    iFrameFormElementMask.scrolling= "no";
                    iFrameFormElementMask.src = "about:blank";
                    iFrameFormElementMask.frameBorder = 0;
                    iFrameFormElementMask.style.display = "none";
                    iFrameFormElementMask.style.position = "absolute";
                    iFrameFormElementMask.style.top = -1 * iFramePadding;
                    iFrameFormElementMask.style.left = -1 * iFramePadding;
                    iFrameFormElementMask.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
                    iFrameFormElementMask.style.zIndex = -1;
                    items[k].insertBefore(iFrameFormElementMask, items[k].firstChild);
                    items[k].iFrameFormElementMask = iFrameFormElementMask;
                }               
            }
        }
    }
}

window.onload = SetHover__AspNetMenu;