web-dev-qa-db-ja.com

jQueryでブラウザの幅/高さの変化を聞く

ページの準備ができたときに絶対位置（CSS）で設定されたいくつかのdivがあり、別の固定divに対して相対的に配置されています。ただし、ページが読み込まれてすべてが設定される前に、ページのサイズが変更された場合、それらの絶対divは変更に追従せず、他の場所に移動し、画面の上部と左側に相対的な値が与えられると思います。

絶対的なものを配置するための開始点として使用する相対divの位置も、その上のものと相対的に位置を変更する可能性があります。

ブラウザの幅/高さの変更をリッスンして、それらのdivが正しい位置に留まるようにする方法はありますか？.

前もって感謝します！

javascriptjqueryresizeheightwidth
30
yoda

最初に、ウィンドウのサイズ変更イベントを選択した関数にバインドすることから始めます。

$(window).on("resize", methodToFixLayout);

これで、新しい高さと幅を決定し、そこからページを調整できます。

function methodToFixLayout( e ) {
    var winHeight = $(window).height();
    var winWidth = $(window).width();
    //adjust elements css etc.....
    //$("#someDiv").css('someProperty',someValue based on winHeight and winWidth);
}

レイアウトの詳細がなければ、どのような変更が必要かを正確に判断することは困難ですが、これにより正しい方向に進むことができます。

81
rwilliams

ドキュメント全体ではなく、要素を別の要素に対して相対的に配置するだけの場合は、JavaScriptを使用する必要がない場合があります。 「position：relative」を使用できます。

<div id="myContainer" style="position:relative">

    <div id="myElement" style="position:absolute;left:100px;"></div>

</div>

MyContainerにはposition:relative、myElementは絶対的に配置されますが、ドキュメント全体に対してではなく、myContainerに対してrelativeが配置されます。これを武器に、非常に手の込んだ、しかし堅牢なポジションを構築できます。これは、ブラウザサイズに依存しません。

4
Rex M

Jquiウェブサイトからこのプラグインもあります。

http://www.jqui.net/jquery-projects/jquery-mutate-official/

ここにデモがあります： http://www.jqui.net/demo/mutate/

それが役に立てば幸い。

2
Val