Features

Have you ever experienced the following problem in IE6 (ilustrated in the left image), while working with absolute positioning?

I'm certain you have tried resolving it with z-index and have realized it doesn't work. In utter despair, you might have used arbitrary display:none or visibility:hidden on the select element. None of that is real solution though, especially if you have a layer that pops in and out, depending on one's action. This is just hiding the consequence, because the source of the problem is beyond the web developer. Problem lies much deeper than CSS, in the inner workings of the Internet Explorer 6 (and previous versions).

Compatibility

WCH is one Javascript file, which you need to load up in your page and start using. It is tailor-made for Windows version of IE5, IE5.5 and IE6. Notice the absence IE7+, because there, select elements behave as they should.

Due to its nature, WCH can also be used to allow placement of absolute layers over all windowed controls, not just select elements. This includes anything put to web page using either object, iframe or embed. Which means Adobe Flash files, all sorts of movies, various iframes out of your control etc. Take a look at the examples to see how that works. If you have problems, head to troubleshooting section.

Firefox, Opera, Mac browsers..?

The technique used here will not work in any of them - their internal working prevents it.

They also do not really need this. They are perfectly capable of correctly displaying layers over select elements. Sadly, not over all object elements, as it depends on the way plugin is built for the particular media. Even if there is a solution for that, WCH is not the one.

Instructions

Setup instructions

I've tried to make this as simple as possible.

1. Download the Javascript file: WCH.js

2. Place this line in the HEAD part of the document, and replace PATH_TO_WCH_FILE with appropriate file path:

   <!--[if lte IE 6]>
   <script type="text/javascript" src="PATH_TO_WCH_FILE/WCH.js"></script>
   <![endif]-->

3. Add this class to every windowed control on the page: WCHhider. For example:

   <select class="WCHhider">...</select>
   <div class="some_other_class WCHhider"><object ...></object></div>
   

   This is required only if you want to support IE5.0x - if not then this step is irrelevant. All IE5.x browser are rarely used, especially IE5.0x generation which I consider extinct and not worth developer's time.

Usage instructions

Because of the way script works (see below), methods should only be called from your own code, when needed. For instance, in my ADxMenu script I call WCH.Apply each time submenu should be shown. When submenu is to be hidden, I call WCH.Discard. Check the examples, for sample use cases.

WCH.Apply( layer[, positioned_parent_of_the_layer[, resize_iframe_again?]] );
WCH.Discard( layer[, positioned_parent_of_the_layer] );

Parameter	Example (values)	Description
layer	"menu" document.getElementById("menu")	id of the absolute layer or its reference
positioned_parent_of_the_layer [optional]	"container" document.getElementById("container")	id or reference of the first element, which is parent element for the layer, that has either position:relative or position:absolute or position:fixed. If such element does not exists or it is not supplied, body (document) is used.
resize_iframe_again? [optional]	true false	WCH will cache each created hider-iframe, thus if you repeatedly call WCH.Apply for the same layer and that layer changes its size and/or position over time.

First parameter is the layer that is shown/drawn (its id or reference). Second is its positioned parent (its id or reference) so we can correctly position the created iframe. Second parameter is optional - if it's not supplied, body is used (see the 3rd example why is this parameter important).
WCH will cache each created iframe, to save time and resources. Third parameter (again optional) can be useful if you repeatedly call WCH.Apply for the same layer and that layer changes its size and/or position over time.

How it works

It is not changing anything in the way windowed elements are drawn, meaning - it is not fixing the source of the problem. What WCH does is working around the problem. Thus, when Apply method is called, script will:

1. IE5.5+: find the z-index value of your layer, and then dynamically create iframe element, sized exactly as the layer and add it to the document just below the layer. That means that your layer must have z-index:2 or more.
2. IE5: dynamically add the style rule .WCHhider { visibility: hidden !important;}, which will result in hiding all those elements.

When Discard method is called:

1. IE5.5+: hides the created iframe element
2. IE5: removes the style rule from above

Examples

Look into the source code, to see how it is all done.

1. Layer which is displayed on page load.
2. Layer which shows up on mouse over and hides on mouse out.
3. Shows the importance of correctly passing positioned parent reference.
4. In full glory, several examples on one page

Troubleshooting

If you have any problems - WCH is not working as you expect - there are two things you can do:

1. Consult the examples, as they illustrate all possible uses. Look into the source code to see how I implemented it
2. Use the debug version: WCH.debug.js

Debug version

This version is identical to the original one, with added debug window that shows everything WCH does while it works. Simply replace WCH.js in your page with WCH.debug.js and...well, debug.

When WCH.Apply is first called, a rather small window would open in the top right corner of the page and display relevant information throughout the WCH usage. It will show how it is called and most importantly - it will visibly display where the hider-iframe is created: look for the word false which may have square bracket around it. So you will see if anything is off and correct it.

Once you have everything in order, simply revert back to original version.

Usage terms (AKA is this free or not)

Public domain, use as you wish, where you wish to.