CODEWITHSUNDEEP
javascriptjqueryhtmlcssflexbox
Quesofat
Quesofat

Reputation: 1531

Setting parent's width the same it's child

I have maybe 30 of these pins:

 <div class="pin">
            <img class="blog-img" src="http://placehold.it/300x300" alt="blog post" />
            <h2>Title</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <a href="#">Read More...</a>
    </div>

And I am trying to set each .pin width the same as the .blog-img width. How would I do this when each of the 30 pins are going to be unique in size?

I'm open to using jquery.

Edit: To give clarification on this project, these tiles will be generated from a back end with JSON and on the front end using EJS. So this needs to be dynamic.

Criteria: Must be able to use display flex in the parent container.

Thanks!

Upvotes: 3

Views: 74

Answers (3)

Dryden Long
Dryden Long

Reputation: 10190

Something like this should do the trick

$('.pin').each(function(){
  var w = $(this).children('.blog-img').width();
  $(this).width(w);
  $(this).animate({opacity:1}, 1000);
});
.pin {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pin">
        <img class="blog-img" src="http://placehold.it/300x300" alt="blog post" />
        <h2>Title</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <a href="#">Read More...</a>
</div>

Edit: To make the change less jarring, start off with the elements hidden using opacity: 0; then fade them in using animate()

Upvotes: 2

DaniP
DaniP

Reputation: 38262

With CSS you can do this:

.pin {
  display:table;
  width:1%;
  background:gray;
}
<div class="pin">
  <img class="blog-img" src="http://placehold.it/300x300" alt="blog post" />
  <h2>Title</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <a href="#">Read More...</a>
</div>

Upvotes: 3

serdar.sanri
serdar.sanri

Reputation: 2228

If you want to use jQuery then 

$(function(){
  $.each($('.pin'), function(){
     $(this).width( $('.blog-img').first().width());
  });
});

would do it.

Upvotes: 0

Related Questions