I'm trying to position a div (intro-text) in another div (intro-container). I use css and jQuery to do that.
.intro-text {
width: 35%;
margin-left: auto;
margin-right: auto;
display: block;
}
In the div (intro-text) there is an image that has a responsive width / height. It has a width of 35% of the parent container (intro-container).
I needthe height of the intro-text div to position it in the container. It works fine, except on the first load. It returns 40px (the height of the text).
$(document).ready(function(){
backgroundResize();
$(window).resize(function(){
backgroundResize();
});
});
function backgroundResize(){
console.log("height:" + $(".intro-text").height());
}
It seems that the image isn't loaded yet, so it returns the wrong value.. Even if use document ready.. How can I fix this?
<div class="intro-container container">
<div class="intro-text">
<p><img src="intro.png"><br>
Address, Phone, .</p>
</div>
</div>
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
Call the backgroundResize() function at the onload event.
$(document).ready(function(){
$(window).resize(function(){
backgroundResize();
});
$(window).load(function(){
backgroundResize();
});
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments