jQuery offset issues with div overflow: scroll

Question

I am writing an HTML5 board game and I am having issues with jQuery's offset(). The grid of DIVs that make up the game board reside within a wrapper DIV that has CSS that sets overflow:scroll/width and height:100%. The game board itself is quite larger, so the scroll can be quite a bit horizontally and vertically.

The problem is that when I click on a DIV and try to move the player to that board piece, the player shifts around and is never in a consistent place relative to the board piece clicked.

Code:

$(".boardGridPiece").click(function(){
    if(!$(this).hasClass("room") && $(this).hasClass("eligibleMove")){
        playerStartX = $(this).offset().left;
        playerStartY = ($(this).offset().top;
        player.css("left", playerStartX);
        player.css("top", playerStartY);
        determineEligibleMoves($(this).attr("id"));
    }
});

You can see that when a board piece is clicked, the offset of the board piece is grabbed and set to the player's X and Y.

CSS:

#boardWrapper {
    position:relative;
    width:100%;
    height:80%;
    overflow: scroll;
}

#theGame {
    background-color: #fff;
    height: 1080px;
    width: 1920px;
}

Depending on where the player is relative to the current scroll view, when I click on a board piece he shifts around in a very inconsistent manner. Sometimes he's far left of where I click, or far up, etc.

What am I doing wrong? How do I take into account relative scroll position to get consistent positioning?

first of all you have a typo there, ($(this).offset().top;. remove the first parentheses. It would be great if you could provide us a fiddle.. — Bla...
– Bla..., Commented Jun 17, 2015 at 3:33
I removed some bit of a code to simplify the question it originally was ($(this).offset().top - $(window).scrollTop()) + 400;, removing this does nothing — Eric
– Eric, Commented Jun 17, 2015 at 3:41
Well, I guess it's difficult for us to help you if don't provide us a fiddle. Because from your code above it looks okay. — Bla...
– Bla..., Commented Jun 17, 2015 at 3:44
Hope you don't mind a codepen instead, scroll down and to the right to get to the center of the board where the player(test images) is located. — Eric
– Eric, Commented Jun 17, 2015 at 3:47

Brian Tompsett - 汤莱恩 · Accepted Answer · 2015-06-24 17:58:39Z

Here's a board for you to play with as an example. Also, my stab at the jquery is included as well. Basically, it finds where you clicked, calculated the px distance in float form, and animates the soldier to slide to his new position:

var black = '<td style="background-color:black"><div class="boardGridPiece"></div></td>';
var white = '<td style="background-color:white"><div class="boardGridPiece"></div></td>';
var squares = [black, white];
var grid = "";
for (var i = 0; i < 9; i++) {
    grid += "<tr>";
    for (var j = 0; j < 16; j++) {
        grid += squares[(i + j) % 2];
    }
    grid += "<\tr>";
}
$('#gameboard').append(grid);
var gridSelected = $('#gameboard').find('tr:nth-child(2)').find('td:first').find('div');
gridSelected.toggleClass('position');

$('.boardGridPiece').click(function () {
    $('.position').removeClass('position');
    var gridSelected = $(this);
    gridSelected.toggleClass('position');
    var thisBox = $('.position');
    var finalX = 0;
    var finalY = 0;
    for (var i = 0; i < 9.00; i++) {
        for (var j = 0; j < 16.00; j++) {
            var aBox = $('#gameboard').find('tr:nth-child(' + (i + 1) + ')').find('td:nth-child(' + (j + 1) + ')').find('div');
            if (thisBox.get(0) == aBox.get(0)) {
                finalX = j + 1;
                finalY = i;
                i = j = 16; // soft break
            }
        }
    }
    var overX = (finalX * parseFloat(1920))/16.00;
    var downY = (finalY * parseFloat(1080))/9.00;
    $('#player').animate({ left: overX, top: downY });});

html {
    background-color:gray;
}
#gameboard {
    margin: 100px;
    height:1080px;
    width:1920px;
    border:1px solid black;
}

.boardGridPiece {
    height: 110px;
    width: 110px;
}

.position {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border: 1px solid red;
}

#player {
    position: absolute;
    top: 120px;
    left: 125px;
    height: 200px;
    width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="gameboard" style=""></table>
<img id="player" src="http://img2.wikia.nocookie.net/__cb20110819034426/halo/images/7/74/ODST_Helljumper.png" />

Awesome, thanks! I'll play with this today and reorg my code.

Collectives™ on Stack Overflow

jQuery offset issues with div overflow: scroll

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related