Question

I have some jquery code I’m using to set a div height based on its width. JSFiddle example here.

Everything works as is, but what I want is a function that is reusable, so that I’m not creating the exact same function for every unique id. The code is only good for the #bigHug div at the moment, but I want to be able to do something like $('#biggerHug').setHeight(1.8) in the .ready and .resize functions and to have the height set for the provided id.

I was attempting a solution by placing $(this).width() instead of $('#bigHug').width() in the setHeight function, but everything “broke”. The div wouldn’t show up on load or window resize. I was thinking it had to do with the $(this) referring to the $(window).ready instead of the $('#bigHug').setHeight(1.8).

Thoughts?

Answer 1

Try this:

function setHeight(ratio, elem ) {
    $elem = $(elem);
    var divWidth = $elem.width();
    var divHeight = divWidth / ratio;
    $elem.height(divHeight);
}


$(window).ready(function() {
    setHeight(1.8, '#bigHug');
});

$(window).resize(function() {
    setHeight(1.8, '#bigHug');
});​

DEMO