CODEWITHSUNDEEP
javascriptjquery
Colin Keany
Colin Keany

Reputation: 309

Make .height() Results Responsive

I am trying to get the results from jQuery .height() to be responsive. Right now, the height of my image is being applied to the div but when I re-size the browser window and everything is responding accordingly, the div that has the height applied to it will not adjust and just maintains the height that was applied to it on page load.

Below is the JS:

<script type="text/javascript">
    $(document).ready(function() {
        var height = $('#imgMeasure').height();
        $('#bio').height(height * 2);
    });
</script>

Any ideas or help is greatly appreciated, thanks!

Upvotes: 0

Views: 42

Answers (1)

nnnnnn
nnnnnn

Reputation: 150080

You can handle the window resize event:

$(document).ready(function() {
    $(window).resize(function() {
        var height = $('#imgMeasure').height();
        $('#bio').height(height * 2);
    }).resize();
});

The extra .resize() at the end is just to trigger the handler immediately so that your code runs on ready rather than waiting for the first resize.

Basic demo: http://jsfiddle.net/43D6Q/

Upvotes: 1

Related Questions