jQuery centering (outerWidth issue): same code another result

80 views Asked by At

In HTML I've created title which I want to center horizontal by using position absolute (because it has to fall over a another element).

I'll use the following code on document ready

$('.content').find('.title').each( function() {
   var h = $(this).find('h1');
   h.css('marginLeft', -(h.outerWidth()/2));
});

While I log the <h1> it outputs 232px (in this case), while the real output should be 242px. The outerWidth is only incorrect at titles executed with the following PHP code:

echo (strlen($title) > 20 ? substr($title, 0, 20) . ".." : $title);

The same jQuery code as shown above is executed on window resize. The result of outerWidth when the browser resizes is also logged and, correct!

So I'll tried to create sort of hack by adding $(window).resize(); to the document ready, but this didn't work.

In this Stack Overflow question I'll found that to run jQuery after PHP window load must be used. But adding $(window).resize(); or the full jQuery replacing code to the window load are both not working..

0

There are 0 answers