A DOM1/DOM2 DHTML JavaScript Experiment

YAMF
onMouseOver Event
Type=banner
Justify=center
View=visible
Rate=50
XGapAdj=0
IPath=images/
IExt=gif
angAware=true
Effect=dither
Direction=left
Angle=0.0
Scale=1.0
YGapAdj=0
IPrefix=yamf
Reverse=false
YAMF OFF!

  

Netscape 6 Made Me Do It!

So, here I was content in the knowledge that my web pages were compatible with the two major Document Object Model (DOM) enabled browsers (Communicator 4 and Internet Explorer 4/5/6) since I had tested them extensively. However, off in the distance lay this new kid on the block called Netscape 6. I had downloaded some very early Alpha Test versions (then called Sea Monkey) but found those versions too unstable to be used for even routine browsing.

Recently I decided to give the latest version of Netscape another try (then, version 6.1) and found it much more stable, although still too sluggish for consideration as a default browser. I especially enjoyed their innovative Chrome Protocol that allows designers to develop their own browser skins (Mozilla.org refers to them as Themes.) As a matter of fact, it was this feature that made me decide to get a little more serious about testing my web pages on it. I always work under the philosophy that if I find something cool, others will, too.

After installing and configuring the browser (which went surprisingly smoothly), I was soon testing my web pages on it. All went well until I attempted to display the pages that used my modified Mouse Magic script. It was then I discovered that not only had Mozilla.org deprecated (Standards-speak for "no longer worky") the Netscape 4 document.layer style sheet reference, they also didn’t support Internet Explorer’s document.all style sheet reference. After much digging and even more deducing, I finally discovered that Netscape 6 now supports the getElementById style sheet reference method, as does Internet Explorer 5/6 as it turns out. After making the appropriate changes, the script then worked in Netscape 6. But, I’m getting a little ahead of myself.

It was then that I decided to expand this script even more than its rather limited single-purpose usage of moving overlapping images in a dithered fashion in following mouse movements, to something a bit more robust, a lot more configurable and a lot more browser-demanding. You see, I had always been fascinated with the programming mechanics behind this script and saw this as an opportunity to expands its features and do so by intentionally exploiting some of the JavaScript features I’ve neglected in the past, Regular Expressions as an example. My goal going into this project had then become one of pushing the edge on cross-browser DHTML usage to gain a better understanding of its capabilities while also becoming familiar with Netscape 6 DOM2 object model.

While I did finally reach my objective, I’ll admit that there were moments when I had almost given up on my quest because of inexplicable complications in getting the script to work when everything seemed to be correct. The following sections will attempt to illuminate (author-speak for "explain") these problems along with providing the reader with useful workarounds to them.

PreviousNext


YAMF - "Yet Another Mouse Follower"

All Is Not What It Seems

Netscape 6 Made Me Do It!

Testing - To Reload or To Restart?

Browser Sniffing - Parse or Presence?

Avoiding JavaScript Errors on Earlier Browsers

Stopping Annoying Auto-Scroll in DOM2 Browsers

Netscape 6 is Pixel Picky

Inline Style Constraint on Internet Explorer 5

Must Use <LAYER> tag in Netscape 4 to perform DHTML

!DOCTYPE Compliance Mode

Take Care Not to Render in <HEAD> Section

Automatic Expansion of Relative URLs

The Elusive Netscape 4 Layer Elements

Temperamental onLoad After Reload

document.images[id].complete Property Dependency

Search Method Does Not Return Boolean Value

Regular Expression Global Flag Fails With Subsequent Usage

Conclusion

Resources

Downloads

Roll Your Own
  
YAMF
onMouseOver Event
Type=banner
Justify=right
View=visible
Rate=50
XGapAdj=0
IPath=images/
IExt=gif
angAware=true
Effect=blink
Direction=left
Angle=0.0
Scale=1.0
YGapAdj=0
IPrefix=yamf
Reverse=false
YAMF OFF!

YAMF
onMouseOver Event
Type=banner
Justify=left
View=visible
Rate=50
XGapAdj=0
IPath=images/
IExt=gif
angAware=true
Effect=blink
Direction=left
Angle=0.0
Scale=1.0
YGapAdj=0
IPrefix=yamf
Reverse=false
YAMF OFF!

YAMF
onMouseOver Event
Type=banner
Justify=center
View=visible
Rate=50
XGapAdj=0
IPath=images/
IExt=gif
angAware=true
Effect=blink
Direction=left
Angle=0.0
Scale=1.0
YGapAdj=0
IPrefix=yamf
Reverse=false
YAMF OFF!

Copyright © 2002-2003, ProjectIt, All Rights Reserved Last Revised: