ウィジェット化された WordPress ページで、6 つの個別のウィジェットで構成される単一の列に最初にすべてのコンテンツをロードするシナリオがあります。
ブラウザー ウィンドウが >= 768 ピクセルの場合、次の 2 つの列を作成します。
- メイン列: div #1-4、順番
- サイドバー: div #6 の後に div #5
このようにドキュメントをリフローするために、また私は多くの動的コンテンツを使用しているためappendTo
、次の方法でjQuery を使用しています。
jQuery(document).ready(function($) {
var w = $(window).width();
$(window).on('load resize', adjustFlow);
function adjustFlow() {
if (w >= 768 ) {
$('#div1').appendTo('#main');
$('#div2').appendTo('#main');
$('#div6').appendTo('#sidebar');
$('#div5').appendTo('#sidebar');
} else {
$('#div5').appendTo('#div4');
$('#div6').appendTo('#div5');
}
};
}); /* end of as page load scripts */
(注: div #3&4 には適用しません。appendTo
なぜなら、CSS メディアクエリを使用して、他のすべての最後に正しい方法でフロートさせるためです。)
jQuery は期待どおりに動作しています。ただし、div #6 には、Twitter が提供する基本的なコードを使用した基本的な Twitter タイムラインの埋め込み ( docs ) が含まれています (つまり、私は独自のカスタム クエリなどを展開していません)。
ブラウザー ウィンドウが 768 ピクセル未満で、すべてが 1 つの列に収まっている場合、Twitter のタイムラインが表示されます。私は、移動がTwitterのIFRAMEを不幸にし、追加して他のすべてが実行された後にIFRAMEを強制的に更新しようとしたと仮定しています
$('#twitter-widget-1').attr( 'src', function ( i, val ) { return val; });
if
andelse
ステートメントの両方の後...しかし、動作に変化はありません。
appendTo
と IFRAME がうまく機能していないというのは正しいでしょうか? IFRAME をシャッフル div に追いつくためにできることはありますか?
これに取り組んでからさらに時間をかけて編集:IFRAMEがロードされるまでjQueryの再シャッフルを待機させるか、jQueryの再シャッフル後までIFRAMEのロードを待機させる方法はありますか? また、IFRAME コンテンツは私のドメインから読み込まれ (Twitter から来ているため)、回答に影響する場合はサンドボックスを使用しているように見えます。