I have an absolute div, and a parent div. How I can define the height of the parent based on the absolute div, knowing I have images which take some time to load?

CSS:

#parent {
    overflow:hidden;
    width:100%;
}
.absolute {
    overflow:hidden;
    width:100%;
    height:100%;
}

HTML:

<div id="parent" style="height:[HEIGHT OF CHILDREN]">
    <div id="absolute1" class="absolute">
        [LOTS OF CONTENT WHICH MAKE A VARIABLE HEIGHT, INCLUDING IMAGES WHICH TAKE SOME TIMES TO LOAD HERE]
    </div>
    <div id="absolute2" class="absolute">
        [LOTS OF CONTENT WHICH MAKE A VARIABLE HEIGHT, INCLUDING IMAGES WHICH TAKE SOME TIMES TO LOAD HERE]
    </div>
</div>
<a href="#absolute1">SAMPLE LINK 1</a>
<a href="#absolute2">SAMPLE LINK 2</a>

JS:

jQuery(document).ready(function($) {
    $('a').bind('click', function(e) {
        var target = $(this).attr('href');

        if($(target).html() !== undefined ) {
            $('#parent').css({
                'height': $('#parent').find(target ).height(),
            })
        }

        e.preventDefault();
    });


    // The problem: height is not correct until image is loaded/in cache
    $('a[href="#absolute1"]').trigger('click');
});

I have an absolute div, and a parent div. How I can define the height of the parent based on the absolute div, knowing I have images which take some time to load?

CSS:

#parent {
    overflow:hidden;
    width:100%;
}
.absolute {
    overflow:hidden;
    width:100%;
    height:100%;
}

HTML:

<div id="parent" style="height:[HEIGHT OF CHILDREN]">
    <div id="absolute1" class="absolute">
        [LOTS OF CONTENT WHICH MAKE A VARIABLE HEIGHT, INCLUDING IMAGES WHICH TAKE SOME TIMES TO LOAD HERE]
    </div>
    <div id="absolute2" class="absolute">
        [LOTS OF CONTENT WHICH MAKE A VARIABLE HEIGHT, INCLUDING IMAGES WHICH TAKE SOME TIMES TO LOAD HERE]
    </div>
</div>
<a href="#absolute1">SAMPLE LINK 1</a>
<a href="#absolute2">SAMPLE LINK 2</a>

JS:

jQuery(document).ready(function($) {
    $('a').bind('click', function(e) {
        var target = $(this).attr('href');

        if($(target).html() !== undefined ) {
            $('#parent').css({
                'height': $('#parent').find(target ).height(),
            })
        }

        e.preventDefault();
    });


    // The problem: height is not correct until image is loaded/in cache
    $('a[href="#absolute1"]').trigger('click');
});

• javascript
• jquery
• html

1 Answer 1

instead of running your code inside $(document).ready(...) use:

$(window).load(function(){
  // Your code here
});

This will ensure the assets of the page have loaded, including images.