JavaScript Examples Bible - UserWorks Technologies

clientHeight
clientWidth
Chapter 1 ✦ Generic HTML Element Objects (Chapter 15)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓ ✓
Example
Listing 15-6 calls upon the clientHeight and clientWidth properties of a DIV
element that contains a paragraph element. Only the width of the DIV element is
specified in its style sheet rule, which means that the paragraph’s text wraps inside
that width and extends as deeply as necessary to show the entire paragraph. The
clientHeight property describes that depth. The clientHeight property then
calculates where a logo image should be positioned immediately after DIV, regardless
of the length of the text. As a bonus, the clientWidth property helps the script
center the image horizontally with respect to the paragraph’s text.
Listing 15-6: Using clientHeight and clientWidth Properties
clientHeight and clientWidth Properties
function showLogo() {
var paragraphW = document.all.myDIV.clientWidth
var paragraphH = document.all.myDIV.clientHeight
// correct for Windows/Mac discrepancies
var paragraphTop = (document.all.myDIV.clientTop) ?
document.all.myDIV.clientTop : document.all.myDIV.offsetTop
var logoW = document.all.logo.style.pixelWidth
// center logo horizontally against paragraph
document.all.logo.style.pixelLeft = (paragraphW-logoW)/2
// position image immediately below end of paragraph
document.all.logo.style.pixelTop = paragraphTop + paragraphH
document.all.logo.style.visibility = “visible”
}
Position and Show Logo Art
Continued
13
elementObject.clientHeight