| home / experts / dhtml / column8 |   
|
|
When creating DHTML that relies on scripting object manipulation, it is advisable to perform checks confirming that all has gone well. In our case, before we can expose the puzzle to the user, we must confirm that the two initial images to be used, the puzzle image and the grid, have loaded. In addition, it would be best to wait until the page itself has finished loading before we initialize our puzzle. To this end, we use the onLoad event handler of the BODY tag and the Image object:
All three instances of onLoad call the same function, whenLoaded(), which we will define as part of our initializtion.
Our script has many functions to assist in modularity. We will discuss them in the order that the application uses them. First, however, we must initialize several global variables that will be used by more than one function:
Our first function is, of course, the one called by the onLoad handlers: whenLoaded(). In its bare form, it increments the load counter every time it is called. If the total has not yet been reached, it returns:
When the load count is reached, and we know that our elements have been created and our primary images loaded, the function executes the remainder of its statements:
The function checks the "draggability" of the puzzle, through the isPuzzDraggable variable. If true, the cursor shape for the puzzle is changed to move, helping the user identify it as draggable. If false, the value of the control button that toggles the puzzle draggability is changed, again to help the user. In both cases, a new property is created for elPuzzle: draggable. This property will be assigned to all elements that can be dragged, that is, the puzzle and the individual pieces. By checking the value of this property, we can determine at any time whether a piece should be dragged or not.
Next, we create two more properties for elPuzzle, clipLeft and clipTop. These will be created for all draggable elements and store the values of the left and top clip of the element. Since our puzzle has not been clipped, we assign a zero value to both properties.
With these overhead tasks completed, we call initPuzz(). This function is called every time we have a new puzzle image:
If this function is called when the puzzle has already been broken up, through the image loading SELECT box (see previous page), the allDone() function is called to perform a general cleanup. Since this our first go-through, we'll ignore the first line. The true width and height of the puzzle are assigned to puzzWidth and puzzHeight by retrieving the width and height of the puzzle image. Both elPuzzle and its child element elControls have their width set dynamically to the puzzle width. Now that the correct widths have been assigned, we can show the user the puzzle. We make it visible and assign values to three of our tracking variables. Our displayed puzzle has now taken its correct form:
Now our users are ready to play.
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: 11/05/97
Revised: 11/13/97
URL: http://www.webreference.com/dhtml/column8/puzzInit.html
