April 27, 2000 - Scroll Box Positioning | WebReference

April 27, 2000 - Scroll Box Positioning

Yehuda Shiran April 27, 2000
DHTML Positioning
Tips: April 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

There are many ways to position a DHTML element. You can position it in absolute coordinates, but then the desired location may change, because of an ad put at the top of the page, for example. One way is to use an IMG element as a position anchor. We place a dummy IMG element wherever we want in our page:

<IMG SRC="blank.gif"
        NAME="holdspace" ID="holdspace"
        WIDTH="350" HEIGHT="90"
        STYLE="visibility:hidden; position:relative;">

We then compute the coordinates of this GIF. We use the IMG's ID to find it in the images[] array:

var holdingImage = document.images["holdspace"];
var canvasLeft = (NS4) ? holdingImage.x : holdingImage.getRealLeft();
var canvasTop = (NS4) ? holdingImage.y : holdingImage.getRealTop();
var canvasWidth = holdingImage.width;
var canvasHeight = holdingImage.height;

where getRealLeft() and getRealTop() are defined as in Scrolling JavaScript Banners:

function getRealLeft() {
	xPos = this.offsetLeft;
	tempEl = this.offsetParent;
  	while (tempEl != null) {
  		xPos += tempEl.offsetLeft;
  		tempEl = tempEl.offsetParent;
  	}
	return xPos;
}
function getRealTop() {
	yPos = this.offsetTop;
	tempEl = this.offsetParent;
	while (tempEl != null) {
  		yPos += tempEl.offsetTop;
  		tempEl = tempEl.offsetParent;
  	}
	return yPos;
}

These functions are needed for Internet Explorer in cases where the IMG tag is positioned inside another container such as a table. See Column 13 for more details on the motivation.

Once the coordinates and size of the image are known, the DIV element is assigned with the new numbers.

Learn more about DHTML positioning in Column 32, Scrolling HTML Basics, Part III: The Cross-Browser Version.