April 27, 2000 - Scroll Box Positioning
April 27, 2000 DHTML Positioning Tips: April 2000
Yehuda Shiran, Ph.D.
|
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.