ポートフォリオ サイトにLiquid Slider (Coda Slider のレスポンシブ バージョン) を使用しています。
スライドの 1 つは、プロジェクト/クライアントのリストです。ユーザーがいずれかをクリックすると、同じスライドにとどまりますが、リストはプロジェクトの詳細に置き換えられます。私の考えは、そのスライドのコンテンツを、AJAX によって取り込まれた別の HTML ページ / div と交換することで、読み込み時間を短縮することでした。
問題は、高さが新しいコンテンツに合わせて調整されないことです。スライドを 1 つ進めてから戻すと、高さが調整されます。ウィンドウのサイズを調整すると、高さが調整されます。
$(document).ready( function () {
$("#dc3").click(function (){
$(".clientlist").hide().load('dc3.html').fadeIn('slow');
});
});
これはコンテンツの交換には機能しましたが、高さの調整には機能しませんでした。高さを設定するために、置換 div の高さを使用してみました:
$(document).ready( function () {
$("#dc3").click(function (){
$(".clientlist").hide().load('dc3.html').fadeIn('slow');
$(".liquid-slider").css({'height':($("#content").height()+'px')});
});
});
しかし、それもうまくいきませんでした...
手動で高さを設定することはできますが、高さを自動的に調整することをお勧めします。スライダー スクリプトにはいくつかの adjustHeight 関数がありますが、コンテンツがスワップ アウトされたときにそれを呼び出す方法がわかりません。
サイトのステージング エリアはこちらです。