CODEWITHSUNDEEP
jquerycss
Stephen
Stephen

Reputation: 8218

jQuery change the width of a div based on the width of the closest image?

I have a ul that has the following structure:

<ul>
<li><img><div class="infotext">some variable length text</div></li>
<li><img><div class="infotext">some variable length text</div></li>
<li><img><div class="infotext">some variable length text</div></li>
<ul>

The images are being given a dynamic height based on the window height and their width is auto (and variable, my images have varying proportions but I am keeping them all the same height), and so I would like to make my infotext div match this variable width. I have tried the following:

jQuery('.infotext').width(jQuery(this).closest('img').width());

jQuery('.infotext').width(jQuery('.infotext').closest('img').width());

jQuery('.infotext').width(jQuery('.infotext').parent().width());

but none of them are working. So far I am stumped...

UPDATE: I have figured out what is causing this, but not what the solution is yet. My images are using lazyloading, and that is interfering with getting the correct image height. I need to figure out how to get the image size after lazy loading has happened...

Upvotes: 1

Views: 1012

Answers (3)

Stephen
Stephen

Reputation: 8218

Wow, what a mess (but a good learning opportunity). The problems turned out to be:

  1. I was unable to get the width and height on these elements, possibly due to lazy loading them. I was able to pull the height alone since I was setting it based on window height.

  2. Because the height and width would change based on the size of my window, and sizing was not set on the images prior, I was having a hard time getting the values I needed to make my calculations.

Solution

There are probably better ways to do this, but this is what I came up with and it works (finally):

First, I added original width and height as data attributes to each image like so:

<img src="lazyload.gif" data-original="path/to/my/originalfile.jpg" data-original-width="<?php echo $image_attributes["width"]; ?>" data-original-height="<?php echo $image_attributes["height"]; ?>" />

then in my jQuery I calculated based on the style being added to the images (depending on the height of the window) and compared that to the original height to get my formula to transform the original width:

jQuery('.infotext').each(function(){
    var newWidthCalc = (jQuery(this).prev('img').attr( "data-original-height" )/jQuery(this).prev('img').css("height").replace('px', ''));
    var newWidth = (jQuery(this).prev('img').attr( "data-original-width" )/newWidthCalc);
    newWidth = (parseInt(newWidth)-30) + 'px'; //remove 30 pixels so a little smaller
    jQuery(this).css('width',newWidth);
    }
});

And finally, it works!

Upvotes: 0

j08691
j08691

Reputation: 207943

The image tag is the previous element, not an ancestor, so .closest() and .parent() won't work.

Try:

jQuery('.infotext').each(function(){
    $(this).width(jQuery(this).prev('img').width());
})

jsFiddle example

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337627

closest() is used to look for parent elements. In this case you want prev():

jQuery('.infotext').width(function() {
    return $(this).prev('img').width();
});

Example fiddle

Upvotes: 0

Related Questions