2017-04-11 28 views
-1

要素の埋め込みを計算し、それをresizeに追加します。今、私はページの読み込みにも追加したいと思います。どうやってやるの? JavaScriptでページの読み込みとサイズ変更に埋め込みを追加

<body onload="resize()"> 

Live demo

$(window).resize(function() { 
    var widthWindow = $(window).width(); 
    var widthContainer = $("#container").width(); 
    var calculatePadding = (widthWindow - widthContainer)/2; 
    $("#container").css({ 
     "padding-top":calculatePadding, 
     "padding-bottom":calculatePadding 
    }); 
}).resize(); 
+0

あなたは要素を中央しようとしていますか? – Neil

+0

'$(function(){/ * here...*}};' –

+0

の中に関数を置くいいえ、私は要素を中央に配置したくありません。コードはうまく動作し、私はちょうどそれもページの読み込み(サイズ変更の上に)を実行したい。 – didi

答えて

0

あなたはそれをこのように行うことができます

function resize(){ 
    //write your stuff here 
} 

(OR)jQueryの道を

$(document).ready(function(){ 
    resize(); 
}); 
0

だけloadイベントにハンドラをバインドします

var handler = function() { 
    var widthWindow = $(window).width(); 
    var widthContainer = $("#container").width(); 
    var calculatePadding = (widthWindow - widthContainer)/2; 
    $("#container").css({ 
     "padding-top":calculatePadding, 
     "padding-bottom":calculatePadding 
    }); 
}; 

$(window).resize(handler) 
$(window).load(handler) 

それとももう少しエレガントに私の意見では:

$(window).on('load, resize', handler) 
+0

ありがとうございますが動作しません。最新のライブデモを確認してください。 – didi

+0

私の解決策はうまくいきます。 https://jsfiddle.net/4xjdopc9/1/ –

+0

それはまったく動作しません...変です。あなたはどのブラウザですか?私はGoogle Chromeのバージョン57.0.2987.133 – didi

関連する問題