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

  

Netscape 6 is Pixel Picky

When assigning a pixel value (px) to a positional element, Netscape 6 generates exception errors if the values are either very small or very large floating point numbers. Where this might occur is if one uses the JavaScript trigonometric functions to compute a position, i.e., Math.sin(), Math.cos(), etc. and then assigns the result directly to an element. To avoid these situations merely insure that any pixel values are converted to integer before assignment.

Following is a script scrap that demonstrates how to avoid this:

// Return element pointer

function getEPtr(ID) {
  return isDOM2 ? document.getElementById(ID).style :
         (isNS4 ? document.layers[ID] :
                  document.all[ID].style);
}

  e = getEPtr(styleTagID);
  coordX = Math.round(Math.sin(angle) * x);
  coordY = Math.round(Math.cos(angle) * y);
  if (isDOM2 || isIE4) {
    e.left = coordX+"px";
    e.top  = coordY+"px";
  } else {
    e.left = coordX;
    e.top  = coordY;
  }

Inline Style Constraint on Internet Explorer 5

On Internet Explorer 5, defining a layer (<DIV id="myID">, <SPAN id="myID">) without including an inline style sheet reference for its position, style="left:xx;top:yy;", causes the DOM2 style sheet reference document.getElementById(id) method to fail. This problem did not exhibit itself using Netscape 6.

Since discovering this problem, Iíve upgraded to Internet Explorer 6 and discovered that this problem no longer exists, and since Microsoft doesnít allow more than one Internet Explorer version on a system, I was not able to reconfirm the existence of this problem when writing this article. Suffice it to say, itís probably a good idea to include a style sheet position reference if planning on reliably using the document.getElementById(id) method.

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

While Netscape 4 supports the use of both the <DIV> and <SPAN> tags for creating containers (layers), along with the inclusion of the inline style attribute for positioning, I was unable to get DHTML (moving elements) to work when using either of them. Either of these two methods is a standard way to create containers (layers) in both Netscape 6 and Internet Explorer 4/5/6. To make matters worse, every attempt to do so not only caused the browser to hang but also left a hidden Netscape 4 window running in the background (not even detectable via Windows Task Manager) that prevented Netscape 4 from restarting clean afterwards. After this occurred, the only way to restore Netscape 4 was to terminate the hidden Netscape 4 window using a system utility (not many people have these) or to restart Windows.

So, if you plan on creating DHTML using either <DIV> or <SPAN> tags, it is wise to test for the existence of Netscape 4 before attempting to manipulate their style sheet properties. If itís the client browser, either skip the DHTML manipulation or add Netscape 4-specific HTML tag, <LAYER>, and manipulate its style sheet properties.

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=pinwheel
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=pinwheel
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=pinwheel
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: