Question

I have no idea why my script is not working…

$(document).ready(function() {  

var div_height = $("#content").height();
$(".leftSideBar").css("height", div_height);

var div_height = $("#content").height();
$(".rightSideBar").css("height", div_height);

});

As you can see at http://www.willruppelglass.com/ the sideBars don’t go all the way down, can anyone tell me why its not? I’m kinda new to jQuery and I am thinking it has something to do with the document ready function, going to read more on this, but if anyone can point me in the right direction, that would be awesome.

Answer 1

It looks like your height is off by the height of the images in your #content section. Try running the code on window.load which fires when all the assets on the page have finished loading:

$(window).bind('load', function() {  

    //since your running the same function on the elements,
    //you can select them both at once,
    //which removes the need for a variable that stores the height
    $(".leftSideBar, .rightSideBar").css("height", $("#content").height());

});

I noticed that your page is using a webfont; it could be that when document.ready fires, the webfont has not yet been rendered and when it does render, it makes the #content element taller. Binding to window.load should help this if it is the issue.