DHTML Jigsaw Puzzle: Cross-Browser; Piece Creation

The DHTML Lab Jigsaw Puzzle, Part IV: Cross-Browser
creating the puzzle pieces

As you will recall, when the user presses the Break button, the breakUp() function is called, which in turn calls createPuzzle() to clip the pieces, which calls createPieces() to create the pieces, if a new image has been loaded.

The cross-browser version of these three important functions simply combines the Navigator and Explorer versions. There are very few differences in the code as you know it.

function createPieces(){
    puzzPieces = puzzAcross * puzzDown;
    if (puzzPieces > piecesCreated) {
        makeStart = piecesCreated+1;
        for(i=makeStart; i                 
                divStr = "<DIV ID=PIECE" + i + " CLASS=clPuzzPiece>"
                       + "<IMG NAME=imPiece" + i + " ></DIV>";
                document.body.insertAdjacentHTML("BeforeEnd",divStr);
            }
            else {
                eval("PIECE" + i  + " = new Layer(puzzWidth)");
            }
            eval("PIECE" + i  + ".showIt = showIt");
        }
        piecesCreated = puzzPieces;
    }
    activeEl = eval("PIECE" + puzzPieces);
}
In createPieces(), we have added a statement that creates a showIt() method for all puzzle pieces, since their visibility is often toggled.
function createPuzzle() {
    if (!isCreated) { createPieces() };
    pieceWidth = puzzWidth/puzzAcross;
    pieceHeight = puzzHeight/puzzDown; 
    while (pieceCount
                document.images["imPiece" + pieceCount].src = puzzImage.src; 
            }
            else {
                tempEl.document.write("<IMG SRC=" + puzzImage.src + ">");
                tempEl.document.close();
            }
            pixR = pieceWidth * i;
            pixL = pieceWidth * (i-1);
            if (IE4) {        
                tempEl.style.clip = "rect(" + pixT + sp + pixR + sp + pixB + sp + pixL + ")";
            }
            else {
                tempEl.clip.top = pixT;
                tempEl.clip.left = pixL;
                tempEl.clip.right = pixR; 
                tempEl.clip.bottom =  pixB;
            }
            tempEl.clipLeft = pixL;
            tempEl.clipTop = pixT;
            pieceCount++;
        }
        topCount++;
    }
    if (isGrid) { setGrid() };    
    isNewPuzz = false;
    isCreated = true;
    pieceCount = 1;
    topCount = 0;
    window.status = "";
}
function breakUp() {
    puzzLeft = (IE4) ? (elPuzzle.style.pixelLeft + bordWidth) : (elPuzzle.left + bordWidth);
    puzzTop = (IE4) ? (elPuzzle.style.pixelTop + bordWidth) : (elPuzzle.top + bordWidth);
    pieceToSolve = 1;
    if (isNewPuzz && isBroken) { allDone(false) };
    if (isNewPuzz) { createPuzzle() };
    if (isPuzzDraggable) {
        elPuzzle.draggable = false; 
        if (IE4) { elImage.style.cursor = "default" }
    }
    if (IE4) {
        elBlank.style.width = puzzWidth;
        elBlank.style.height = puzzHeight;
    }
    else { 
        elBlank.clip.right = puzzWidth; 
        elBlank.clip.bottom = puzzHeight;
    }
    elBlank.showIt(true);
    
    if (IE4) {
        startL = document.body.scrollLeft;
        startT = document.body.scrollTop;
        endL = (startL + document.body.offsetWidth) - puzzWidth;
        endT = (startT + document.body.offsetHeight) - puzzHeight;
    }
    else {
        startL = 10;
        startT = elPuzzle.top;
        endL = window.innerWidth - puzzWidth;
        endT = elPuzzle.top + elPuzzle.clip.height - puzzHeight;
    }
    for (i=1; i
            tempEl.style.pixelLeft = putL;
            tempEl.style.pixelTop = putT;
            tempEl.style.cursor = "move";
        }
        else {
            tempEl.left = putL;
            tempEl.top = putT;
        }
        tempEl.showIt(true);
    }
    if (isGrid) { elGrid.showIt(true)}
    isBroken = true;
    solvedCount = 1;
    if (NS4) {
        document.captureEvents(Event.MOUSEDOWN);
        document.onmousedown = grabEl;
    }
}
The first addition to breakUp() is the Explorer code for manipulating the width and height of elBlank. Remember, elBlank was introduced in the Navigator version of the code. It appears whenever a puzzle is broken in place of the image, creating a white workspace. In the original Explorer code, we simply made the image hidden, to create the workspace.
The second, very important, addition is the Navigator code for capturing the mousedown event. Now that our puzzle is broken, and puzzle draggability is off by default, we can enable mousedown capturing for moving our pieces. In the new scheme of things, therefore, Navigator only captures mousedown when the user moves over the puzzle image or the puzzle is broken and ready to be solved. Explorer still continues to capture mousedown universally.
As you can see, we have created the cross-browser version with very few additions. The remaining functions have even fewer modifications.



Produced by Peter Belesis and
 
All Rights Reserved. Legal Notices.

Created: Dec. 17, 1997

Revised: Jan. 18, 1998
URL: https://www.webreference.com/dhtml/column11/puzzCBcreate.html