• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

4.6. Common Positioning Tasks

This chapter concludes with examples of two common positioning tasks: centering objects and flying objects. A third task, user-controlled dragging of objects, is kept on hold until Chapter 6, where we discuss the browser event models.

4.6.1. Centering an Object

The common way to center an element within a rectangle is to calculate the half-way point along each axis for both the element and its containing rectangle (positioning context). Then subtract the element value from the container value for each axis. The resulting values are the coordinates for the top and left edges of the element that center the element.

Document object properties and references differ so widely for these attributes in Navigator and Internet Explorer that it takes a bit of code to handle the centering task for both browsers in the same document. The calculations rely on browser-specific functions that might best be placed into a custom API and linked in from an external .js file. For purposes of demonstration, however, the library functions are embedded into the example document shown here.

The element being centered in the browser window is an outer DIV element with a yellow background. Inside this DIV element is a one-word P element, which, itself, is positioned inside the context of the DIV element. The goal is to center the outer DIV element, bringing the contained paragraph along for the ride. Example 4.6 shows the complete page listing.

Example 4.6. A Page That Centers an Element Upon Loading

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
// ***Begin library code better placed in an external API***
// Set global variables for browser detection and reference building
var isNav, isIE
var coll = ""
var styleObj = ""
if (parseInt(navigator.appVersion) >= 4) {
    if (navigator.appName == "Netscape") {
        isNav = true
    } else {
        isIE = true
        coll = "all."
        styleObj = ".style"
    }
}
// Utility function returns rendered height of object content in pixels
function getObjHeight(obj) {
    if (isNav) {
        return obj.clip.height
    } else {
        return obj.clientHeight
    }
}
// Utility function returns rendered width of object content in pixels
function getObjWidth(obj) {
    if (isNav) {
        return obj.clip.width
    } else {
        return obj.clientWidth
    }
}
// Utility function returns the available content width space in browser window
function getInsideWindowWidth() {
    if (isNav) {
        return window.innerWidth
    } else {
        return document.body.clientWidth
    }
}
// Utility function returns the available content height space in browser window
function getInsideWindowHeight() {
    if (isNav) {
        return window.innerHeight
    } else {
        return document.body.clientHeight
    }
}
// Utility function to position an element at a specific x,y location
function shiftTo(obj, x, y) {
    if (isNav) {
        obj.moveTo(x,y)
    } else {
        obj.pixelLeft = x
        obj.pixelTop = y
    }
}
// ***End library code***

// Center an element named banner in the current window/frame, and show it
function centerIt() {
    // 'obj' is the positionable object
    var obj = eval("document." + coll + "banner" + styleObj)
    // 'contentObj' is the element content, necessary for IE 4 to return the
    //   true current width
    var contentObj = eval("document." + coll + "banner")
    var x = Math.round((getInsideWindowWidth()/2)-(getObjWidth(contentObj)/2))
    var y = Math.round((getInsideWindowHeight()/2)-(getObjHeight(contentObj)/2))
    shiftTo(obj, x, y)
    obj.visibility = "visible"
}
// Special handling for CSS-P redraw bug in Navigator 4
function handleResize() {
    if (isNav) {
        // causes extra re-draw, but must do it to get banner object color drawn
        location.reload()
    } else {
        centerIt()
    }
}
</SCRIPT>
</HEAD>

<BODY onLoad="centerIt()" onResize="handleResize()">
<DIV ID="banner" STYLE="position:absolute; visibility:hidden; left:0; top:0;
 background-color:yellow; width:1; height:1">
<P ID="txt" STYLE="position:absolute; left:0; top:0; font-size:36pt; color:red">
Congratulations!
</P>
</DIV>
</BODY>
</HTML>

					  

No matter what size the browser window is initially, or how the user resizes the window, the element always positions itself dead center in the window space. Notice that the outer positionable element is initially loaded as a hidden element positioned at 0,0. This allows a script (triggered by the onLoad event handler of the BODY element) to perform calculations based on the element properties and then show the properly positioned element. The page allows the browser to determine the current height and width of the content, based on how each browser (and operating system) calculates its fonts (initial width and height are arbitrarily set to 1). This is preferable to hard-wiring the height, width, and clipping region of the element. It means, however, that when the script is running in IE 4, it cannot rely on style object properties. Those properties always pick up the style sheet attributes; they do not change unless the properties are changed by a script. Instead, the script in Example 4.6 uses the clientWidth and clientHeight properties of the element itself, when running in IE 4.

Many of the concepts shown in Example 4.6 can be extended to centering nested elements inside other elements. Be aware, however, that Navigator 4 handles nested items best when they are specified in the document with <LAYER> tags rather than with CSS-P syntax. You may find it worthwhile to include browser-specific branches in your document that use the document.write() method to write CSS-P or <LAYER> HTML content, depending on the current browser (using the isNav and isIE globals). Using the <LAYER> tag for Navigator positionable objects does not affect the syntax of scripted access to those items: the same properties and methods apply whether the object is defined in CSS-P or as a genuine layer. Rendering, however, is more reliable in Navigator 4 with genuine layers. Support for CSS should certainly improve in future versions of Navigator.

4.6.2. Flying Objects

Moving objects around the screen is one of the features that can make Dynamic HTML pay off for your page—provided you use the animation to add value to the presentation. Gratuitous animation (like the example in this section) more often annoys frequent visitors than it helps convey information. Still, I'm sure you are interested to know how animation tricks are performed with DHTML, including cross-platform deployment.

Straight-line paths are relatively easy to script. However, when you need to account for object centering and a variety of browser window sizes, the scripts can bulk up a bit. A page that requires as many utility functions as the one shown here is best served by linking in a custom API.

The example in this section builds somewhat on the centering application in Example 4.6. The goal of this demonstration is to have a banner object fly in from the right edge of the window (centered vertically in the window), until it reaches the center of the currently sized window. The source code for the page is shown in Example 4.7.

Example 4.7. A Page with a "Flying" Banner

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
// ***Begin library code better placed in an external API***
// Set global variables for browser detection and reference building
var isNav, isIE, intervalID
var coll = ""
var styleObj = ""
if (parseInt(navigator.appVersion) >= 4) {
    if (navigator.appName == "Netscape") {
        isNav = true
    } else {
        isIE = true
        coll = "all."
        styleObj = ".style"
    }
}
// Utility function returns height of object in pixels
function getObjHeight(obj) {
    if (isNav) {
        return obj.clip.height
    } else {
        return obj.clientHeight
    }
}
// Utility function returns width of object in pixels
function getObjWidth(obj) {
    if (isNav) {
        return obj.clip.width
    } else {
        return obj.clientWidth
    }
}
// Utility function returns the x coordinate of a positionable object
function getObjLeft(obj)  {
    if (isNav) {
        return obj.left
    } else {
        return obj.pixelLeft
    }
}
// Utility function returns the y coordinate of a positionable object
function getObjTop(obj)  {
    if (isNav) {
        return obj.top
    } else {
        return obj.pixelTop
    }
}
// Utility function returns the available content width space in browser window
function getInsideWindowWidth() {
    if (isNav) {
        return window.innerWidth
    } else {
        return document.body.clientWidth
    }
}
// Utility function returns the available content height space in browser window
function getInsideWindowHeight() {
    if (isNav) {
        return window.innerHeight
    } else {
        return document.body.clientHeight
    }
}
// Utility function sets the visibility of an object to visible
function show(obj) {
    obj.visibility = "visible"
}

// Utility function sets the visibility of an object to hidden
function hide(obj) {
    obj.visibility = "hidden"
}
// Utility function to position an element at a specific x,y location
function shiftTo(obj, x, y) {
    if (isNav) {
        obj.moveTo(x,y)
    } else {
        obj.pixelLeft = x
        obj.pixelTop = y
    }
}
// Utility function to move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
    if (isNav) {
        obj.moveBy(deltaX, deltaY)
    } else {
        obj.pixelLeft += deltaX
        obj.pixelTop += deltaY
    }
}
// ***End library code***

// Set initial position offscreen and show object and
// start timer by calling glideToCenter()
function intro() {
    var obj = eval("document." + coll + "banner" + styleObj)
    var contentObj = eval("document." + coll + "banner")
    shiftTo(obj, getInsideWindowWidth(), 
            Math.round((getInsideWindowHeight()/2)-(getObjHeight(contentObj)/2)))
    show(obj)
    glideToCenter()
}
// Move the object to the left by 5 pixels until it's centered
function glideToCenter() {
    var obj = eval("document." + coll + "banner" + styleObj)
    var contentObj = eval("document." + coll + "banner")
    shiftBy(obj,-5,0)
    var a = getObjLeft(obj)
    var b = Math.round((getInsideWindowWidth()/2) - (getObjWidth(contentObj)/2))
    if (a <= b) {
        clearTimeout(intervalID)
    } else {
        intervalID = setTimeout("glideToCenter()",1)
    }
}
</SCRIPT>
</HEAD>
<BODY onLoad="intro()">
<DIV ID="banner" STYLE="position:absolute; visibility:hidden; left:0; top:0;
 background-color:yellow; width:1; height:1">
<P ID="txt" STYLE="position:absolute; left:0; top:0; font-size:36pt; color:red">
Congratulations!
</P>
</DIV>

</BODY>
</HTML>

					  

The bulk of the utility functions in Example 4.7 get the pixel sizes and left-edge locations of the window and the flying object. These are all important because the main operation of this page requires those calculated values, to take into account the current size of the browser window.

All action is triggered by the onLoad event handler of the BODY element. In the intro() function, platform equivalency is used to get a valid reference to the banner object (this would not be necessary if we were using the API shown in Example 4.5 because the API automatically converts object names to object references for each utility function call). The first positioning task is to move the initially hidden banner object off the screen to the right, so that the banner's left edge lines up with the right edge of the window. At the same time, the script calculates the proper vertical position of the banner, so that it is centered from top to bottom. With the banner safely out of view, it's safe to make the object visible. Then the magic begins.

JavaScript 1.2, in Navigator 4 and Internet Explorer 4, adds the setInterval() and clearInterval() functions specifically to assist in animation. But because clearInterval() doesn't work correctly in IE 4 for the Macintosh, this example reverts to the setTimeout() methodology, which also does the job. The final script statement of intro() invokes the glideToCenter() function, which ends with a setTimeout() function that keeps calling glideToCenter() until the element is centered horizontally. Each millisecond (or as quickly as the rendering engine allows), the browser invokes the glideToCenter() function and refreshes its display.

Each time glideToCenter() runs, it shifts the banner object to the left by five pixels without adjusting the vertical position. Then it checks whether the left edge of the banner has arrived at the position where the banner is centered on the screen. If it is at (or to the left of) that point, the timer is cleared and the browser ceases to invoke glideToCenter() anymore.

If you want to move an element along a more complicated path, the strategy is similar, but you have to maintain one or more additional global variables to store loop counters or other values that change from point to point. Example 4.8 shows replacements for the intro() and glideToCenter() functions in Example 4.7. The new functions roll the banner around in a circle. An extra global variable for counting steps along the route is all that is required.

Example 4.8. Rolling a Banner in a Circle

// Set initial position centered horizontally and 50 pixels down; start timer
function intro() {
    var obj = eval("document." + coll + "banner" + styleObj)
    var contentObj = eval("document." + coll + "banner")
    var objX = Math.round((getInsideWindowWidth() - getObjWidth(contentObj))/2)
    var objY = 50
    shiftTo(obj, objX, objY)
    show(obj)
    goAround()
}
// Iteration counter global variable
var i = 1
// Move element along an arc that is 1/36 of a circle; stop at full circle
function goAround() {
    var obj = eval("document." + coll + "banner" + styleObj)
    var objX = getObjLeft(obj) + Math.cos(i * (Math.PI/18)) * 5
    var objY = getObjTop(obj) + Math.sin(i * (Math.PI/18)) * 5
    shiftTo(obj, objX, objY)
    if (i++ == 36) {
        clearTimeout(intervalID)
    } else {
        intervalID = setTimeout("goAround()",1)
    }
}


					  

In Chapter 6, we'll come back to the dynamic positioning of elements and examine how to make an object track the mouse pointer. That application requires knowledge of the partially conflicting event models built into Navigator 4 and Internet Explorer 4, which is why we can't cover it here.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint