CODEWITHSUNDEEP
jqueryhtmlcss
Guilherme Oderdenge
Guilherme Oderdenge

Reputation: 5001

When resize, the div's width back to normal

The problem

I have two columns: the first has responsive width, while the other has fixed width. I am using a plug-in who needs the width of the responsive column, then I made this function to calculate the width:

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

But when the page loads, the width isn't correct, I have to resize the window to get the width fixed.

A bit of my code

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;
}

Let me know if you need something more.

Update v1

I believe we are closer to the resolution of my problem. I have Isotope on my application to create a mosaic. When the page loads, Isotope is called. The structure of my mosaic is: ul > li. On CSS, li as defined as display: none to just display the mosaic's list after the page loader disappear.

When jQuery displays the li's content (with fadeIn()), I think he doesn't calculate properly the width (or not fully).

Follow the code:

// 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
            });
        });
    });
});

Any ideas?

Update v2 — I solved!

See my own answer.

Upvotes: 0

Views: 217

Answers (2)

Guilherme Oderdenge
Guilherme Oderdenge

Reputation: 5001

The solution was switch from display: none; to opacity: 0;.

I found the solution here.

Thank you to you all!

Upvotes: 2

Matyas
Matyas

Reputation: 13702

A first thought:

You should make sure you run your jQuery code when the DOM is ready: 

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

Or at least after the html it refers to (might not work in certain scenarios).

If the size of the components you wish to get the outerWidth() of depend on ex: images, that have to be loaded, then even the above is not enough. Then you have to put your code inside a window.load handler.

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

In short: document.ready is triggered when the DOM is ready as opposed to window.load which is triggered when everything on the page has loaded. For reference read here or here

On a sidenote: Noticed the difference:

.content-container [JS] <> .container-content [CSS] is that intended?

Upvotes: 0

Related Questions