jQuery is only loading on resize and I want it to load on both resize and page load

Question

I have two sections next to each other, the first with a flexible width image and the second with a series of elements. I want the second to adjust it's height to match the height of the image in the first. I managed to get some javascript working that looks at the height of the image and adjusts the height of second section. However, it only works on resize and I'm unable to get it to work on load as well. For an example, see my fiddle. You'll notice the height matching doesn't kick in until resize.

$(document).ready(function(){
function matchHeight() {
var newHeight = $("#slider").height();
$("#ctas").height(newHeight);
}

jQuery.event.add(window,"resize",matchHeight);
});

http://jsfiddle.net/sGNcc/2/

Answer 1

Just call "matchHeight" in your "ready" handler:

jQuery.event.add(window,"resize",matchHeight);
matchHeight();

Also that's kind-of a weird way to establish an event handler:

$(window).resize(matchHeight);

Answer 2

Call the matchHeight function onload:

$(document).ready(function(){
    matchHeight();
});

function matchHeight() {
    var newHeight = $("#slider").height();
    $("#ctas").height(newHeight);
}