CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
digiwebguy
digiwebguy

Reputation: 480

Get height of img tags generated with ng-repeat

I have a carousel who's images are being created with an ng-repeat. The width of these img tags have been set to 100%; and the height, auto. How do I get the height of the img tags programmatically since this value changes when the window is resized? I tried

$('#home-carousel img').load(function(){
    console.log($(this).height());
})

but it doesn't work since the imgs don't exist at that time. Here's the code I'm working with:

<div style="position:absolute; top:0px; z-index:-1" id="home-carousel" class="carousel slide" data-ride="carousel">

  <!-- Here's where the problem is -->
  <div class="carousel-inner" role="listbox">
    <div ng-repeat="slide in slides track by $index" class="item" ng-class="{active: $index == 0 }">
      <img src="{{slide.imgUrl}}">
    </div>
  </div>

EDIT:Okay so let me elaborate. This is what I'm trying to achieve: So the images of the paint buckets are supposed to be lined exactly how it looks in this image; right at the bottom of where the background image ends

Problem is, since the width of the image is 100%, when the window is resized, this is what happens. So what I want to do is get the height of the img images in the carousel and position the paint bucket based on that

Upvotes: 1

Views: 193

Answers (2)

digiwebguy
digiwebguy

Reputation: 480

Okay so I solved this by doing this: First, I used @Braden1996 's link to get the initial height of the img tag when it's first loaded 

<div style="position:absolute; top:0px; z-index:-1" id="home-carousel" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div ng-repeat="slide in slides track by $index" class="item" ng-class="{active: $index == 0 }">
      <img ng-src="{{slide.imgUrl}}" imageonload="imageLoaded()"><!--here-->
    </div>
  </div>
</div>

Here's the javascript:

$scope.imageLoaded = function(){
  $('.grid-container').css('margin-top',$('#home-carousel').height()-100 );
}

and after that, changed the position of the paint buckets everytime the window is resized.

$(window).resize(function(){
  $('.grid-container').css('margin-top',$('#home-carousel').height()-100 );
})

NB: The -100 is so the bucket doesn't fall right under the background image

Upvotes: 1

Braden1996
Braden1996

Reputation: 108

Take a look at Angular's ng-src.
Also, after a quick search, I came across this - which you may find useful.

Upvotes: 0

Related Questions