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

  

Take Care Not to Render in <HEAD> Section

While the next problem is really an obvious coding error and not a browser problem, sometimes it may not be obvious when that one has done this. YAMF uses the document.write() method to create the DHTML image containers. Basically, there is a function that generates these containers (layers) using the Space character (white space) with the style sheet visibility property initially set to invisible (or hide in the case of Netscape 4.) This occurs as soon as the page is loaded and then the Space images are replaced with ones pointed to by an arbitrary message string after the page has loaded. Thus, the initial load was set up to not display any images until such time as the main function was called.

Now, I had developed this part of the script near the start of the design effort and had neglected to make note of the fact that images were being rendered during the page load. Also, this function has a number of global flags that are set during its load and used throughout the program. So, when it came time to decide where to load this script, my natural inclination was to put it in the documentís <HEAD> section, which is what I had done. As with many other problems I uncovered during my diagnostic phase, the program worked on some browsers (Netscape 6 and Internet Explorer 5/6) but failed to work on others (Netscape 4.) Making matters worse, it didnít log any errors on the JavaScript console to give me a clue where the problem existed, either. After several hours of analyzing the script, it finally dawned on me that images were being rendered in the <HEAD> section. Moving the script loading to the <BODY> section solve this problem.

As stated up front, this is really a script coding error and the fault of the programmer (euphemism to provide cover for author.) So, if your script isnít working and you are not getting any JavaScript errors to assist in finding the problem, review your code to ensure that no elements are being rendered in the <HEAD> section.

Automatic Expansion of Relative URLs

This next issue is more a revelation than a problem and has to do with how relative URL references are stored. The most likely use of these is when one pre-caches images using JavaScript, as shown below:

var myImage = Image();
myImage.src = "images/MyImage.gif";

While you might think that the myImage.src property contains the relative URL text string after the assignment, you might be mistaken. Internet Explorer and Netscape 4 actually expand the relative URL to its fully qualified absolute URL value, e.g., http://www.SomeDomain.com/images/MyImage.gif as part of the assignment process; while, Netscape 6 leaves it in its relative state. Under normal circumstances, this is not an issue since use of an automatically expanded URL is just as valid as its shortened relative one. However, if for any reason one has to rely on the original form of the URL (to determine which method was used to define the URL, for example) then the script cannot expect the original value to be contained in the myImage.src property.

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=left
View=visible
Rate=50
XGapAdj=0
IPath=images/
IExt=gif
angAware=false
Effect=dither
Direction=left
Angle=135.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=false
Effect=dither
Direction=left
Angle=225.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=dither
Direction=left
Angle=315.0
Scale=1.0
YGapAdj=0
IPrefix=yamf
Reverse=false
YAMF OFF!

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