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! |
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;
} |
| Previous | Next |
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
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! |
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! |
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! |