CODEWITHSUNDEEP
javascriptjquerycssdom
kmb
kmb

Reputation: 871

jQuery event listener for fully loaded DOM with dynamic content

I'm trying to use jQuery script to align height of two divs. Everything works fine until I have some dynamic content in one of divs. When I hardcode some static content in one of divs like: 

<br>asd<br>asd<br> x 20

both divs has the same height property, but when I load some data from DB to one of divs, they are different.

I guess that the problem is in .ready() listener. Documentation says that it fires when DOM is fully loaded but it looks like it's not the truth.

My question is: what kind of listener or other 'trick' should I use? I think that jquery/javascript solution is cleaner than messing with css and I would like to have this kind of solution.

Thanks in advance.

jquery script:

$(document).ready(function(){
    var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();

    if(difference<0)
    {
        var height = $("#layout-content-wrapper").height() -1;
        $("#layout-navigation-wrapper").height(height);
    }
    else if(difference >= 0)
    {
        var height = $("#layout-navigation-wrapper").height() -2;
        $("#layout-content-wrapper").height(height);

    }   
});

Upvotes: 0

Views: 2031

Answers (2)

Hazem
Hazem

Reputation: 107

You can use window.onload to execute a script once a web page has completely loaded all content including images, script files, CSS files, etc.

window.onload = function() {
    var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();

    if(difference<0)
    {
        var height = $("#layout-content-wrapper").height() -1;
        $("#layout-navigation-wrapper").height(height);
    }
    else if(difference >= 0)
    {
        var height = $("#layout-navigation-wrapper").height() -2;
        $("#layout-content-wrapper").height(height);

    }
};

Upvotes: 0

g.e.manor
g.e.manor

Reputation: 526

jquery in the base work with event document.ready is means when all DOM is ready until here make the jquery code. is for don't have a option to render jquery code without render jquery library

if you want to add event just when all the dom is loaded include content and images you need to do this

$(document).ready(function(){
$(window).load(function(){
    var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();

    if(difference<0)
    {
        var height = $("#layout-content-wrapper").height() -1;
        $("#layout-navigation-wrapper").height(height);
    }
    else if(difference >= 0)
    {
        var height = $("#layout-navigation-wrapper").height() -2;
        $("#layout-content-wrapper").height(height);

    }   
});
});

Upvotes: 2

Related Questions