DHTML Jigsaw Puzzle: NN4; Initialization | WebReference

DHTML Jigsaw Puzzle: NN4; Initialization


The DHTML Lab Jigsaw Puzzle, Part III: NN4
initializing the puzzle

The Variables

The global variables declared at the beginning of our script are exactly the same as in the IE version. They are listed here for reference. A complete discussion of them, and the general flow of the script, can be found in Part I and Part II of our puzzle tutorial.

    puzzLeft = puzzTop = null; puzzWidth = puzzHeight = null; bordWidth = 3; puzzAcross = puzzDown = 5; isPuzzDraggable = true; isGrid = false; isNewPuzz = null; isCreated = null; piecesCreated = 0 pieceCount = 1; topCount = 0; isBroken = false; solvedCount = 1; pieceToSolve = null; flashTotal = 5; flashCount = 0; loadTotal = 3; loadCount = 0; tempEl = null; sp = " ";

Upon Complete Load

Our load-checking function, whenLoaded() is called by the three onLoad handlers. The first two times, it returns. The third, it executes its statements.

    function whenLoaded() { loadCount++; if (loadCount < loadTotal) { return }; elPuzzle = document.elPuzzle; elBlank = elPuzzle.document.elBlank; elImage = elPuzzle.document.elImage; puzzImage = elImage.document.images["imOrig"]; elGrid = elPuzzle.document.elGrid; elControls = elPuzzle.document.elControls; gridBut = elControls.document.fmControls["gridBut"]; dragBut = elControls.document.fmControls["dragBut"]; if (isPuzzDraggable) { elPuzzle.draggable = true; } else { elPuzzle.draggable = false; dragBut.value = "Drag OFF"; } elPuzzle.clipLeft = elPuzzle.clipTop = 0; initPuzz("firstPic"); }

We initialize NN-specific variables to use throughout our script, to assist both in shortening the element and object identifiers, and for later cross-browser referencing. It is much easier to refer to the button that turns the grid on and off as gridBut, than as document.elPuzzle.document.elControls.document.fmControls["gridBut"].

We allow dragging of the full puzzle or not, depending on the initial variable setting. The clipTop and clipLeft properties, used in drag & drop placement, are initialized for elPuzzle, then the initPuzz() function is called. This function will initialize all our new puzzle images. Since our image is already loaded, we pass it a dummy argument of "firstPic", to use in testing for possible new images.

    function initPuzz(whichIm) { isNewPuzz = true; if (isBroken) { allDone(false) }; changeImage(whichIm); elPuzzle.visibility = "show"; isCreated = false; pieceToSolve = 1; }

The single argument for initPuzz() is the src of a new puzzle image, as we saw in our SELECT onChange handler. This argument will be passed on to another function. We check to see if initPuzz() was called while the puzzle was broken. If it was, our cleanup function allDone() is called. When we return from allDone(), a new function, changeImage() is called with the whichIm argument. When we return from changeImage(), our puzzle is fully formatted, so we show it to the user for the first time.

Note that we provide the visibility property with a value of show. This is the Navigator standard. The CSS standard, visible, is also supported, as we know, since in all our columns so far, it has been the one used. Internally, NN changes visible, in reality an alias, to show. Later in the script, we will use dynamically created layers that only recognize show. Therefore, we establish show as the Navigator standard for the puzzle script. On subsequent calls to initPuzz(), when the puzzle is already visible, this line will be redundant.

    function changeImage(whichIm) { if (whichIm != "firstPic") { elImage.document.write("<IMG NAME='imOrig' SRC=" + whichIm + ">"); elImage.document.close(); } puzzWidth = puzzImage.width; puzzHeight = puzzImage.height; elPuzzle.clip.right = puzzWidth + (bordWidth*2); elGrid.clip.right = puzzWidth; elGrid.clip.bottom = puzzHeight; elControls.top = puzzHeight + (bordWidth*2); elControls.clip.right = puzzWidth elControls.clip.bottom = elControls.document.height; elPuzzle.clip.bottom = puzzHeight + elControls.document.height + (bordWidth*3); elPuzzle.left = (window.innerWidth-elPuzzle.clip.width)/2; }

The loading of new images and puzzle formatting is performed in changeImage(). Since, the first time through, our image is already loaded, we check the whichIm argument for a value of "firstPic". If we find it, we skip the image loading statements. On every other visit to changeImage() these statements will be executed. That is, we will completely replace the contents of the elImage object with new HTML that loads a new image with whichIm as its cource file. By writing new HTML, we create a new document.images array for elImage which will store information on the new image, including correct width and height values, which we need for puzzle formatting. If we had simply updated the old document.images array, we would have changed the image src but the width and height would always reflect those of the first puzzle image.

With our new image loaded, we store its width and height in the puzzWidth and puzzHeight variables, and using these variables, we format the puzzle.

We establish the visible width of our full puzzle by clipping it to the width of the new image plus the required border widths. Our grid is clipped to the size of the new image.

Next, we take our controls and place them after the image, adding two border widths, one for the top puzzle border and the other for the image/controls separating border. Our controls are clipped to the same width as the image. We then use the document.height property to calculate the height, not of the element, but of the HTML contained within it. That's where we clip the bottom part of elControls. Our nested elements are now all the correct size. Finally, we clip the bottom of the full puzzle by allowing for the image, the HTML content of elControls and three border widths.

Once we have a completely formatted puzzle, we position it in the horizontal center of our page.

Now, we can break the puzzle, create the puzzle pieces, and begin play.

Produced by Peter Belesis and

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

URL: http://www.webreference.com/dhtml/column10/puzzNSinit.html