次のスクリプトを使用して、メイン コンテンツ div を表示領域の中央に配置しています。これは、ページの読み込みまたはページのサイズ変更では問題なく機能するように見えますが、ページが更新されると、コンテンツ div が画面の左側にドロップします。ページ。
refresh を押すと、次のように問題が発生します。
http://www.twin-focus-photography.co.uk/
<script>
$(document).ready(function(){
var positionContent = function () {
var width = $(window).width(); // the window width
var height = $(window).height(); // the window height
var containerwidth = $('.container').outerWidth(); // the container div width
var containerheight = $('.container').outerHeight(); // the container div height
$('.container').css({position:'absolute',
left: ($(window).width() - $('.container').outerWidth())/2,
top: ($(window).height() - $('.container').outerHeight())/2 });
};
//Call this when the window first loads
$(document).ready(positionContent);
//Call this whenever the window resizes.
$(window).bind('resize', positionContent);
});
</script>
編集 >>>>>>>>>>>
わかりました、いくつかの提案に従って、今編集しました。今では次のようになります。
<script>
$(document).ready(function(){
var positionContent = function () {
var width = $(window).width(); // the window width
var height = $(window).height(); // the window height
var containerwidth = $('.container').outerWidth(); // the container div width
var containerheight = $('.container').outerHeight(); // the container div height
$('.container').css({position:'absolute',
left: ($(window).width() - $('.container').outerWidth())/2,
top: ($(window).height() - $('.container').outerHeight())/2 });
}
});
$(document).ready(function(){
//Call this when the window first loads
$(document).ready(positionContent);
//Call this whenever the window resizes.
$(window).bind('resize', positionContent);
});
</script>
ただし、これはまだ更新時に機能しません。ページのサイズを変更すると...機能し、最初のロード時に...機能し、f5を押すと、左に落ちてそこにとどまります。