html - Jquery div not centering on page refresh -
i using following script centre main content div in centre of viewing area, appears work fine on page load or page resize, when page refreshed content div drops left hand side of page.
the problem can seen here upon pressing refresh :
http://www.twin-focus-photography.co.uk/
<script> $(document).ready(function(){ var positioncontent = function () { var width = $(window).width(); // window width var height = $(window).height(); // window height var containerwidth = $('.container').outerwidth(); // container div width var containerheight = $('.container').outerheight(); // container div height $('.container').css({position:'absolute', left: ($(window).width() - $('.container').outerwidth())/2, top: ($(window).height() - $('.container').outerheight())/2 }); }; //call when window first loads $(document).ready(positioncontent); //call whenever window resizes. $(window).bind('resize', positioncontent); }); </script> edit >>>>>>>>>>>
ok have edited now, per of suggestions , looks :
<script> $(document).ready(function(){ var positioncontent = function () { var width = $(window).width(); // window width var height = $(window).height(); // window height var containerwidth = $('.container').outerwidth(); // container div width var containerheight = $('.container').outerheight(); // container div height $('.container').css({position:'absolute', left: ($(window).width() - $('.container').outerwidth())/2, top: ($(window).height() - $('.container').outerheight())/2 }); } }); $(document).ready(function(){ //call when window first loads $(document).ready(positioncontent); //call whenever window resizes. $(window).bind('resize', positioncontent); }); </script> this still wont work on refresh though, if resize page......it works, on first load.......it works, hit f5 , slumps left , stays there.
that works fine. since wrote code in document.ready, centres main content after loading page. if want work before complete load, have use css.
Comments
Post a Comment