When resize, the div's width back to normal

Question

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.

Is your code wrapped in DOM ready or window load? I think we'll need more code to help you. — Karl-André Gagnon, Jun 07 '13 at 13:37
alert the values are getting proper or not and put the script top in header after css — Jomy Joseph, Jun 07 '13 at 13:40
Sorry about my late. @Karl-AndréGagnon, my code is wrapped in Window Load. — Guilherme Oderdenge, Jun 07 '13 at 15:09
@chiefGui you said that the width is fixed when you resize the window. `$(window).trigger('resize');` would help. — claustrofob, Jun 07 '13 at 15:21
@claustrofob "What?" again. Not a fixed position. Anyway, I tried your suggestion — without success. — Guilherme Oderdenge, Jun 07 '13 at 15:29

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

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

I found the solution here.

Thank you to you all!

edited May 23 '17 at 12:11

Community

1
1

answered Jun 07 '13 at 16:13

Guilherme Oderdenge

4,935
6
61
96

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

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?

edited May 23 '17 at 11:49

Community

1
1

answered Jun 07 '13 at 13:40

Matyas

13,473
3
60
73

1

No, document ready doesn't mean that page (content) is loaded, just DOM is ready... window load is better option, in this case... – sinisake Jun 07 '13 at 13:44
TY for noticing, extended answer – Matyas Jun 07 '13 at 13:49
@Matyas I wrote the JS script when I created this topic — that's why one is different from another. So, if I put my code to run when DOM is ready, all internal components are invisible. – Guilherme Oderdenge Jun 07 '13 at 15:14

When resize, the div's width back to normal

The problem

A bit of my code

Update v1

Update v2 — I solved!

2 Answers2