locked
site is undefined RRS feed

  • Question

  • User-605499000 posted

    When I go to a browser I can open up my site but on my site when I press issues I get site is undefined. This file is JavaScript and has pages with games on it.  There are 4 JavaScript programs and I was able to fix 3 of the files but the last file a puzzle file is still not working.  In order to get to the JavaScript file I have to press okay and then again after reading don't let this page create new messages.  I press f12 and no errors . I check the games and they are all working but I know that it is a problem in the puzzle file.  I guess a var is missing but I tried to put it in. 

    Below is the file and it has worked for years but I know that updates have happened and do I need a variable?

    function DynamicDiv(containerObj, zIndex) {      (*I put this function and the next one in as they fixed the other programs)
    this.containerObj = containerObj;
    this.zIndex = zIndex;
    }

    function Movime(containerObj, zIndex) {
    this.containerObj = containerObj;
    this.zIndex = zIndex;
    }

    Puzzle = function (containerObj, columns, rows, folder, pieceWidth, pieceHeight, snapDistance, zIndex) {  (* do I need a var for this puzzle?)
    this.containerObj = containerObj;
    this.columns = columns;
    this.rows = rows;
    this.folder = folder;
    this.pieceWidth = pieceWidth;
    this.pieceHeight = pieceHeight;
    this.snapDistance = snapDistance;
    this.zIndex = zIndex;
    this.SHADOW_SIZE = 1;
    this.pieces = new Array();
    this.shadows = new Array();
    this.dynamicDivs = new DynamicDiv(this.containerObj, this.zIndex);
    this.movime = new Movime(10);

    this.Initialize();
    };


    Puzzle.prototype.Initialize = function () {
    for (var row = 0; row < this.rows; row++) {
    for (var column = 0; column < this.columns; column++) {
    var pieceNumber = row * this.columns + column + 1;

    var left = (parseInt((this.containerObj).style.width) - this.columns * this.pieceWidth) / 2 + column * this.pieceWidth;
    var top = (parseInt((this.containerObj).style.height) - this.rows * this.pieceHeight) / 2 + row * this.pieceHeight;


    var shadow = this.dynamicDivs.Insert(0, "", "", left - this.SHADOW_SIZE, top - this.SHADOW_SIZE, this.pieceWidth + this.SHADOW_SIZE * 2, this.pieceHeight + this.SHADOW_SIZE * 2, "", "", "");
    shadow.style.display = "block";
    shadow.style.backgroundColor = "#777777";

    this.shadows[pieceNumber - 1] = { obj: shadow, column: column, row: row, group: (this.zIndex + pieceNumber) };

    var piece = this.dynamicDivs.Insert(0, "", "", left, top, this.pieceWidth, this.pieceHeight, "", "", "");
    piece.style.cursor = "pointer";
    piece.style.display = "block";
    piece.style.backgroundImage = "url(" + this.GetFileName(pieceNumber) + ")";

    var thisClass = this;

    piece.onmousedown = function () {
    thisClass.BringToFront(this);
    BmInitDragAndDrop(this, thisClass);
    };

    piece.onmouseup = function () {
    BmEndDragAndDrop(this);
    thisClass.SnapPieces(this);
    };

    this.pieces[pieceNumber - 1] = { obj: piece, column: column, row: row, group: (this.zIndex + pieceNumber) };
    }
    }

    this.Shuffle();
    };

    Puzzle.prototype.Count = function () {
    return (this.columns * this.rows);
    };

    Puzzle.prototype.MovePiece = function (obj, left, top) {
    if (this.containerObj === null || obj === null)
    return false;

    var containerWidth = parseInt((this.containerObj).style.width) - parseInt(obj.style.width);
    var containerHeight = parseInt((this.containerObj).style.height) - parseInt(obj.style.height);

    if (left < 0 + this.SHADOW_SIZE) left = this.SHADOW_SIZE;
    if (top < 0 + this.SHADOW_SIZE) top = this.SHADOW_SIZE;
    if (left > containerWidth - this.SHADOW_SIZE) left = containerWidth - this.SHADOW_SIZE;
    if (top > containerHeight - this.SHADOW_SIZE) top = containerHeight - this.SHADOW_SIZE;

    var offsetX = left - parseInt(obj.style.left);
    var offsetY = top - parseInt(obj.style.top);

    var group = this.GetGroup(obj);
    this.MoveGroupPieces(group, offsetX, offsetY);
    };

    Puzzle.prototype.MovePiece2 = function (obj, left, top) {
    if (this.containerObj === null || obj === null)
    return false;

    var group = this.GetGroup(obj);
    var groupArea = this.GetGroupArea(group);

    var newContainerX1 = parseInt(obj.style.left) - groupArea.x1;
    var newContainerY1 = parseInt(obj.style.top) - groupArea.y1;
    var newContainerX2 = parseInt((this.containerObj).style.width) - (groupArea.x2 - parseInt(obj.style.left));
    var newContainerY2 = parseInt((this.containerObj).style.height) - (groupArea.y2 - parseInt(obj.style.top));

    if (left < newContainerX1 + this.SHADOW_SIZE) left = newContainerX1 + this.SHADOW_SIZE;
    if (top < newContainerY1 + this.SHADOW_SIZE) top = newContainerY1 + this.SHADOW_SIZE;
    if (left > newContainerX2 - this.SHADOW_SIZE) left = newContainerX2 - this.SHADOW_SIZE;
    if (top > newContainerY2 - this.SHADOW_SIZE) top = newContainerY2 - this.SHADOW_SIZE;

    var offsetX = left - parseInt(obj.style.left);
    var offsetY = top - parseInt(obj.style.top);

    this.MoveGroupPieces(group, offsetX, offsetY);
    };

    Puzzle.prototype.MoveGroupPieces = function (group, offsetX, offsetY) {
    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].group === group) {
    (this.pieces[i].obj).style.left = (parseInt((this.pieces[i].obj).style.left) + offsetX) + "px";
    (this.pieces[i].obj).style.top = (parseInt((this.pieces[i].obj).style.top) + offsetY) + "px";
    }

    if (this.shadows[i].group === group) {
    (this.shadows[i].obj).style.left = (parseInt((this.shadows[i].obj).style.left) + offsetX) + "px";
    (this.shadows[i].obj).style.top = (parseInt((this.shadows[i].obj).style.top) + offsetY) + "px";
    }
    }
    };

    Puzzle.prototype.GetGroup = function (obj) {
    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].obj === obj)
    return this.pieces[i].group;
    }

    return -1;
    };

    Puzzle.prototype.GetGroupArea = function (group) {
    var areaX1 = 3000;
    var areaY1 = 3000;
    var areaX2 = 0;
    var areaY2 = 0;

    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].group === group) {
    var objX1 = parseInt((this.pieces[i].obj).style.left);
    var objY1 = parseInt((this.pieces[i].obj).style.top);
    var objX2 = objX1 + parseInt((this.pieces[i].obj).style.width);
    var objY2 = objY1 + parseInt((this.pieces[i].obj).style.height);

    if (objX1 < areaX1) areaX1 = objX1;
    if (objY1 < areaY1) areaY1 = objY1;
    if (objX2 > areaX2) areaX2 = objX2;
    if (objY2 > areaY2) areaY2 = objY2;
    }
    }

    return { x1: areaX1, y1: areaY1, x2: areaX2, y2: areaY2 };
    };

    Puzzle.prototype.BringToFront = function (obj) {
    var group = this.GetGroup(obj);

    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].group === group) {
    this.pieces[i].group = this.zIndex + this.Count();
    this.shadows[i].group = this.zIndex + this.Count();
    }
    else {
    if (this.pieces[i].group > group) {
    this.pieces[i].group--;
    this.shadows[i].group--;
    }
    }

    (this.pieces[i].obj).style.zIndex = this.pieces[i].group * 2;
    (this.shadows[i].obj).style.zIndex = this.shadows[i].group * 2 - 1;
    }
    };

    Puzzle.prototype.SnapPieces = function (obj) {
    if (this.IsPuzzleSolved())
    return;

    var group = this.pieces[this.GetPieceIndexByObj(obj)].group;

    for (var i = 0; i < this.Count(); i++) {

    if (this.pieces[i].group === group) {
    var obj1Array = i;
    var obj1 = this.pieces[i].obj;

    // Up
    if (this.pieces[obj1Array].row > 0) {
    var obj2Array = this.GetPieceIndexByLocation(this.pieces[obj1Array].column, this.pieces[obj1Array].row - 1);

    if (this.pieces[obj1Array].group !== this.pieces[obj2Array].group) {
    var obj2 = this.pieces[obj2Array].obj;
    var offSetX = parseInt(obj2.style.left) - parseInt(obj1.style.left);
    var offSetY = (parseInt(obj2.style.top) + parseInt(obj2.style.height)) - parseInt(obj1.style.top);

    if (Math.abs(offSetX) <= this.snapDistance && Math.abs(offSetY) <= this.snapDistance) {
    this.MoveGroupPieces(this.pieces[obj1Array].group, offSetX, offSetY);
    this.SetGroup(this.pieces[obj2Array].group, this.pieces[obj1Array].group);
    this.SnapPieces(obj);
    break;
    }
    }
    }

    // Left
    if (this.pieces[obj1Array].column > 0) {
    obj2Array = this.GetPieceIndexByLocation(this.pieces[obj1Array].column - 1, this.pieces[obj1Array].row);

    if (this.pieces[obj1Array].group !== this.pieces[obj2Array].group) {
    obj2 = this.pieces[obj2Array].obj;
    offSetX = (parseInt(obj2.style.left) + parseInt(obj2.style.width)) - parseInt(obj1.style.left);
    offSetY = parseInt(obj2.style.top) - parseInt(obj1.style.top);

    if (Math.abs(offSetX) <= this.snapDistance && Math.abs(offSetY) <= this.snapDistance) {
    this.MoveGroupPieces(this.pieces[obj1Array].group, offSetX, offSetY);
    this.SetGroup(this.pieces[obj2Array].group, this.pieces[obj1Array].group);
    this.SnapPieces(obj);
    break;
    }
    }
    }

    //Down
    if (this.pieces[obj1Array].row < this.rows - 1) {
    obj2Array = this.GetPieceIndexByLocation(this.pieces[obj1Array].column, this.pieces[obj1Array].row + 1);

    if (this.pieces[obj1Array].group !== this.pieces[obj2Array].group) {
    obj2 = this.pieces[obj2Array].obj;
    offSetX = parseInt(obj2.style.left) - parseInt(obj1.style.left);
    offSetY = parseInt(obj2.style.top) - (parseInt(obj1.style.top) + parseInt(obj1.style.height));

    if (Math.abs(offSetX) <= this.snapDistance && Math.abs(offSetY) <= this.snapDistance) {
    this.MoveGroupPieces(this.pieces[obj1Array].group, offSetX, offSetY);
    this.SetGroup(this.pieces[obj2Array].group, this.pieces[obj1Array].group);
    this.SnapPieces(obj);
    break;
    }
    }
    }

    //Right
    if (this.pieces[obj1Array].column < this.columns - 1) {
    obj2Array = this.GetPieceIndexByLocation(this.pieces[obj1Array].column + 1, this.pieces[obj1Array].row);

    if (this.pieces[obj1Array].group !== this.pieces[obj2Array].group) {
    obj2 = this.pieces[obj2Array].obj;
    offSetX = parseInt(obj2.style.left) - (parseInt(obj1.style.left) + parseInt(obj1.style.width));
    offSetY = parseInt(obj2.style.top) - parseInt(obj1.style.top);

    if (Math.abs(offSetX) <= this.snapDistance && Math.abs(offSetY) <= this.snapDistance) {
    this.MoveGroupPieces(this.pieces[obj1Array].group, offSetX, offSetY);
    this.SetGroup(this.pieces[obj2Array].group, this.pieces[obj1Array].group);
    this.SnapPieces(obj);
    break;
    }
    }
    }
    }
    }

    if (this.IsPuzzleSolved()) {
    this.Solve();
    Issue_PuzzleDone(this.folder);
    }
    };

    Puzzle.prototype.IsPuzzleSolved = function () {
    var isPuzzleSolved = true;
    var group = this.pieces[0].group;

    for (var i = 1; i < this.Count(); i++) {
    if (this.pieces[i].group !== this.pieces[0].group) {
    isPuzzleSolved = false;
    break;
    }
    }

    return isPuzzleSolved;
    };

    Puzzle.prototype.GetPieceIndexByObj = function (obj) {
    for (var i = 0; i < this.Count(); i++)
    if (this.pieces[i].obj === obj)
    return i;

    return -1;
    };

    Puzzle.prototype.GetPieceIndexByLocation = function (column, row) {
    for (var i = 0; i < this.Count(); i++)
    if (this.pieces[i].column === column && this.pieces[i].row === row)
    return i;

    return -1;
    };

    Puzzle.prototype.SetGroup = function (oldGroup, newGroup) {
    for (var i = 0; i < this.Count(); i++) {
    if (this.pieces[i].group === oldGroup) {
    this.pieces[i].group = newGroup;
    (this.pieces[i].obj).style.zIndex = this.pieces[i].group * 2;

    this.shadows[i].group = newGroup;
    (this.shadows[i].obj).style.zIndex = this.shadows[i].group * 2 - 1;
    }
    }
    };

    Puzzle.prototype.Shuffle = function () {
    if (this.movime.animating)
    return;

    for (var i = 0; i < this.Count(); i++) {
    this.pieces[i].group = this.zIndex + i;
    this.shadows[i].group = this.zIndex + i;

    var left = Math.floor(Math.random() * (parseInt((this.containerObj).style.width) - parseInt((this.pieces[i].obj).style.width)) - this.SHADOW_SIZE * 2);
    var top = Math.floor(Math.random() * (parseInt((this.containerObj).style.height) - parseInt((this.pieces[i].obj).style.height)) - this.SHADOW_SIZE * 2);

    var pOffsetX = (left + this.SHADOW_SIZE) - parseInt((this.pieces[i].obj).style.left);
    var pOffsetY = (top + this.SHADOW_SIZE) - parseInt((this.pieces[i].obj).style.top);

    this.movime.Insert(this.pieces[i].obj, pOffsetX, pOffsetY, this.movime.MovimeLike.HalfCircle, 1000, false, false);

    //(this.pieces[i].obj).style.left = (left + this.SHADOW_SIZE) + "px";
    //(this.pieces[i].obj).style.top = (top + this.SHADOW_SIZE) + "px";

    (this.pieces[i].obj).style.zIndex = this.pieces[i].group * 2;

    this.movime.Insert(this.shadows[i].obj, pOffsetX, pOffsetY, this.movime.MovimeLike.HalfCircle, 1000, false, false);

    //(this.shadows[i].obj).style.left = (left) + "px";
    //(this.shadows[i].obj).style.top = (top) + "px";

    (this.shadows[i].obj).style.zIndex = this.shadows[i].group * 2 - 1;
    }

    this.movime.Start();
    };

    Puzzle.prototype.Solve = function () {
    if (this.movime.animating)
    return;

    for (var i = 0; i < this.Count(); i++) {
    var left = (parseInt((this.containerObj).style.width) - this.columns * this.pieceWidth) / 2 + this.pieces[i].column * this.pieceWidth;
    var top = (parseInt((this.containerObj).style.height) - this.rows * this.pieceHeight) / 2 + this.pieces[i].row * this.pieceHeight;

    var pOffsetX = left - parseInt((this.pieces[i].obj).style.left);
    var pOffsetY = top - parseInt((this.pieces[i].obj).style.top);

    this.movime.Insert(this.pieces[i].obj, pOffsetX, pOffsetY, this.movime.MovimeLike.HalfCircle, 1000, false, false);
    this.movime.Insert(this.shadows[i].obj, pOffsetX, pOffsetY, this.movime.MovimeLike.HalfCircle, 1000, false, false);
    }

    this.movime.Start();
    };

    Puzzle.prototype.GetFileName = function (value) {
    if (this.folder.indexOf("Issue") >= 0)
    return this.folder + (value < 100 ? "0" : "") + (value < 10 ? "0" : "") + value + ".jpg";
    else
    return "Issue001/Games/" + this.folder + "/Piece-" + (value < 100 ? "0" : "") + (value < 10 ? "0" : "") + value + ".jpg";
    };

    I hope you can help me,  I did check all the browsers and they seem fine.  Everything I read says it's a JavaScript problem.

    Thanks Jen

    Tuesday, October 15, 2019 10:19 PM

All replies

  • User665608656 posted

    Hi bumples18,

    According to your description, I don't know what your specific issue is. The site you mentioned is undefined, what does the site represent here? I didn't find the corresponding name in your js code.

    And I can't test the JS code you provided, because I don't know where your JS code entry is. For example, which method called by window.location in your js code?

    Puzzle = function (containerObj, columns, rows, folder, pieceWidth, pieceHeight, snapDistance, zIndex) {  (* do I need a var for this puzzle?)

    For this question, you can try to add var to it, and then test to see if you can meet your requirements.

    However, I suggest you can use F12 tool to break the point to debug your js code step by step.

    This is a tutorial to teach you how to debug JS code, you could refer to it:

    Get Started with Debugging JavaScript in Chrome DevTools

    Best Regards,

    YongQing.

    Wednesday, October 16, 2019 6:55 AM