Chapter 13

Changing Wrapping Width Example

This example illustrates how to capture mouse events so that the user can make a layer's wrapping width wider or narrower by dragging the mouse.

This example illustrates:

The sections in this chapter are:

Running The Example

When the page loads, you'll see a a blue layer containing a block of text. You can change the wrapping width of the layer by moving the mouse into the layer, pressing the mouse button down, and moving the mouse to the left or right. The wrapping width of the layer increases when you move the mouse to the right, and decreases when you move the mouse to the left. When you release the mouse button, the layer stops tracking mouse events and no longer changes in accordance with the mouse.

To run the <LAYER> version of the example see:

wrapping.htm

wrapcss.htm

Defining the Block of Content

The definition for the block of content is very simple. It sets the left position, sets the background color, sets the initial wrapping width, and specifies the source for the layer:

<LAYER NAME="layer1" LEFT=100

 WIDTH=300 BGCOLOR="#99bbFF"

 SRC="mytext.htm" >

</LAYER>

</BODY>

Capturing Events for the Layer

The first thing the script does is to define some variables that it needs. These include layerWidth, which is the initial width of the layer; oldX which keeps track of the previous x position of the mouse when it is dragged inside the layer; and layer1, which is the layer itself.

var layerWidth = 300;

var oldX;

var layer1 = document.layer1;

Next, the script specifies which events layer1 needs to capture:

layer1.document.captureEvents(

 Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG);

Then it specifies that when the mouse is pressed down inside layer1, the begindrag() function is called, and when the mouse button is released (let up) inside layer1, the enddrag() function is called. (These functions will be defined shortly.)

layer1.document.onmousedown=begindrag;

layer1.document.onmouseup=enddrag;

The script specifies that after layer1 has loaded, the resetcapture() function is invoked.

layer1.onLoad=resetcapture;

Next comes the definition of the resetcapture() function, which basically restates which events the layer needs to capture:

function resetcapture() {

 layer1.document.captureEvents(

 Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG|Event.MOUSEMOVE);

}

Defining the Dragging Functions

When you press the mouse down in the layer, the layer's onMouseDown event handler is called, which in this case is the begindrag() function. The begindrag() function sets the layer's onMouseMove handler to drag, so that when you move the mouse while the button is pressed down, the drag() function is invoked. When you release the mouse button, the layer's onMouseUp event handler is invoked, which in this case is the enddrag() function.

When an event occurs, an event object is created to represent the event. This event object has a PageX variable, which indicates the x position in the page where the event occurred.

The begindrag() Function

The begindrag() function tells the layer that it needs to capture mouse-move events. It sets the onmousemove handler to drag so that the drag() function will be invoked when the mouse is moved. Then it gets the x position of the mouse-down event and stores it in the oldX global variable.

function begindrag(e) {

 layer1.document.captureEvents(Event.MOUSEMOVE);

 layer1.document.onmousemove=drag;

 oldX=e.pageX;

 return false;

}

The drag() Function

The drag() function calls the changeWidth() function, which changes the wrapping width of layer1 by the distance that the mouse moved since the drag function was last called, or if applicable since the begindrag() function was called. This distance is calculated by subtracting the x value of the previous event (stored in oldX) from the pageX value of the current event. Finally the drag() function updates the value stored in oldX.

function drag(e) {

 changeWidth(layer1, e.pageX - oldX);

 oldX = e.pageX;

 return false;

}

The only way to change the wrapping width of a layer is to reload the contents of the layer using the load() function. This function takes two arguments: the file to use as the content of the layer, and the new wrapping width of the layer.

The changeWidth() function increases the value of the layerWidth global variable by the amount that the mouse moved. If the distance that the mouse moved is not zero, the function calls the load() method on the layer to load the file "mytext.htm" and also to change the layer's wrapping width to the new layer width. Since the same file is loaded over and over, in effect the content does not seem to change, but the wrapping width constantly changes so that the content wraps neatly at the right edge of the layer.

function changeWidth(layer, delta)

{

 layerWidth = layerWidth + delta;

 if (delta != 0)

 layer.load("mytext.htm", layerWidth);

}

When you use load() to change the wrapping width, the value of clip.right automatically changes to show the full wrapping width, so long as you have not changed the value of clip.right from its default initial value. If you have specifically set the value of clip.right, then the right edge of the clipping region will not change, even if the wrapping width changes.

The enddrag() Function

When you release the mouse, the enddrag() function is called. The only thing this function does is set the layer's onMouseMove handler to 0, and release the mouse-move event. If the mouse-move event was not released, the layer would continue tracking all mouse move events.

function enddrag(e) {

 layer1.document.onmousemove=0;

 layer1.document.releaseEvents(Event.MOUSEMOVE);

 return false;

}