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

  

!DOCTYPE Compliance Mode

Late into this project I decided to see what effect including the !DOCTYPE compliance statement would have. For those who may not be aware, this HTML tag must be first statement of a web page (even before the <HTML> statement) and takes the form:

<!doctype html public "-//w3c//dtd html 4.0 strict//en">

I’ll try to convince anyone who asks me that I did this for thoroughness of testing but, actually, it was more out of arrogance than anything else. You see, I had extensively tested the script using a rather quickly constructed test case HTML document. It was then that I had realized I had neglected to include this statement in the test case. However, I was very confident in the script and decided to include this statement more as an act of bravado than anything else. Needless to say, I was humbled once again by the gods of HTML in that, while it still worked for Netscape 4, it no longer worked on either Netscape 6 or Internet Explorer 6 browsers. As it turns out, this statement caused a couple problems and, unfortunately, neither of them showed up as an error in the JavaScript console.

Problem 1

As explained above, YAMF retrieves the browser's canvas limits (display width/height) to perform clipping on elements that have moved outside them in order to prevent automatic scrolling in DOM2 browsers. However, Internet Explorer 6 no longer returns the correct canvas dimensions using the body style sheet properties if !DOCTYPE is set with compliance. Rather, it uses the newly created html style sheet properties (represented by document.documentElement.) For scroll canvas properties, whenever one is relevant the other is set to zero. Thus, one can include both in a computation in additive manner and expect to get the correct scroll value. However, this is not the case with the body style sheet clientWidth and clientHeight properties, which are set to values even in compliance mode. Thus, when computing the canvas limits for Internet Explorer 6, first attempt to get the html document.documentElement.clientWidth and document.documentElement.clientHeight properties and if set to zero, then retrieve the document.body.clientWidth and document.body.clientHeight properties instead. This is not an issue with Netscape 6 and was never a problem with Netscape 4.

Below is a script function that demonstrates how to retrieve the mouse position on a mousemove event:

var mouseX;
var mouseY;

// If Netscape 4 start mouse move event handler

if (isNS4)
  document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = newPos;

// Moves first image to new mouse position.

function newPos(E) {

  mouseX = (isNS4) ? E.pageX :
           (isgteIE6) ? event.clientX +
                     document.documentElement.scrollLeft +
                     document.body.scrollLeft :
           (isIE)  ? event.clientX + window.scrollX :
                     E.clientX + window.pageXOffset;
  mouseY = (isNS4) ? E.pageY :
           (isgteIE6) ? event.clientY +
                     document.documentElement.scrollTop +
                     document.body.scrollTop :
           (isIE)  ? event.clientY + window.scrollY :
                     E.clientY + window.pageYOffset;
}

Problem 2

While Netscape 6 didn’t exhibit the above problem, it did have its own peculiar constraint while running in compliance mode; specifically, assigning positional values to the elements left and top style sheet properties. According to the CSS1 specification, length value assignments must have the unit type as part of the assignment (e.g., px, in, cm, mm, pt, pc.) As of Internet Explorer 6.0PR2, non-unit values default to pixel units (px); however, Netscape 6 doesn’t accept non-unit values. Also, Netscape 4 must have non-unit values. Lastly, if not in compliance mode, all of the browsers accept the non-unit values. So, the safest way around this problem is to assign unit types for all DOM2 enabled browsers and non-unit values to others.

Below is a script scrap that avoids this problem using the px unit type:

// Return element pointer

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

  e = getEPtr(styleTagID);
  if (isDOM2 || isIE4) {
    e.left = coordX+"px";
    e.top  = coordY+"px";
  } else {
    e.left = coordX;
    e.top  = coordY;
  }

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=center
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!

YAMF
onMouseOver Event
Type=banner
Justify=left
View=visible
Rate=50
XGapAdj=0
IPath=images/
IExt=gif
angAware=true
Effect=dither
Direction=left
Angle=45.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=135.0
Scale=1.0
YGapAdj=0
IPrefix=yamf
Reverse=false
YAMF OFF!

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