WCH 2.5 — IE 5.0 support

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?
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.

Tags or categories or topics...

Lots of ramblings on this blog...might be easier for you to find your juice through these tags:

Voices from the crowd, 9 so far

Awesome, thanks for putting that in, Alek. I almost hate to do this, after you put in the effort, but I wonder what you think of this alternative. Obviously it is just the base code for IE5.0, since you already have your sniffing code. No array of reference or dom crawl and it’s pretty clean code, I think. I’m going to play around with it a bit more, and see if I can come up with something even cleaner

by Tim Connor
1937 years, 1 month after the post

I think this might be as simple clean as I can imagine. Obviously go with whichever method you think best, but this one only requires one line of code to hide or show, and allows the user to implement whatever .css they want for the hiding/showing (selector=className, tagName | style = visibility, display, etc), because it just enables and disables a (alternate, so it doesn’t show up in non IE browsers) stylesheet.

If it doesn’t find the stylesheet, nothing happens, so you can just ignore it, and let people choose to have the stylesheet, without you needing to do anything special to maintain two separate bodies of code.

Oh, and this one will work in other browsers, if they add a title attribute to the stylesheet, which is nice for those of us who are going to have to hack on another test-case for N6/Flash6– (and it since it just uses a stylesheet we can do whatever sort of hiding object and replacing them with images we needed to).

http://www.infosauce.org/standards/IE5hiding2.html

Tim

Have you ever thought of cleaning it up into a class/object, thus being able to avoid running the browser tests each time and simplifying potential additions to* or customizations of** the code (this, with my last suggested IE5 method, also cuts almost another 1.5k off)? For example, the following (this isn’t tested, it is just an example, but if you’re interested, I can clean it up a bit more and test it):

http://www.infosauce.org/standards/WCH_tim.js

Tim

*such as having a showAll method, that hides all hiders, which could now be tracked by pushing them into an array, which could be a property of the class

**now the path to the hiding .css could be set in the calling page, by setting that property.

Then again, since there would only be one instance at a time, maybe a more library type coding style, with Class methods, would be more appropriate:

http://www.infosauce.org/standards/WCH_tim2.js

Tim, many thanks for the time and effort. I checked your examples and they pushed me in the right direction. You are using additional style sheet file which is enabled and disabled as needed.
This is good, as the script is smaller. However, giving away one HTTP request on file with one class is rather an overkill.

I took your idea and extended it to dynamically add the .WCHhider rule to existing style sheets. I’m preparing the write-up…

by aleck
1937 years, 1 month after the post

Hello,

For our website we have a similar problem and the examples pushed me in the right direction but the problem still isn’t solved completely.

Our website uses a moving DIV menu so that this menu is always at the top of the page and the content can be scrolled underneath this menu. Directly under this menu we have a moving TITLE DIV (in the body of the html page). This DIV is used because the text in it changes with every page of the website. The content of our website contains dropdownlists and these windowed controls will appear through the moving DIV’s normally, but as i’ve learned here a moving IFRAME, directly underneath the TITLE (and menu ) DIV can be used to hide these windowed controls.

This all seemed to work well and it does when the scrollbar is scrolled with the left mouse button. IT DOESN’T WORK HOWEVER WHEN THE SCROLLBAR IS SCROLLED WITH THE MOUSE WHEEL!!! The window controls are NOT shown underneath the TITLE (and menu) DIV’s but when they are scrolled from the top to the bottom and back again underneath the TITLE div, the window control ( dropdown list) isn’t refreshed properly. The dropdown list sometimes isn’t shown at all and at other times it contains colors from the menu and/or TITLE DIV. How is this possible?

I tested it many times and the recalc(true) function is called thrice when the mouse wheel is scrolled minimally. The IFRAME is refreshed thrice underneath the TITLE DIV, but anyhow i get these strange results.

Can someone help me please?

Greetings,
Erik

by Erik
1 year, 11 months after the post

The WCHider script was very helpful to me but anyhow i still have a problem showing a moving menu at the top of the page. The window controls are hidden very well by the moving menu but the problem is that when they are scrolled back to the bottom of the page, they’re not shown correctly. This problem only occurs when using the mouse wheel, not when i scroll with the left mouse button.

I’ve added a html example here (sorry for the ‘awfull’ code):

Do not show!

Actief
Toekomstig
Historie
Alles

floatingControlTop(document.getElementById(“title”),59);

function floatingControlTop(div, iOffset){
if (document.recalc && document.body.attachEvent){

div.style.setExpression(“top”, “document.body.scrollTop + ” + iOffset);
document.body.onscroll=function()
{
document.recalc(true);
DivSetVisible();
//WCH.Apply(‘title’,”, true);
document.recalc(true);
};
}
}
function DivSetVisible()
{
var DivRef = document.getElementById(‘title’);
var IfrRef = document.getElementById(‘DivShim’);

var selectRef = document.getElementById(‘selectbox’);

DivRef.style.display = “block”;
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;

IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex — 1;
IfrRef.style.display = “block”;
}

Can someone help me please? I would really appreciate your help! Thanks!

Greetz,
Erik

The html example isn’t shown correctly, so here i sent it once more (i replaced the start and end tags):

%%!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”%%
%%html%%
%%head%%%%head%%
%%body%%
%%div id=“title” style=“position:absolute; top:25px; height:30px; width:100%;padding-left:15px; background-color:#E4E4E4; z-index:100″%%
Do not show!
%%div%%
%%iframe id=“DivShim“
scrolling=“no“
frameborder=“0”
style=“position:absolute; top:0px; left:0px; display:none;”%%
%%iframe%%

%%div id=“region-contentBrowse”%%
%%table id=“filterTable” border=“0”%%
%%tr%%%%td%% %%td%%%%tr%%
%%tr%%%%td%% %%td%%%%tr%%
%%tr%%%%td%% %%td%%%%tr%%
%%tr%%%%td%% %%td%%%%tr%%
%%tr%%
%%td%%
%%div id=“selectbox”%%
%%select name=“SEL_IND” size=“1”%%
%%option value=“AC”%%Actief%%option%%
%%option value=“FU”%%Toekomstig%%option%%
%%option value=“HI”%%Historie%%option%%
%%option value=“AL”%%Alles%%option%%
%%select%%
%%td%%
%%div%%
%%tr%%
%%table%%
%%div%%
%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%
%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%
%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%%%br/%%
%%script type=“text/javascript”%%

floatingControlTop(document.getElementById(“title”),59);

function floatingControlTop(div, iOffset){
if (document.recalc && document.body.attachEvent){

div.style.setExpression(“top”, “document.body.scrollTop + ” + iOffset);
document.body.onscroll=function()
{
document.recalc(true);
DivSetVisible();
//WCH.Apply(‘title’,”, true);
document.recalc(true);
};
}
}
function DivSetVisible()
{
var DivRef = document.getElementById(‘title’);
var IfrRef = document.getElementById(‘DivShim’);

var selectRef = document.getElementById(‘selectbox’);

DivRef.style.display = “block”;
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;

IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex — 1;
IfrRef.style.display = “block”;
}

%%script%%
%%body%%
%%html%%

I have applied WCH to show a popup-div. However when the popup-div covers a selextbox element in a underlying-div with overflow:auto or overflow:scroll a problem occurs.
Initialy the popup-div covers the selectbox perfectly.
However when I scroll the underlying-div or use my mouse wheel the selectbox is displayed over the popup-div again.

Does anyone have a answer to this problem?
Is it possible to catch scrolling events and how?

Thanx

by Rudi van Es
2 years after the post

WCH 2.5 — IE 5.0 support

Basic idea

How it works

Hiding and showing

Voices from the crowd, 9 so far

Post your opinion

Related posts (possibly)

Can you place layers over flash files or drop downs?

Small bug fix

SSL fix for IE">SSL fix for IE

WCH3. Works in IE5.0+">WCH3. Works in IE5.0+

2 — pure CSS multilevel menus">ADxMenu2 — pure CSS multilevel menus

Javascript’s hidden gems

Tags or categories or topics...