Question

I’m trying to show and hide some metadata elements inside and overlay DIV based on the DIV’s height. Here is an image of what it should look like, with two DIVs and their overlays showing.

The one on the left has all its metadata visible, and the one on the right has its most basic metadata showing. What I’ve been trying to achieve is the amount of metadata showing shrinks as the height of the DIV shrinks. I used code on this page as a starting point, but haven’t been able to solve this yet. Here’s what I’ve come up with so far:

$(document).ready(function () {
    $('.overlay').each(function () {
        // 74 being the DIV height of the smaller DIV in the image
        if ($(this).closest('.brick').children('img').height() <= 74) {
            $('.categories').hide();
        }
        else {
            $('.categories').show();
        }
    });

}); 

This hides the categories metadata, but does so on ALL instances of .categories class, not just the ones inside DIVs with a height shorter than 75 pixels.

Here is a snippet of my HTML markup:

<div class="brick">
    <img src="img/caine.jpg" />
    <div class="overlay">
        <div class="categories">
            <span>Typography</span>
            <span>Print</span>
        </div>
    </div> <!-- .overlay -->
    <span class="shadow">   
</div> <!-- .brick -->

Answer 1

You want:

$(document).ready(function () {
    $('.overlay').each(function () {
        // 74 being the DIV height of the smaller DIV in the image
        if ($(this).height() <= 74) {
            $('.categories', this).hide();
        }
        else {
            $('.categories', this).show();
        }
    });
});

The second argument changes the context for the selector, and states that you want only items in the ‘categories’ class that are children of this.