调整浏览器屏幕大小正在弄乱我的div偏移量

Question

I am currently creating a mahjong game. The game is as good as complete. Everything worked fine until I decided to put the game in a div ( div id="holder" ) to make sure it will be centered in the browser window.

What happens?

Step 1: Resize you browser window so it matches the games size (so no white border on the left or on the right. Note: The problem also applies when adding more space to the top, but in this demo it is not possible to adjust this.

Step 2: Click: Click to Start , the game will start and then click any HINT button. You will see a nr appearing above the button you've just clicked, it moves up, and disappears. This nr is positioned correct and should always appear in the middle just above the HINT button you've clicked.

Step 3: Now resize your browser window, give the game (let's say) 2cm of white space on the left and on the right.

Step 4: Now click another HINT button. Notice the nr is appearing, but NOT in the middle and above the HINT button anymore, but 2cm to the right.

So what is happening? My guess is that the offset of the div ( div class="score" ), which contains the nr, includes the white space to its offset (or something like this).

This is something I obviously don't want! But I have no clue of how to fix this...

Some code snippets:

The DIV's CSS:

#holder {
    width: 940px; 
    margin: auto auto;
}
.score {
    display: none;
    pointer-events: none;
    position: absolute;
    font-size: 1em;
    text-align: center;
    color:#FFF;
    z-index: 1;
}

The JS-part (using jQuery):

var offset = $(this).hide(500).offset();
var penalty = Math.round(score * -0.10);  //calculates a score penalty
score += penalty; //this is the result
$('.sc').text(score); //this is needed elsewhere in the script
$('.score') //start of showing the div and it's animation
      .show()
      .text(penalty)
      .css({
          top: offset.top - $('.score').height() - 90,
          left: offset.left,
          width:'3.5em'
      })
      .stop()
      .delay(100)  
      .animate({top: offset.top - $('.score').height() - 140},700)
      .hide(0); 
 ...some more code here, not relevant to this

If more code is needed, please let me know, but I think this is sufficient. Hope this problem can be solved!

Kind regards

Answer 1

in your holder css add position:relative;

#holder {
    width: 940px; 
    margin: auto auto;
    position: relative;
}

see if that fixes it.

Answer 2

When is the offset variable calculated? It should be stored when the hint is clicked.

What happens it you take the offset from before the hide?

var offset = $(this).offset().hide(500);

Answer 3

I think I have found it. IN my CSS I have another div:

#s0 {
    position: relative;
    float: left; 
    height: 570px;
    width: 760px;
    background: #222 url('images/bg.png');
}

Removing: position: relative; seems to fix it. Will do some more testing. All thanks for you suggestions!