jquerycssresizewindow-resizewindow-load

jQuery - Can't calculate element width on page load?

I'm doing some work on the active navigation indicator arrow on my personal site: http://staging.rjlacount.com

The problem: Navigation indicator arrow will not center under the active item on page load, but will on window resize.

The code I'm using to center the arrow (starting on line 80 of http://staging.rjlacount.com/js/functions.js) is as follows:

var $arrowOffset = 8;

var navArrowCenter = function() {
  var $current_page_item = $(".current_page_item a");
  $arrow
    .css("left", $current_page_item.position().left + ( ($current_page_item.width() / 2) - $arrowOffset) );
};

$wind.resize(function() {
    navArrowCenter();
});

$wind.load(function() {
    navArrowCenter();
});

I have tried removing the page fade on load functionality, assuming it was causing jQuery to not be able to properly render the element width, but that does not seem to affect the issue at all.

Any point in the right direction would be much appreciated.

Thanks!

Solution

  • Have you tried removing it from the $(window).load()?

    Try this:

      navArrowCenter();

    Instead of:

    $wind.load(function() {
    navArrowCenter();
});