A DOM1/DOM2 DHTML JavaScript Experiment

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

  

Testing - To Reload or To Restart?

One of the most frustrating revelations was that once one runs a faulty script in a browser, it is wise beyond one’s years to exit and restart the browser before testing the fixed script. I don’t know how many hours I wasted trying to run perfectly good scripts without success, merely because I had used the Reload button rather than exiting and restarting. Aggravating this problem even more is that many script problems didn’t report any errors in the JavaScript console, so all I knew was that the script wasn’t working but had no indications of any script errors. Also, this quirky problem wasn’t a simple thing to discover. You see, most corrected scripts ran okay with using the Reload button. The browsers were most susceptible to this unpredictability in the areas of style sheet reference and regular expression coding errors. Also, the problem exhibited itself in both Netscape browsers and Internet Explorer; although, each had their own variance of quirkiness.

So, if you have modified a script and are pulling your hair out because it should be working and isn’t, before going for your .45, try exiting and restarting the browser. It may save your sanity and, at minimum, it should save you ammo and a monitor or two.

Browser Sniffing - Parse or Presence?

There are a number of excellent browser sniffer scripts out there that basically parse the strings returned from the navigator.appName and navigator.appVersion properties and return various boolean variables that provides the developer precise information about which browser the client is using. From these, the script can make decisions as to how to proceed to get whatever function is being performed to work on said client browser. There is also an alternative to this approach that basically uses the existence of properties and objects to determine the client browser’s capabilities. YAMF uses the latter approach since the testing for the existence of properties is less error-prone (in the case of subsequent browser version changes) and is certainly a lot less complex to determine. Also, as an added benefit, the flags really represent object and property capabilities rather than specific browser versions so the script is much more likely to continue to work in later versions of browsers, assuming they don’t go around "deprecating" the newer DOM2 objects and properties in the future.

This is one area where Danny Goodman’s JavaScript Bible Quick Reference Guide really excelled. This guide annotates the entire object and property elements with notes that clearly indicate which elements are applicable to which browser and browser version. Note: as of this writing, it hadn’t incorporated Internet Explorer 6.

Below is the script used to set the relevant browser boolean flags:

// Set global browser boolean flags

var isIE	= document.all;
var isIE7	= isIE && window.XMLHttpRequest &&
         	  window.ActiveXObject;
var isIE6	= isIE && document.implementation;
var isgteIE6	= isIE7 || isIE6;
var isIE5	= isIE && window.print && !isgteIE6;
var isIEDOM2	= isIE5 || isgteIE6;
var isIE4	= isIE && !isIEDOM2 &&
         	  navigator.cookieEnabled;
var isIE3	= isIE && !isIE4 && !isIEDOM2;
var isNS	= navigator.mimeTypes && !isIE;
var isNS3	= isNS && !navigator.language;
var isNS4	= document.layers;
var isNS6	= document.getElementById && !isIE;
var isNS7	= isNS6;
var isNS71	= document.designMode;
var isNSDOM2	= isNS6;
var isDOM2	= isIEDOM2 || isNSDOM2;

Note: the order in which the above statements are written is important due to dependence on previously set flags in determining subsequent flags, e.g., isIE must be set first since it is used in many subsequent statements. YAMF only uses a few of the booleans above but I’ve included them all since I use this script scrap for other scripting designs.

Lastly, no attempt is made to accommodate Netscape or Internet Explorer browsers earlier than version 3 since its probably safe to assume that those are no longer in use. Also, the testing environment for this script was Windows 98SE and only Netscape 3/4/6 and Internet Explorer 5/6 browsers. Caveat: Opera 6.05 was tested but failed to even display the images.

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=rotate
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=rotate
Direction=left
Angle=0.0
Scale=1.0
YGapAdj=0
IPrefix=yamf
Reverse=false
YAMF OFF!

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

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