A DOM1/DOM2 DHTML JavaScript Experiment

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

  

Stopping Annoying Auto-Scroll in DOM2 Browsers

Both Netscape 7 and Internet Explorer 5/6 do an automatic scroll (both horizontal and vertical) when an element extends past the canvas (viewable rendered space) rightmost width and bottom height. Mouse-guided images do that as the viewer moves the mouse close to these limits. This causes the entire canvas to shift when viewed on DOM2 browsers. In order to minimize this, the following script code was added to get the canvas limits and use them as a clipping window before displaying an image. If an image was outside these limits then the style sheet display property was set to "none" (meaning do not display nor allocate space for this element); otherwise it was set to "inline" (meaning to allocate space for this element.)

Following is the script function to determine the canvas dimensions:

// Returns rectangular and center
// coordinates of renderable display

function getDisplayDims(CANVAS) {
  var CWidth, CHeight, CScrollX, CScrollY;

  if (isNS) {
    CWidth = self.innerWidth;
    CHeight = self.innerHeight;
    CScrollX = window.pageXOffset;
    CScrollY = window.pageYOffset;
  } else if (isgteIE6) {
    CWidth = document.documentElement.clientWidth;
    CHeight = document.documentElement.clientHeight;
    if (CWidth==0) {
      CWidth = document.body.clientWidth;
      CHeight = document.body.clientHeight;
    }
    CScrollX = document.body.scrollLeft +
               document.documentElement.scrollLeft;
    CScrollY = document.body.scrollTop +
               document.documentElement.scrollTop;
  } else if (isIE) {
    CWidth = document.body.clientWidth;
    CHeight = document.body.clientHeight;
    CScrollX = document.body.scrollLeft;
    CScrollY = document.body.scrollTop;
  }
  CANVAS.Left    = CScrollX;
  CANVAS.Right   = CWidth + CScrollX;
  CANVAS.Top     = CScrollY;
  CANVAS.Bottom  = CHeight + CScrollY;
  CANVAS.xMiddle = Math.round(CWidth/2) + CScrollX;
  CANVAS.yMiddle = Math.round(CHeight/2) + CScrollY;
}

Important: For Internet Explorer the method for obtaining the canvas dimensions is via the body style sheet property. Attempting to get these property values within the <HEAD></HEAD> section before the document body has been loaded will most likely generate a JavaScript error since the body properties are yet to be defined.

Following is a script scrap that tests the image coordinates against the clipping limits:

var Canvas = new Object();

// Return element pointer

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

// Returns passed element's current X positon

function getXpos(N) {
  return parseInt(getEPtr(N).left);
}

// Returns passed element's current Y positon

function getYpos(N) {
  return parseInt(getEPtr(N).top);
}

  coordX = getXpos(styleTagID);
  coordY = getYpos(styleTagID);
  e = getEPtr(styleTagID);

  if (isDOM2 || isIE4) {
    if (coordX < Canvas.Left   ||
        coordX > Canvas.Right  ||
        coordY < Canvas.Top    ||
        coordY > Canvas.Bottom)
      e.display = "none";
    else
      e.display = "inline";
  }

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

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