jQuery: .width() returns css-set percentage until window resize, then returns pixel width. Why?

Question

After console.logging the heck out of my code, I've finally established the problem:

I'm trying to establish the pixel width of some nested divs and everywhere is telling me jQuery's .width() should do the trick. Trouble is, on page refresh it returns the percentage value of the div width (as set in the css). When I then trigger the window resize event, .width() starts returning the pixel width!

Here's my (much simplified) 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 called on page load as well, so it's not that it doesn't get called until the resize event. I can see where the function is called in my code and I see the console logs from the positionHudElements function when the page is refreshed.

Any ideas why .width() would return css percentages prior to window resize and pixel widths after?

Thanks.

Answer 1

Check this code:

 function resizeLocationComponent() {
        var windowWidth = $(window).width();
      // $('#hud).css('height', ((windowWidth - 8) * 0.5625) + 'px');  You missed a inverted comma 
         $('#hud').css('height', ((windowWidth - 8) * 0.5625) + 'px');
        positionHudElements();
    }

U need to use

$('#hud').css('height', ((windowWidth - 8) * 0.5625) + 'px');