Previously, when you first call WCH.Apply("layer", "cont"), it would create an iFrame with an id of WCHhiderlayer. It will also position the iFrame to be the exact size and at exact position (exact…more or less) as the layer is (minding the positioned container). All fine until now.

However, if the layer changes its position or size, its corresponding WCH layer will not. I noticed this bug when testing out ADxMenu behavior when window is resized.

Apply method now has 3^rd parameter, bResize. If its value is true, and the iFrame needed already exists, sizing and positioning will be repeated.

this.Apply = function(vLayer, vContainer, bResize) {
  ...
  if ( _bIE55 &&
    (oIframe = _Hider(vLayer, vContainer, bResize)) ) {
  ...
};
...
function _Hider(vLayer, vContainer, bResize) {
  ...
  if ( !oIframe ) {
    ...
  } else if (bResize) {
    _SetPos(oIframe, oLayer);
  }
  ...
};

Now you just need to decide when should this parameter be true.

Take a look at this extensive example, where WCH successfully works with:

• drop-downs
• Flash movies
• Quicktime video

As a side note…did you notice the W3C Schools are recommending non-standard way of including Flash or other media objects? Shameful. :(

How to use it

You need to include the WCH.js in your page, and then simply call the methods. I have renamed the functions to be less confusing.

WCH.Apply(Layer, Container);
WCH.Discard(Layer, Container);

So, when you are showing your layer, just call Apply method. When you are removing your layer, simply call Discard method.

News is that both parameters can either be an id or a reference. WCH will internally fetch the reference if id is passed.

How it works

Here is the part for those who want to further expand it, if they need to.

WCH object is created during page load, and a set of properties and methods is defined.

var WCH = new function() {
	//	internal properties
	this._bIE50 = (document.all &&
			document.getElementById &&
			!window.opera &&
			navigator.userAgent.toLowerCase().indexOf("mac") == -1);
	this._bIE55 = false;
	this._bIE6 = false;
	this._oRule = null;
	this._bSetup = true;
	//	public methods
	this.Apply = function(vLayer, vContainer) {
		if (!this._bIE50) return;
	};
	this.Discard = function(vLayer, vContainer) {
		if (!this._bIE50) return;
	};
	//	internal methods
	this._Hider = function(vLayer, vContainer)
	this._GetObj = function(vObj)
}

Internal objects are denoted with leading underscore. The entry guardian, _bIE50 is set during page load. The long condition is there is to ensure that only IE5+ Windows will execute the code. Any browser that understand Javascript will pass-through all the code, but you see that all but IE5/Win is sent back. This way, you don’t need to do if (WCH) WCH.Apply(...) but simply call the method with WCH.Apply(...). I prefer clean code. :)

The other detections (IE55 and IE6) are done on the first call to Apply. This must be done after the page load, and this way I don’t have to use window.attachEvent.

if (this._bSetup) {
	this._bIE55 = this._bIE50 && typeof(document.body.contentEditable) != "undefined";
	this._bIE6 = this._bIE55 && typeof(document.compatMode) != "undefined";
	if (document.styleSheets.length == 0)
		document.createStyleSheet();
	this._bSetup = false;
}

Basic functionality, for IE5.5+ is the same as before, the only difference being that sizing and positioning of iframe is done in the _Hider “constructor”, where it logically belongs.

The fun part is with IE5.0.

Hide and show with dynamic style rules

As with WCH 2.5, the only thing that page coder must do is to attach WCHhider class to any element that must be hidden when layer pops up. Make sure that, in your own style sheets there is no such class.

When Apply is called for the first time, script will add simple rule that hides the element, and save the pointer to the rule as WCH internal property.

if (this._oRule)
	this._oRule.style.visibility = "hidden";
else {
	var oSheet = document.styleSheets[0];
	oSheet.addRule(".WCHhider", "visibility:hidden");
	this._oRule = oSheet.rules(oSheet.rules.length-1);
}

Rule is added to the first style sheet loaded¹. If there are no style sheets, one is created during setup (see code above).

On any subsequent call, simply change the rule to either visibility:hidden (for Apply) or visibility:visible (for Discard). That is all. Simple and sweet.

1 : This could be problematic if you use style switcher, when you must add the rule to every style sheet.

Basic idea

My goal was to make the life of web page builder as simple as possible. Therefore, the only thing you need to do is to add the class name WHChider (case-sensitive) to the elements that needs to be hidden when layer pops up.

<select ... class="WCHhider">
<select ... class="sample WCHhider">

As you can see, even if you already have a class, just add this one too. IE 5.0 supports multiple class names.

Check-out this example, which shows what WCH2 does.

How it works

I will just note the differences and added code from version 2.02.

First change is in the WCH_Hider function, where IE5.0 code is added.

//	is this IE 5.5 or higher?
bIsIE55 = (bBrowserOk && typeof(document.body.contentEditable) != "undefined");

//	for IE5.0, use special hiding based on class name
if ( !bIsIE55 ) {
	var aToHide = document.WCHhider;
	if (typeof(aToHide) == "undefined") {
		aToHide = xGetElementsByClassName( "WCHhider" );
		document.WCHhider = aToHide;
	}
	return aToHide;
}

The goal is to fetch the pointers to all elements that have our class name. The latest version of X library (at this moment that is 3.15.1) has the function that does just that, xGetElementsByClassName(). If you call it with class name only, it will return an array of all elements inside of document that have that class name.

To avoid the slow DOM tree-walk, we save that array in the document, for later use.

Instead of all elements, you can work with just drop-downs, when you need to use full calling form. Second parameter is the parent element (function will return an array of child nodes of that element) and the third parameter is the node name (function will return the child nodes with that node name).

aToHide = xGetElementsByClassName( "WCHhider", document, "select" );

That array is then returned to the calling function.

Hiding and showing

Since type of returned result is object in both cases (when array is returned and when iFrame reference is returned), we will distinguish between using length property. If length is undefined, the result is iFrame, and we proceed with code we know from version 2.0x. If length is defined, then we have an array, and all that needs to be done is to hide the elements of the array:

for (var i=0;i<oIframe.length;i++)
	oIframe[i].style.visibility = "hidden";

In the opposite function, we do the same, only this we set the visibility property to visible.

That is all.

Version 2.5 includes two function from X library – if you use that library in full, simply delete them from WCH script to save download bytes.

Script now has only three functions. WCH_Hider() does all the browser checks and creates the hiding iFrame. WCH_HideWndCtrl() is placing the hider below the layer that needs to go over windowed controls. WCH_ShowWndCtrl is removing the hider.

For those of you wondering what this is all about…read this entry that will explain the problem at hand. Now, on to version 2. I will still explain every part of the script, as I think that this version should be used in the future – it’s much smaller, faster, independent…simply better.

How to use it

This script is useful if you have dynamic layers that pop-out after page load, like menu scripts, fancy widgets and similar stuff. To prevent drop-downs to show through your layer, just call the function that will hide the portion of drop-down where layer is located.

if ( typeof(WCH_HideWndCtrl) != "undefined" )
	WCH_HideWndCtrl(this.submenu, this);

This type of calling allows you to freely work, regardless if WCH is actually loaded or not. When your layer is hidden, just call the opposite function in the same way:

if ( typeof(WCH_ShowWndCtrl) != "undefined" )
	WCH_ShowWndCtrl(this.submenu, this);

Creating Hider

WCH_Hider still takes the same two parameters: layer under which hider should be placed and the container for both of them. If the first parameter is not passed (i.e. nothing is passed), it simply exits. Then we check for browser compliance. Only IE5+/Win will pass this check:

var bBrowserOk = (document.all && document.getElementById);
if ( !bBrowserOk ) return null;

And only IE5.5+ will pass this check:

bBrowserOk = (bBrowserOk &&
typeof(document.body.contentEditable) != "undefined");
if ( !bBrowserOk ) return null;

Object detection at its best (for the first time in my dev life, MSDN was very useful). No user-agent spoofing can trick this.

After this line, I try to access the hiding iFrame element. If it’s there, jolly good, work done. If not, create it. First, we need a container, where hider iFrame will be inserted. That pointer is passed in the function call. If it’s not, assume it’s body.

if ( typeof(vContainer) == "undefined" )
	oContainer = document.getElementsByTagName("BODY")[0];
else if ( typeof(vContainer) == "string" )
	oContainer = document.getElementById(vContainer);
else
	oContainer = vContainer;

There is one nice IE/Win’s proprietary style rule that allows the execution of various visual filters. Here, Alpha filter is very useful, as it is rendering the frame invisible (this is not the same as CSS’ visibility). Unfortunately, my test showed that applying the filter in IE5.5, even with SP2 installed, crashes the browser. Hence another object detection (compatMode property exists only in IE6+):

var sFilter = (typeof(document.compatMode) != "undefined")
? "filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);" : "";

Next, we need to get the value of z-index for our layer (remember, we need to place the hider one z-index step below the layer). First try with DOM, then with runtime style (value from stylesheet files). If we can’t get the value, or it’s less than two, do nothing since there is no room for the hider.

var zIndex = oLayer.style.zIndex;
if ( zIndex == "" )
	zIndex = oLayer.currentStyle.zIndex;
zIndex = parseInt(zIndex);

if ( isNaN(zIndex) ) return null;
if (zIndex < 2) return null;

March 17: I have changed the highlighted line above from if ( zIndex == "" && document.compatMode == "CSS1Compat" ) to shown one. Second condition effectively excluded IE5.5 (as zIndex was always 0 then and it got out on the last line), causing the script not to have effect in it.

Finally, create the hider element and get its pointer (line breaks added for clarity).

zIndex--;
oContainer.insertAdjacentHTML("afterBegin",
	'<iframe src="about:blank" id="hider' + oLayer.id + '"' +
	' scroll="no" frameborder="0"' +
	' style="position:absolute;visibility:hidden;' +
	sFilter +
	'border:0;top:0;left;0;width:0;height:0;' +
	'background-color:#ccc;z-index:' + zIndex + ';">' +
	'</iframe>'
);
oIframe = document.getElementById("hider" + oLayer.id);

Initially, hider is hidden. It first need to be given proper size and position.

Hide / show

Both hiding and revealing functions call the previous one. Work is done is valid object pointer is returned. In the function that hides everything below the layer, WCH_HideWndCtrl, we first get the layer size and apply it to the hider and then do the same for position, before we change its visibility.

oIframe.style.width = oLayer.offsetWidth + "px";
oIframe.style.height = oLayer.offsetHeight + "px";

oIframe.style.left = oLayer.offsetLeft + "px";
oIframe.style.top = oLayer.offsetTop + "px";

oIframe.style.visibility = "visible";

In the opposite function, we simply hide the hider, thus revealing everything below it.

Wait? Something missing…

Yup, there is no IE 5.0 support. This fancy iFrame hiding is not possible there. In the 1st gen of this script, I collected the pointers to windowed controls and then hide them with visibility:hidden. I didn’t like that too much, as it added 50% more code for 10% more users.

Should this be added? I’m still thinkin’ about it…

This page contains both secure and non secure items.

Do you want to display the non secure items?

There was nothing wrong with the menu, but with WCH script. If you remember, it creates iFrame element on the fly and places it below the menu.

Well, if you don’t have the src specified for the iFrame, IE treats it as unsecure item, hence the dialog. Solution is simple, as usual (once you find out what is the problem):

oHiderContainer.insertAdjacentHTML("afterBegin",
   '<iframe src="/inc/e.html" id=...></iframe>');

Rest of the line stays the same. This e.html is a simple empty file already present in the project. Use anything you want.

Now, after extensive testing in several Windows and Mac browsers, I have much better picture how all this works.

If you look at the example page, you’ll find two sets of tests. First, I wanted to see how browsers handle object (or embed) element which loads Flash file without wmode="transparent" parameter (read more about this in Macromedia tech note). I applied WCH script to second layer only.

In the lower set, I added wmode parameter, and applied WCH again.

Windows browsers

• IE 6: needs WCH to cover drop-downs and Flash. Transparent Flash is always covered, regardless of WCH.
• IE 5.5: needs WCH to cover drop-downs and Flash. Transparent Flash is always covered, regardless of WCH.
• IE 5.0: WCH uses show/hide workaround. Transparent Flash is always covered, regardless of WCH.
• Firebird 0.7: always cover drop-down, only transparent Flash. Transparent Flash is always covered, regardless of WCH.
• Opera 7.22: always cover drop-down, never covers Flash (WCH is properly applied but it has no effect – actually it hides the layer itself?!)

It’s an obvious conslusion that WCH can be used only with IE 5.0+ to have any real effect. Since IE/Win rules the end-user market, this script comes very handy.

Mac

• OmniWeb 4.5: always covers drop-down, never covers Flash
• IE 5.2 Mac: always covers drop-down, only transparent Flash
• Opera 6.03 Mac: never covers either drop-down or Flash
• Camino 0.7: always cover drop-down, only transparent Flash
• Firebird 0.7: always cover drop-down, only transparent Flash
• Safari 1.1: always covers drop-down, only transparent Flash (initially all covered, until flash animation starts which then removes the layer)

Conclusion: newer Mac browsers always cover drop-downs (all but Opera 6.03). Flash can be covered if wmode=transparent is used. WCH has no effect in any Mac browser.

Recommendation

WCH script has changed according to findings above. Since it’s usable only in IE/Win, I added the check for this, since its use cause problems in some browsers (Opera, Opera…).

Script uses insertAdjacentHTML, an IE native function, to insert the hiding iFrame. Since script does not deal with any other browser, I have removed almost 3kB of code needed to emulate that method in other browsers. If you need that code (as it is very handy), download it by right-clicking here.

I recommend you always use wmode="transparent" when loading Flash files, and use WCH on for IE/win.

What’s it for?

Take a look at this example. Maroon layer is absolutely positioned and it goes over select box.

Did I said over?
In the old days, when there was nothing dynamic about HTML, browser makers used OS controls to draw HTML form elements. That means that they were at the “lower-level” compared to HTML browser engine and was thus untouchable for web authors. This was most obvious in revolutionary IE4. Microsoft changed this in IE5 (all form elements but drop-downs), further enhanced it in 5.5 (iframes were also moved to HTML engine); other newer browsers followed similar path.

If you are using Gecko-based or Opera 7 browser, then you don’t see a need for this script (as everything is displayed correctly for you). Same goes for Safari, as I hear. But you are a very small minority. Regular Windows users (those that we make websites for), use IE. And IE still uses OS control for one form element: select list (aka drop-down box).
So in IE, drop-down punch through the layer.

This script uses one fine trick to overcome this problem. (Danger ahead: in the following text, I will identify term browser with IE).

The old way…

This was usually the problem with layers that appeared when hovering some spot (since you can’t really control what is below the area where layer appears).
It became a nuisance and only available technique was to hide form elements when layer is shown. But if you have large number of form elements, then that takes a long time, sometimes up to 10s, which frustates the user (since it totally blocks IE).

Since IE 5, problem was greatly minimized – I have yet to see a web page which have this amount of drop-down boxes (that will be a usability nightmare by itself). So, all web developer needed to do is something like this:

var aDD = new Array();
...
aDD[aDD.length] = "document.forms['form name'] _
   .elements['drop-down name']";

(” _” was used to denote display break. In real code, connect these two lines.)

This will collect pointers to all select elements on the page. When layer is shown, do eval() for all this with style.visibility = "hidden".

This is how WCH is still doing, when it detects IE5 (functions WCH_HideWndCtrl4Oldies() and WCH_ShowWndCtrl4Oldies() in the script). In the WCH_Initialize() function, change this line to point to your array (aDD from above).

if ( !WCH_bSupportHider && xDef(SG_aDDs) ) {
	WCH_aDropDown = SG_aDDs;
}

The new way

In IE5.5, Microsoft has changed its code so that iFrame was drawn from HTML engine. And since it was a frame, it was drawn over any windowed control on the page. Unknown programer came up with idea to use this feature to resolve the problem at-hand, and contacted Joe King who wrote this explanation.

So, we need to dynamically insert the iFrame just below the layer in the z-index order and problem solved. IE’s insertAdjacentHTML function is used for that, emulated for other browsers using Thor Larholm’s code.

For this script to work, WCH_Initialize should be executed on window.onload. Then add this call to your show-layer function:

WCH_HideWndCtrl(oLayer, oNewHiderContainer);

and this code for hide-layer function:

WCH_ShowWndCtrl(oLayer, oNewHiderContainer);

oLayer is the layer object you are displaying. By default, iFrame is inserted as a child of the body element. This is fine, if you don’t use position:relative on the page when “phone-book” feature kicks-in. This means that if you have a layer with z-index of 100 inside of relatively positioned box, hider iFrame with z-index of 99 (WCH script will give him this, but it will be the same if it has value of 1) will be above the layer.
So, in such case, pass the object representing the position container as the second parameter.

And that is all. Have fun and report back any problems you encounter.