SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get height of one element and then set the css height of another

    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>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    You don't need JS for this, as you could use a combination of display: table and display: table-cell:

    Code:
    <!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

    Code:
    $(."text").css("height","var LogosHeight");
    to this

    Code:
    $(."text").css("height", LogosHeight);


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •