The Blog

I have to stop giving definitive sentences. I just decided recently that I’m gonna develop two version of WCH2, and than Tim Connor spoils it all and hands the idea of short and sweet way of covering IE5.01, without too much code. Oh well. :)

So, now I have 3^rd generation of WCH, which covers IE5.0 and later. Also, I took the opportunity to rewrite the script the same way as ADxMenu. WCH is now an object, and you simply call its methods.

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.