CODEWITHSUNDEEP
javascriptjquery
Milo-J
Milo-J

Reputation: 1108

Directing animation to correct place

In my word game there is a grid with 3 letter words.

The aim of the game is to spell the words by clicking on the corresponding letters on the side.

When an area in the grid is highlighted it indicates to the user the word to spell. The user clicks the letters on the side of the grid and they should move to the highlighted area.

I have recently changed "drop-box" to a div in the following piece of code and now the animation takes the letter to the top corner of the grid before taking it to the correct position.

    var row = '<tr>';
    var spaceAvailInRow = numLetters;
    while (spaceAvailInRow) {
        var word = getWordToFitIn(spaceAvailInRow, unusedShuffledWords);
        guesses[word] = [];
        spaceAvailInRow -= word.length;

        for (var k = 0; k < word.length; ++k) {
            row += '<td data-letter="' + word[k] + '" data-word="' + word + '"><div class="drop-box"></div></td>';
        }
    }
    row += '</tr>';

    tbl.append(row);
}

$(".container").append(tbl);

Can someone tell me why the animation has broke now I have changed this?

Fiddle: http://jsfiddle.net/7Y7A5/27/

Upvotes: 0

Views: 46

Answers (1)

MassivePenguin
MassivePenguin

Reputation: 3711

The problem is that position() gets an element's position relative to its (offset) parent - in your case, each drop-box div is positioned at 0,0 releative to its containing td. What you need is the containing td's position(), not the drop-box's.

I've changed things around a little, and the fiddle can be seen here: http://jsfiddle.net/mHDkV/1/

I've changed the targetPos variable to refer to the position of the parent td, and applied the occupied class to that td as well. Take a look though the code in the jsFiddle - it should hopefully make sense.

Upvotes: 1

Related Questions