WCH

WCH 2.5 - IE 5.0 support

Mar 18, 2004 by Aleksandar Vacić 3 minute read

From this moment on, I will maintain two version of the WCH2 script. One will support IE 5.5+ (version 2.0x) and other will support IE 5.0+ (version 2.5x). In IE 5.0 we need to hide the windowed controls when absolute layers popup, and show them again then layers are removed.

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?</span>
bIsIE55 = (bBrowserOk && typeof(document.body.contentEditable) != "undefined");

//	for IE5.0, use special hiding based on class name</span>
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.