The DHTML Lab Jigsaw Puzzle, Part IV: Cross-Browser
the miscellaneous support functions
The last functions in our main script are all either unchanged or have had if...else statements added with already discussed browser-specific code inserted. But since we are going through the complete script, they are reproduced here for reference and comparison. The one exception is allDone().
function visToggle(isFullSolve){
if (flashCount!=flashTotal) {
if (IE4) {
tempEl.style.visibility = (tempEl.style.visibility=='visible') ? 'hidden' : 'visible';
}
else {
tempEl.visibility = (tempEl.visibility=='show') ? "hide" : "show";
}
flashCount++;
}
else {
clearInterval(flashTimer);
flashCount = 0;
tempEl.showIt(true);
if (tempEl != elImage) { origPos(tempEl) }
if (isFullSolve) { pieceToSolve++; solve(true) }
}
}
function origPos(tempEl) {
if (IE4) {
tempEl.style.pixelLeft = puzzLeft;
tempEl.style.pixelTop = puzzTop;
tempEl.style.cursor = 'default';
}
else {
tempEl.left = puzzLeft;
tempEl.top = puzzTop;
}
tempEl.draggable=false;
solvedCount++;
if (solvedCount > puzzPieces) {
allDone(true);
}
}
Tidying Up
Since we are tracking auto-solves, the very first thing allDone() does, before performing the clean-up statements, is check to see if an auto-solve is in progress. If one is, it is cancelled by clearing the timer (flashTimer) that calls visToggle() and enables looping back to solve(). Then isSolved is set to false to reflect the change, and allDone() proceeds.
function allDone(solved){
if (isSolving) {
isSolving = false;
clearInterval(flashTimer);
}
for (i=1; i<=puzzPieces; i++) {
tempEl = eval("PIECE" + i);
tempEl.draggable = false;
tempEl.showIt(false);
}
isBroken = false;
if (isGrid) {elGrid.showIt(false)}
elBlank.showIt(false);
if (isPuzzDraggable) {
elPuzzle.draggable = true;
if (IE4) {elImage.style.cursor = "move"}
}
solvedCount = 1;
if (solved) {
if (NS4) {document.releaseEvents(Event.MOUSEDOWN)}
tempEl = elImage;
flashTimer = setInterval("visToggle(false)",100);
}
}
If the puzzle is completely solved, the mousedown capture is released for Navigator, to be re-enabled, as we have seen, only when the mouse passes over the image or the puzzle is once again broken.
The Toggle Buttons
function gridToggle() {
if (isGrid) {
elGrid.showIt(false);
if (IE4) {
elImGrid.style.width = elImGrid.style.height = 1;
}
gridBut.value = "Grid OFF";
}
else { setGrid() };
isGrid = !isGrid;
}
function dragToggle() {
isPuzzDraggable = !isPuzzDraggable;
if (!isBroken) { elPuzzle.draggable = !elPuzzle.draggable };
if (isPuzzDraggable) {
if (IE4) { elImage.style.cursor = "move" };
dragBut.value = "Drag ON";
}
else {
if (IE4) { elImage.style.cursor = "default" }
dragBut.value = "Drag OFF";
}
}
Before we reproduce the complete code, let's take a quick look at the drag script.
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.
Created: Dec. 17, 1997
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column11/puzzCBmisc.html
