Here is my HTML
<a class=“group1 TextWrap LogoImg” href=“Images/UtahLibertyLawLogo.png”>
<span class="text">
View Larger Image
</span>
<img src="Images/UtahLibertyLawLogo.png" />
</a>
I’d like to get the height of the LogoImg and then set the height of the text class to that.
This is what I’ve tried, but can’t get it to work
<script>
$(document).ready(function() {
var LogosHeight = $(".LogoImg").height;
}
$(."text").css("height","var LogosHeight");
});
</script>
ralphm
2
You don’t need JS for this, as you could use a combination of display: table and display: table-cell:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
a {display: table;}
a span, a img {display: table-cell; vertical-align: middle;}
span {background: #e7e7e7;}
</style>
</head>
<body>
<a class="group1 TextWrap LogoImg" href="#">
<span class="text">
View Larger Image
</span>
<img src="http://placehold.it/500X400">
</a>
</body>
</html>
I don’t do jQuery, but fwiw, if you must use it the first thing I’d suggest is to try changing this
$(."text").css("height",[COLOR="#FF0000"]"var LogosHeight"[/COLOR]);
to this
$(."text").css("height", [COLOR="#0000FF"]LogosHeight[/COLOR]);