0

問題

2 つの列があります。最初の列は応答幅で、もう 1 つは固定幅です。レスポンシブ列の幅を必要とするプラグインを使用しているため、この関数を作成して幅を計算しました。

$(".container-content").css(
        "width",
        $(".site-container").outerWidth() - $(".sidebar").outerWidth()
    );

しかし、ページが読み込まれると、幅が正しくないため、ウィンドウのサイズを変更して幅を固定する必要があります。

私のコードのビット

CSS

.site-container {
    width: 98%;
    background-color: #fff;
    box-shadow: #b8b8b8 0 2px 3px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.container-body .container-content {
    overflow-y: hidden;
    position: relative;
}

さらに何か必要な場合はお知らせください。

更新 v1

問題の解決に近づいていると思います。モザイクを作成するためにアプリケーションにアイソトープがあります。ページが読み込まれると、Isotope が呼び出されます。私のモザイクの構造は次のとおりulですli。CSS では、ページ ローダーが消えた後にモザイクのリストを表示するliように定義されています。display: none

jQuery が li のコンテンツを (with で) 表示するときfadeIn()、幅を適切に計算していない (または完全に計算していない) と思います。

コードに従ってください：

// Isotope
jQuery("ul.products-list").isotope({
    itemSelector: "li",
    masonry: {
        gutterWidth: 15
    }
}, function () {
    $(this).parent().prepend("<div class=\"products-loader\"><p>Loading application</p></div>");
    $(".products-loader").delay(1000).fadeOut(300, function () {
        $("ul.products-list li").fadeIn("slow", function () {
            $(".products-loader").remove();
            $(".container-content").perfectScrollbar({
                wheelSpeed: 100
            });
        });
    });
});

何か案は？

更新 v2 — 解決しました!

私自身の答えを見てください。

4

2 に答える 2

0

最初の考え：

DOM の準備ができたら、必ず jQuery コードを実行してください。

$('document').ready(function(){
    $(".content-container").css("width", $(".site-container").outerWidth() - $(".sidebar").outerWidth());
});

または、少なくともそれが参照する html の後 (特定のシナリオでは機能しない可能性があります)。

取得したいコンポーネントのサイズが、outerWidth()ロードする必要がある ex: 画像に依存する場合、上記でも十分ではありません。次に、コードをwindow.loadハンドラー内に配置する必要があります。

$(window).load(function() {
    /* your code*/
}

つまり、ページ上のすべてが読み込まれたときにトリガーdocument.readyされるのではなく、DOM の準備ができたときにトリガーされます。参考までに、こちらまたはこちらwindow.loadをお読みください

補足：違いに気づきました：

.content-container [JS] <> .container-content [CSS] それは意図したものですか？

于 2013-06-07T13:40:43.080 に答える