DHTML Jigsaw Puzzle: NN4; Summary

The DHTML Lab Jigsaw Puzzle, Part III: NN4
summary

This column, we modified the puzzle code developed in our two previous columns, to create a Netscape Navigator based DHTML application. Most of the techniques used were well-known to us from previous columns, but along the way we introduced a few new ones:

For example, we

• used the powerful new Layer constructor to create positioned elements on-the-fly
• added space where CSS use was limited with the proprietary SPACER tag
• used the document.height property to determine the vertical span of displayed HTML.
• identified the vertical page location of a nested element with the pageY property
• avoided errors by using the isNaN() function
• used show and hide values for element visibility to conform to the Navigator standard

And in the end, for all our effort, we got this puzzle:

Remember, the basic concepts behind the puzzle creation and the program flow are detailed in Part I and Part II of this series.

In this column, we discussed the Navigator code necessary for:

• defining the CSS-positioned elements
• inserting the elements into the HTML page
• creating the user controls
• initializing the puzzle
• creating the puzzle piece elements
• clipping the puzzle pieces
• breaking the puzzle
• creating and placing the grid
• dragging the puzzle pieces into position
• solving the puzzle automatically
• positioning the pieces automatically
• the control panel

Next Time, on Dynamic HTML Lab

Finally this puzzle series will end, with:

• the full code for a cross-browser version
• a couple of extra puzzle features, so we won't get bored

Now, on to the complete Navigator code...

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Nov. 27, 1997
Revised: Jan. 18, 1998

URL: https://www.webreference.com/dhtml/column10/puzzNSlast.html