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..