I need to set the line-height dynamically for an h4 based on how high the containing div is. Height will change based on content and screensize.
html
<div class="col-sm-6 left">
<div>
<h4>Lorem ipsum</h4>
</div>
</div>
jquery
// set line height of h4 to height of containing div
var divHeight = $('.left').height();
$('.left h4').css('line-height',divHeight);
This isn't working. I've tried a couple of different ways to pass divHeight through but it doesn't work.
Updated with a bootply http://www.bootply.com/9fOHaR0iv0
following your update with bootply link, it seems you have pictures load in your div which define the div's height.
you have run your code inside $(document).ready() which executes once DOM loads, when in fact you need to wait until all the images load and not the DOM.
you should change your
$(document).ready()
to:
$(window).load()
it will make sure that all images are loaded, and then you will get the correct height.
here is your fixed code: Bootply
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments