CODEWITHSUNDEEP
javascriptjqueryonclick
Briz
Briz

Reputation: 175

Tiles not always clicked first time

I've got an isometric map with selectable tiles. Where the tiles become "highlighted" when they are clicked on, and return to normal when a different tile is clicked. This is done by changing the background image to one of a highlighted looking tile.

However, I noticed that the tiles do not always recognize that they were clicked on the first click. For example, when first starting, clicking on the tile closest to the screen will usually not do anything. Clicking on it again or even three times will finally make it change color, but this multiple click requirement is still present when trying a different tile. Eventually the tiles will change after one click, OR if the mouse press is held down for a second on the tile before releasing.

In the example below, you can see my tile click event handler. Simply search for "TODO" in the JS code. The problem is likely because there are two tile click events. Can this problem be fixed?

http://jsfiddle.net/briz/jdhPW/8/

I recommend you test out clicking on the first row of tiles. The tiles have the transparent pixels around them, so it's easy to think you're clicking a tile in the middle when your mouse is still registering the tile around it. You can see which tile is currently "active" by it becoming slightly transparent when hovered over.

EDIT I found a solution! I can register the tiles beforehand by calling it like this:

$.fn.gameMap.tileInfo = function(tile,x,y) 
    {
        // Registers each tile with their unique id
        tile.id = obj.attr('id') + '_tile_' + x + '_' + y;

        // When the tile gets clicked
        tile.click(function() 
        {
                        .....
        }

Then there is only a single instance of the click event, and it works on the first click every time

Upvotes: 0

Views: 201

Answers (1)

John Kalberer
John Kalberer

Reputation: 5790

I went and cleaned up the code a bit using more jQuery than in your original.

$.fn.gameMap.tileInfo = function(tile,x,y) {
    // When the tile gets clicked
    tile.click(function() {
        // When the tile gets clicked again?
        var regularTile = "url(http://i244.photobucket.com/albums/gg10/brizthewhitedragon/WorkTilesWatermark.png)";
        $(".content .tile").css("background-image", regularTile);
        // Makes the tile apparently selected
        var selectedTile = "url(http://i244.photobucket.com/albums/gg10/brizthewhitedragon/WorkTilesSelected.png)";
        tile.css("background-image", selectedTile);
    });
};

Even better would be to simply add a click event to the tiles like this since it binds them all at once (although you would have to restructure your code a bit...):

var tiles = $(".content .tile").click(function() {
    // When the tile gets clicked again?
    var regularTile = "url(http://i244.photobucket.com/albums/gg10/brizthewhitedragon/WorkTilesWatermark.png)";
    tiles.css("background-image", regularTile);
    // Makes the tile apparently selected
    var selectedTile = "url(http://i244.photobucket.com/albums/gg10/brizthewhitedragon/WorkTilesSelected.png)";
    tile.css("background-image", selectedTile);
});

Upvotes: 1

Related Questions