JavaScript Examples Bible - UserWorks Technologies

esizeBy(deltaX,deltaY)
resizeTo(width,height)
Compatibility ✓
Chapter 15 ✦ The NN4 Layer Object (Chapter 31)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Example
It is important to understand the ramifications of content flow when these two
methods resize a layer. Listing 31-12a (and the companion document Listing 31-12b)
shows you how to set the lower-right corner of a layer to be dragged by a user for
resizing the layer (much like grabbing the resize corner of a document window).
Three radio buttons enable you to choose whether and when the content should be
redrawn to the layer — never, after resizing, or during resizing.
Event capture is very much like that in Listing 31-11 for layer dragging. The primary
difference is that drag mode is engaged only when the mouse event takes
place in the region of the lower-right corner. A different kind of offset value is saved
here because, for resizing, the script needs to know the mouse event offset from the
right and bottom edges of the layer.
Condition statements in the resizeIt() and release() functions verify
whether a specific radio button is checked to determine when (or if) the content
should be redrawn. I designed this page with the knowledge that its content might
be redrawn. Therefore, I built the content of the layer as a separate HTML document
that loads in the tag.
Redrawing the content requires reloading the document into the layer. I use the
layerObject.load() method because I want to send the current
layerObject.clip.width as a parameter for the width of the clip region to
accommodate the content as it loads.
An important point to know about reloading content into a layer is that all property
settings for the layer’s event capture are erased when the document loads.
Overcoming this behavior requires setting the layer’s onLoad event handler to set
the layer’s event capture mechanism. If the layer event capturing is specified as part
of the statements at the end of the document, the layer ignores some important
events needed for the dynamic resizing after the document reloads the first time.
As you experiment with the different ways to resize and redraw, you see that
redrawing during resizing is a slow process because of the repetitive loading (from
cache) needed each time. On slower client machines, it is easy for the cursor to
outrun the layer region, causing the layer to not get mouseOver events at all. It may
not be the best-looking solution, but I prefer to redraw after resizing the layer.
Listing 31-22 in the JavaScript Bible shows a version designed for the IE5+ and
NN6 object models. Because content automatically reflows in those browsers,
you do not have to load the content of the positioned element from an external
document.
465
document.layerObject.resizeBy()