Show/Hide elements based on parent DIV height

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 -->

drdwilcox · Accepted Answer · 2011-12-21T01:30:43.120

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.

edited Dec 21 '11 at 01:30

answered Dec 21 '11 at 01:10

drdwilcox

3,833
17
19

1

And of course, this just calls `$(this).find('.categories')` internally. – Felix Kling Dec 21 '11 at 01:15
I'm using your suggestion, but it's giving me the same results as before - it still removes the categories on all the overlays, not just the ones shorter than 74 pixels. – ik0n Dec 21 '11 at 01:27
I have reproduced your code and changed it. IS this what you have? It should work. – drdwilcox Dec 21 '11 at 01:31
That is what I have, yes. Is my use of .each() correct? I just threw it in there, and I don't fully understand how it works - I'm new to this jQuery stuff. – ik0n Dec 21 '11 at 01:38
I have written an example: http://jsfiddle.net/kpanx/1/. It works as I understand your question. Does this help? – drdwilcox Dec 21 '11 at 04:03
@drdwilcox I got your example working in my code, when mine still didn't work. I found it's because your height is defined in the HTML. I added how my HTML is layed out, so is it better to grab the height of the IMG, or is there a better way to grab the height value from the .overlay, since the current way doesn't seem to work effectively? – ik0n Dec 21 '11 at 05:03
I have just updated my jsfiddle to not set the height explicitly. It still works correctly. Looking at your code, the `` tag is not part of the overlay `
` and so will not affect the height of that element.
– drdwilcox Dec 21 '11 at 14:23
Solved! Okay, I got it working with help from [HERE](http://stackoverflow.com/a/2398963). Instead of grabbing the height from DIV.overlay, I grabbed it from the sibling IMG using code from the linked question. Thanks for your help, and for fixing my syntax. I will edit my question with the corrected code. – ik0n Dec 22 '11 at 00:02

Show/Hide elements based on parent DIV height

1 Answers1