After exhaustively console logging my code, I have finally identified the issue:
I am attempting to determine the pixel width of some nested divs, and everywhere I look suggests that jQuery's .width() method should solve the problem. The complication arises when, upon page refresh, it returns the percentage value of the div width (as defined in the CSS). However, after triggering the window resize event, .width() begins returning the pixel width!
Here is a simplified version of my HTML:
<div id="hud">
<div class="character-position active" id="character-position-1" data-character-name="Character 1">
<div class="character-tag" data-position="left">
</div>
</div>
<div class="character-position active" id="character-position-2" data-character-name="Character 2">
<div class="character-tag" data-position="right">
</div>
</div>
</div>
The relevant CSS:
#hud {
position: relative;
width: 100%;
}
.character-position {
position: absolute;
width: 65%;
}
#character-position-1 {
left: 0%
}
#character-position-2 {
left: 39%
}
.character-tag {
position: absolute;
width: 22%;
}
And the JavaScript (all within the jQuery ready function):
$(window).resize(resizeLocationComponent);
function resizeLocationComponent() {
var windowWidth = $(window).width();
$('#hud').css('height', ((windowWidth - 8) * 0.5625) + 'px');
positionHudElements();
}
positionHudElements = function() {
var windowWidth = $(window).width();
$characterPositions = $('.character-position.active');
$.each($characterPositions, function(index) {
var $tag = $(this).find('.character-tag');
console.log("character position of "+$(this).attr('data-character-name')+" = "+$(this).css('left')+", "+$(this).css('top'));
var percentX = parseInt($(this).css('left').replace('%', ''));
var percentY = parseInt($(this).css('top').replace('%', ''));
var windowHeight = windowWidth * 0.5625;
var positionX = (percentX * windowWidth) / 100;
var positionY = (percentY * windowHeight) / 100;
var positionWidth = $(this).width();
var tagWidth = $tag.width();
var headSideOffset = parseInt(positionWidth * 0.35);
console.log("windowWidth = "+windowWidth);
console.log("character position of "+$(this).attr('data-character-name')+" = "+positionX+", "+positionY);
console.log("characterPosition.width() = "+positionWidth);
console.log("headSideOffset = "+headSideOffset);
console.log("$tag.width() = "+tagWidth);
var xOffset = 0;
if ($tag.attr('data-position')=="left") {
xOffset = headSideOffset - tagWidth;
$tag.css('left', xOffset+'px');
} else {
xOffset = headSideOffset - tagWidth;
$tag.css('right', xOffset+'px');
}
console.log("xOffset = "+xOffset);
});
}
The positionHudElements function is invoked on page load as well so the issue is not that it does not get called until the resize event. I can see where the function is called in my code and I observe the console logs from the positionHudElements function when the page is refreshed.
Any thoughts on why .width() would return CSS percentages before window resize and then switch to pixel widths afterward?
Thank you.