css-template-layout breaks after pictures loaded

Question

I have a problem with css-template-layout. That plugin helps me cut my content into slots. The content slot has the biggest height and usually some pictures. When pictures finish loading my content div gets bigger, but my content slot stays the same size. At that point, the content overlays the footer.

So the page starts off like this:

My Cool Site             
──────┬──────────────────
home  │ My favorite pics:
about │                  
pics  │ (loading)        
──────┴──────────────────
    Copyright 2012 me.   

But ends up looking like this:

My Cool Site             
──────┬──────────────────
home  │ My favorite pics:
about │                  
pics  │ ┌┐ ┌─┐ ┌─┐       
──────┴─└┘─│@│─│#│───────
    Copyrig└─┘2└─┘ me.   

Here is how my CSS looks:

body { 
    margin: 0;
    padding: 0;

    display:    ".hh."
                ".nc."
                ".ff."
    * 200px minmax(500px,800px) *
    ;
    width: 100%;
    background: #DDF;   
}

#header { position: h; text-align: center; }

#content { 
    position: c;
    margin: .5em;
}

#navbar { 
    position: n;
    background: #AAD;
    margin: 0;
    padding: .5em;
}

#footer { 
    position: f; 
    text-align: center;
    font-weight: bold;
}

body::slot(n) {
    background: #AAD;
}

#header, #footer {
    background: #CCE;
}

I load css-template simply by:

$.templateLayoutShowOnReady();

$(function() {
    $.setTemplateLayout('/static/style1.css');
});

What I tried to do is to try to set/redo templateLayout in function $(window).load() but it didn't work.

Any ideas? Thanks in advance.

Answer 1

Edit: whoops, just noticed your ending sentence “What I tried to do is to try to set/redo templateLayout in function $(window).load() but it didn't work.” So I have explained some things here that you already know. But this answer still provides a different approach that might work. I’ll leave my re-explanation of what you already know up anyway, for the sake of others who find this question later.

---

css-template-layout is a jQuery plugin. Your code snippet uses jQuery’s $() function to call setTemplateLayout when the DOM has loaded. But css-template-layout isn’t accounting for the newly-calculated height of images that have loaded after the DOM has loaded. Thus, you need to refresh the template layout after that time.

I see that css-template-layout provides the $.redoTemplateLayout() method for this. Try calling it in an event that fires whenever any image in your content loads. Normally you would use .on(), but apparently checking for when an image has loaded isn’t straightforward, so you can use the jQuery plugin imagesloaded to help. Every image on the page should fire their own event when they have loaded – you don’t have to wait for all images to load to fix the layout. I don’t know if there’s an event to find the point at which an image has loaded enough to affect the layout, even if the image hasn’t loaded all the way. If there is such an event, use that.