WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / experts / dhtml / column11

The DHTML Lab Jigsaw Puzzle, Part IV: Cross-Browser
SPECIAL EDITION; the director's cut 2/3

Comments

The two external scripts can be downloaded as a zip file.

The Main Puzzle Script (puzzExt.js)

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 = " ";

imageSelected = false;
isSolving = false;

function whenLoaded() {
    loadCount++; 
    if (loadCount < loadTotal) { return };

    if (NS4) { initNS4() }
        else { initIE4() }

    if (isPuzzDraggable) {
        elPuzzle.draggable = true;
    if (IE4) { elImage.style.cursor = "move"}
    }
    else {
        elPuzzle.draggable = false;    
        dragBut.value = "Drag OFF";
    }

    elPuzzle.showIt = elGrid.showIt = elBlank.showIt = elImage.showIt = elControls.showIt = showIt;
    elPuzzle.clipLeft = elPuzzle.clipTop = 0;
    initPuzz("firstPic");
}

function initNS4(){
    elPuzzle = document.elPuzzle;
    elBlank = elPuzzle.document.elBlank;
    elGrid = elPuzzle.document.elGrid;
    elImage = elPuzzle.document.elImage;
    elControls = elPuzzle.document.elControls;

    gridImage = elGrid.document.images["imGrid"];
    puzzImage = elImage.document.images["imOrig"];

    gridBut = elControls.document.fmControls["gridBut"];
    dragBut = elControls.document.fmControls["dragBut"];
  
    elImage.onmouseover = overImage;
    elImage.onmouseout = outImage;
}

function overImage() {
    if (!isPuzzDraggable) {return};
    imageSelected = true;
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown = grabEl;
    
}

function outImage() {
    imageSelected = false;
    document.releaseEvents(Event.MOUSEDOWN);
}

function initIE4(){
    dragBut = document.fmControls["dragBut"];
    gridBut = document.fmControls["gridBut"];
    puzzImage = elImOrig;    
    elControls.style.textAlign = "center";
}

function showIt(on){
    if (IE4) {this.style.visibility = (on) ? "visible" : "hidden"}
        else {this.visibility = (on) ? "show" : "hide"}
}

function initPuzz(whichIm) {
    isNewPuzz = true;
    if (isBroken) {allDone(false)};

    changeImage(whichIm);

    elPuzzle.showIt(true);
    isCreated = false;
    pieceToSolve = 1;
}

function changeImage(whichIm) {
    if (whichIm != "firstPic") {
        imStr = "<IMG NAME='imOrig' ID='elImOrig' SRC=" + whichIm + ">";
        if (NS4) {
            elImage.document.write(imStr);
            elImage.document.close();
        }
        else {
            elImage.innerHTML = imStr;
            elImOrig.onload = shapeIt;
            return;
        }
    }
    shapeIt();    
}

function shapeIt() {

    if (IE4) puzzImage = elImOrig;
    
    puzzWidth =  puzzImage.width;
    puzzHeight =  puzzImage.height;

    if (NS4) {
        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;
    }
    else {
        elControls.style.pixelTop = puzzHeight + (bordWidth*2);  
        elControls.style.width = puzzWidth;

        elPuzzle.style.width = puzzWidth + (bordWidth*2);        
        elPuzzle.style.height = puzzHeight + (bordWidth*3) + elControls.offsetHeight;
        elPuzzle.style.pixelLeft = (document.body.clientWidth-elPuzzle.style.pixelWidth)/2;
    }
}

function createPieces(){
    puzzPieces = puzzAcross * puzzDown;
    if (puzzPieces > piecesCreated) {
        makeStart = piecesCreated+1;
        for(i=makeStart; i<=puzzPieces; i++) {
            window.status = "Creating puzzle piece... " + i;
            if (IE4) {                 
                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);
}

function createPuzzle() {
    if (!isCreated) { createPieces() };
    pieceWidth = puzzWidth/puzzAcross;
    pieceHeight = puzzHeight/puzzDown; 

    while (pieceCount<=puzzPieces) {
        pixT = topCount * pieceHeight;
        pixB = (topCount + 1) * pieceHeight;
        for (i=1; i<=puzzAcross; i++) {
            window.status="Clipping image for piece... " + pieceCount;
            tempEl = eval("PIECE" + pieceCount);
            if (IE4) {
                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<=puzzPieces; i++) {
        putL = getRandNums(startL,endL);
        putT = getRandNums(startT,endT);

        tempEl = eval("PIECE" + i);
        tempEl.draggable = true;

        if (IE4) {
            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;
    }
}

function getRandNums(from,to){
    temp = parseInt((Math.random() * (to-from)) + (from));
    while (isNaN(temp)) {
        temp = parseInt((Math.random() * (to - from)) + (from))
    }
    return temp
}

function setGrid() {
    gridWidth = (9/puzzAcross) * puzzWidth;
    gridHeight = (9/puzzDown) * puzzHeight;

    if (IE4) {
        elImGrid.style.width = gridWidth;
        elImGrid.style.height = gridHeight;
        elGrid.style.clip = "rect(0 " + puzzWidth + sp + puzzHeight + " 0)";
    }
    else {
        elGrid.document.write("<IMG NAME='imGrid' SRC='grid.gif' WIDTH=" + gridWidth + " HEIGHT=" + gridHeight + ">");
        elGrid.document.close();
        elGrid.clip.right = puzzWidth;
        elGrid.clip.bottom = puzzHeight;
    }

    gridBut.value = "Grid ON";

    if (isBroken) { elGrid.showIt(true) }
}

function preSolve(isFullSolve) {
    if (isSolving || !isBroken || isNewPuzz) { return };
    solve(isFullSolve);    
}

function solve(isFullSolve) {
    if (pieceToSolve > puzzPieces) { pieceToSolve = 1; return }

    isSolving = (isFullSolve) ? 1 : 0;

    tempEl = eval("PIECE" + pieceToSolve);
    if (tempEl.draggable){
        if (tempEl != activeEl ) {
        if (IE4) {tempEl.style.zIndex = activeEl.style.zIndex + 1}
            else {tempEl.moveAbove(activeEl)}
            activeEl = tempEl;
        }
        flashTimer = setInterval("visToggle(" + isFullSolve + ")",100);
    }
    else { pieceToSolve++; solve(isFullSolve) };
}

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);
    }
}

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);
    }
}

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";
    }
}

Go on to the puzzle drag script.

Produced by Peter Belesis and

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

All Rights Reserved. Legal Notices.
Created: Dec. 17, 1997
Revised: Jan. 18, 1998

URL: http://www.webreference.com/dhtml/column11/allCode2.html