問題タブ [outerwidth]

これは、誤って閉じられた質問のやり直しです：jQuery1.8の外側の高さ/幅が機能しない

私は同じ問題にぶつかっています。outerWidthそしてouterHeight今、数字の代わりにjQueryオブジェクトを返します。

2012年1月10日にリリースされたjQueryUI1.8.17を使用しています。これは非常に古いバージョンではないため、他の人に見られると思います。いくつかのひどいjQueryuiプラグインのために、このバージョンにロックされているため、現在、アップグレードはオプションではありません。

解決策が見つかったら、この質問に答えます。

これが問題を示すフィドルですhttp://jsfiddle.net/delvarworld/yxDHu/（「リソースの管理」に追加されたjQuery UIバージョン）

更新：jQuery UIのこの行が原因です：

jQuery 1.8.2でこの条件を誤ってトリガーしています：

未定義ですsizeが、チェックは。のためarguments.lengthです。ここではchainableはfalseである必要があります。undefinedを渡すことができますが、それでも引数は長さ1のオブジェクトになります。誰かがJSを読み取る必要があります;）

div内にナビゲーションバー（トップメニュー）があります。メニューの幅が外側のdivの幅よりも大きい場合は、残りのメニュー要素を非表示にする必要があります。残念ながらoverflow:hidden、divには使用できません。そのため、 .outerWidth()関数を使用してdivの合計幅と各要素（li）の幅を計算し、オーバーフロー要素を非表示にします。だから私の問題は、firefox（19.0）、IE（8）！で正常に動作することですが、chromeでは動作しません。クロムでは、すべての要素が非表示になっています。変更すると問題は解決します

$(document).ready(function() {});に$(window).load(function() {});

しかし、その後、合計ulがほんの一瞬表示され、その後非表示になります（IE、FFは引き続き正常に機能します）。これに対するより良い解決策はありますか？または別のロジック。

サンプル

http://jsfiddle.net/RSA3X/4/

私の同様のケース

ビューポートが.container divよりも大きい場合にのみ、divにフォーマットを適用しようとしています。私は次のように書きましたが、Jquery がそれほど優れていないため、正しく実行できたかどうかはわかりません。

................................................................... ..

ここで js フィドルを作成しましたが、現在は機能しているようです。

http://jsfiddle.net/QgyPN/

アニメーションの後、次のリストの幅を新しくアニメーション化されたdivとまったく同じになるように設定し、これをその下に移動します。

奇妙なことに、サイズを変更すると、小さな幅にしかサイズ変更されず、もう一度クリックすると、ミリ秒の間必要なサイズになります。これは不明かもしれません。

ここにフィドルがあります

それで、画像全体の幅+名前バーのように見えるリストが欲しいのですが、それを正確にその下に移動したいと思います。

ありがとう！

編集1（問題をjsfiddleに減らしました）：

元の問題の不要な詳細を削除しました。

ポップアップをウィンドウの中央に配置しようとしています。元のコンテキストでの使用方法により、ポップアップの幅は動的になります。その唯一のコンテンツはテキストですが、そのテキストの長さはわかりません。ほとんどの場合、1 行に収まりますが、テキストが長く、ユーザーの画面解像度が低い場合は、2 行を占める必要がある場合があり、すべてのテキストを画面に表示したいと考えています。テキストは jsfiddle で静的であるため、明らかに問題の原因ではありません。ポップアップの幅を設定しようとしなかった理由を誰かが疑問に思っている場合に備えて、明確にしています。jquery を使用して、outerWidth() と $(window).resize() を使用して幅を取得し、ブラウザ ウィンドウのサイズが変更されたときにセンタリング機能をトリガーしています。

ポップアップの幅がそれを含む要素よりも小さい限り、うまく機能します。テキストが2行にならなければならないほど小さくされている場合、ポップアップがコンテナの全幅を取るようにしたいと思います。下のビデオでわかるように、ブラウザー ウィンドウのサイズを大幅に調整すると、幅が常に正しく報告されず、要素が中央に配置されずに左側にスペースができてしまいます。つまり、outerWidth() は、ブラウザーによってレンダリングされているものとは異なる幅を報告しています。

問題のデモについては、このビデオを参照してください: http://youtu.be/Tnq6nrrDKvw

これは、Firefox、Chrome、IE、Opera、および Safari で発生しています。おそらくjqueryのouterWidth関数の問題でしょう。あるいは、それがどのように機能するのかについて何かを理解していないのかもしれません。私がやろうとしていることを達成する別の方法はありますか?

ここにJavaScriptがありますが、それほど複雑ではありません:

唯一の重要な css は、ポップアップに position: fixed があり、幅や高さが設定されていないことです。ポップアップの幅を設定すると、本来のように左側にくっつきますが、テキストは右側の境界を超えて伸びます。画面上のすべてのテキストを保持し、必要に応じて全幅でテキストを次の行にジャンプさせたいと思います。幅が十分に狭くなったら、通知が表示領域の幅全体を占めるようにしたいだけです。

http://jsfiddle.net/dnag/qHjVG/5/

編集2（解決策）：

これは、私が得た助けのおかげで、最終的に使用したソリューションです。

http://jsfiddle.net/dnag/qHjVG/44/

ポップアップの位置を変更する代わりに、ポップアップは自動幅と表示: インライン ブロックのままになります。これらは、位置が固定された div 内に含まれています。ウィンドウのサイズが変更されると、それを含む div のサイズと位置が変更されます。関数の数値を変更することで、ウィンドウが縮小されたときにポップアップの外側に必要な水平スペースの量を指定できます。css のみでこれを行う方法があるかもしれませんが、現時点では機能するものがあることをうれしく思います。

HTML

CSS

jQuery

問題

ウィンドウのサイズを変更すると、outerWidth() と outerHeight() が間違っているため、要素が中央に配置されません。

リフレッシュ後、問題は解消されます。

Firefox でのテスト結果

デフォルト: 要素サイズ - 670x134 (良い)

768x1024: 要素サイズ - 198x254 (間違った) - 670x134 (更新後は良い)

360x640: 要素サイズ - 198x254 (不適切) - 360x182 (更新後は適切)

質問

この問題が発生する理由と修正方法はありますか?

ノート

要素の幅や高さを固定したくありません。

子に対するサブメニューの合計幅を計算しようとしています。次のコードは、最初のサブメニューでのみ正常に機能します。2 番目のサブメニューを機能させるには、幅を手動で +1 する必要があります。そうしないと、最後の項目が押し下げられます。

正しい例:

間違った例:

幅+1

背景色を除いて、奇数アイテムと偶数アイテムの間に他の違いはありません。

私の問題を解決できない次の同様の質問を見つけました: Calculate total width of Children with jQuery

画像の水平スクロール ギャラリーがあります。すべての<div>画像を含む の幅は、すべての子の outerWidths を合計することによって動的に生成されます。

ギャラリーの設定方法は次のとおりです。

の幅はcategoryImageArea、次の関数を使用して生成されます。

ブラウザ ウィンドウを最大化 (1900 x 1280) すると、次のようにうまく動作します。

ただし、ブラウザ ウィンドウのサイズが半分になると、機能しません。(申し訳ありませんが、スクリーンショットは見にくいです。最後の 2 つは次の行にプッシュされます)。

これがなぜなのか当惑したので、両方の場合に値を追加するため、JQuerychange()関数 (上記)をalertの値にしました。widthそれは奇妙です。

• 大きなビューポート (良い): 0 > 984 > 1969 > 2953 > 3937 > 4921
• ハーフ ビューポート (悪い): 0 > 656 > 1312 > 1968 > 2624 > 3280

私の質問は$(element).outerWidth(true) 、ブラウザのビューポートが異なるという理由だけで、一体何が SO の値を異なるものにしているのですか?

参考までに、適用されるスタイルは次のcategoryImageとおりです。