CODEWITHSUNDEEP
jquery
Marlon Creative
Marlon Creative

Reputation: 3846

jQuery - getting a height and re-using it

Can someone explain to me how to get the height of one element, and then re-use it elsewhere on another element, using jQuery?

For example, to have 2 divs, 1 & 2, and to get the height of div 1, then have an on-click event on div 2 that animates it to the same height as div 1.

Cheers

Upvotes: 1

Views: 192

Answers (4)

Alex
Alex

Reputation: 12433

Try this: 

<div id="div-one" style="height:100px; background: #fb0">first div</div>        
<div id="div-two" style="height:50px; background: #fb0">second div</div>

<script type="text/javascript">
    jQuery("#div-two").click(function() {
        var desiredHeight = jQuery("#div-one").height();
        jQuery(this).animate({height: desiredHeight}, 1000);
    });
</script>

Upvotes: 2

Edwin V.
Edwin V.

Reputation: 1377

This is very basic jQuery, maybe you should have a look at the manual and API before asking this question?

An example in the API can be found at CSS > Height and Width > height(val):

$("div").one('click', function () {
  $(this).height(30)
         .css({cursor:"auto", backgroundColor:"green"});
});

Upvotes: 0

slikts
slikts

Reputation: 8158

This would work:

$('#div1').click(function() 
{
    $(this).animate({
        height: $('#div2').height()
    });
});

Also, check the docs for more options: http://docs.jquery.com/Effects/animate

Upvotes: 5

code_burgar
code_burgar

Reputation: 12323

$('#div2').click( function () {
  $('div2').height( $('#div1').height() )
}
);

Upvotes: 0

Related Questions