Hiermenus Go Forth, XXVII - DHTML Lab | 3 | WebReference

Hiermenus Go Forth, XXVII - DHTML Lab | 3


Hiermenus Go Forth, XXVII:
Version 4.2.1 - The Complete Script (Full-Window)

IE4 for Windows Scrolling

The major problem with implementing any DHTML that is heavy on sizing and positioning routines in IE4 has always been timing.

IE4 is notorious for taking-its-time to update element property values. We have encountered this behavior countless times in the routines we have published, most recently in the fixes introduced in Version 4.0.5, where we discussed the problem in detail.

The implementation of scrolling is simple enough. The scrollbars are added following the same logic of the other browsers. Complications arise, however, when scrollable elements are visible during browser resize, and the user has selected "Show window contents while dragging" in the Windows Display Properties / Effects setup. Repositioning of scrollbars and resizing of menus is then difficult on slower systems since IE4 is not returning size and position values that we need quickly enough.

This is overcome through the use of timeouts during browser window resize. The menus are updated only when the user has finished resizing the window and not continuously during the resize, and then only after a minimum timeout period during which IE4 updates element property values.

IE5 for Macintosh Scrolling

As you may recall, scrollbars are created on-demand, when a long menu is about to be made visible and will not fully fit in the browser window. With IE5Mac, we witnessed parent-child hierarchy problems as well as z-index mistakes when following this philosophy. Somewhere, IE5Mac was being confused.

Scrollbars would be created; the HTML code generated would be valid; all property values would be correct; yet the scrollbars would not be visible. Creating the scrollbars earlier, however (and generating the exact same HTML code, by the way) allowed them to be seen by the user. We decided this was the solution, until such time that the reasons behind the scrollbars-hidden-when-created-later were clearer. Unfortunately, this means that scrollbars are created for all menus that could possibly need them, whether they end up using them or not. Excluded from scrollbar creation are horizontal menus, permanent menus and "position_under" children of permanent horizontal menus.

Even with this success, we had two more problems to address:

Firstly, IE5Mac has similar timing problems which are compounded by display-update timing quirks. Even if all necessary values are received in time, forcing a menu to display without a short timeout may, on slower systems, cause parts of the menu to not appear initially, even though they are there. You can navigate the invisible items and you can click them, but you may not see them. The screen display is not being updated fast enough. Once a menu has been displayed and hidden, however, subsequent displays are not truncated. This is caused by all the calculating HM does just before the display of a scrollable menu. Scrollbars are positioned and the menu is resized and positioned accordingly and displayed immediately. Seems it's too much for some Mac displays. In Version 4.2.1, we wait before displaying menus, giving IE time to catch up, so to speak. This delay is not discernable to the user, of course.

Secondly, even though scrollbars are clearly visible, placed over item elements, partially obscuring them, the text part of the item would "bleed" through the scrollbars. The text would not be visible, but mousing over the scrollbar where text would be if-no-scrollbar-was-there would cause a "hand" cursor to appear if the text was a link and clicking on the scrollbar at this position would cause the browser to follow the link attached to the item behind it. IE5Mac was again confused, this time with element stacking. We worked around the problem by giving every scrollbar element a very high z-index, forcing the scrollbar to prevail and hide the item behavior as well as its display.

On the next page, a look at the other changes.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: February 19, 2002
Revised: February 19, 2002

URL: http://www.webreference.com/dhtml/column63/2.html