Setting height with jQuery without refresh

Question

I have created 2 divs on top of each other. The first div holds a WordPress generated img and the second div slides in from the top when hovering the image div. In the normal css both divs have a fixed height, but when i add media queries i need to change the height of the image div to auto to maintain the right dimensions.

HTML code:

<div class="portfolio-page-thumbnail">
  <?php the_post_thumbnail(); ?>
  <div class="portfolio-page-hover">
        <p>BEKIJK PROJECT</p>
  </div>
</div>

CSS:

     .portfolio-page-thumbnail{
        width: 100%;
        height: auto;
     }
     .portfolio-page-hover{
       width: 100%;
       position: absolute;
       top: -50%;
     }

Here is the problem: When decreasing my browser width, the image scales just fine, but the hover div stays at a fixed height and because the hover div has an absolute positioning, it cant inherit the height from it's parent.

I created a jQuery snippet to take the height from the image div and set this height to the hover div.

$(document).ready(function(){
 $(".portfolio-page-hover").height( $(".portfolio-page-thumbnail").height()    );
});

And this works fine on refresh, but as soon as I decrease my browser width, this no longer applies and I have to refresh again. Normally this is just fine, but when my client changes from portrait to landscape, it appears broken. I'd like to know if there is an solution to set the height 'real time' without refreshing?

Thnx!

Answer 1

You could place it inside a resize event handler:

$( window ).resize(function() {
    $(".portfolio-page-hover").height( $(".portfolio-page-thumbnail").height());
});

This will get called whenever the window is re-sized.

Answer 2

I figured I'd turn my comment into an answer. Same answer as Spencer however it calls a function so you don't have to write it multiple times.

$(document).ready(function(){
 myFunc();
});

$(window).resize(function(){
 myFunc();
});

function myFunc() {
 $(".portfolio-page-hover").height( $(".portfolio-page-thumbnail").height());
}

More information about jQuery's resize event handler here