AngularJS - Finding width of changing DOM elements

Question

I feel like most of my Angular questions I ask are me missing something incredibly dumb, so let's hope this is too.

I'm building a directive to control scrolling of a wide list of thumbnails. In jQuery, I had this working perfectly, but the jQuery wasn't comfortable with grabbing a dynamically loaded list from Angular, so I'm rewriting my code. Basically, I've got a gallery that exists in an ng-repeat:

<div id="gallery">
    <ul id="gallery_img">
        <li class="thumb" ng-repeat="image in thumbnails">
            <img ng-src="{{image.thumbnail}}" alt="{{image.description}}" />
        </li>
    </ul>
</div>

and when I click on some further-down buttons,

<slider class="mover" style="left:0;">&laquo;</slider>
<slider class="mover" style="right:0;">&raquo;</slider>

the list is supposed to animate/slide backwards and forwards the width of the image in my "0" position. Basically, it grabs the width, then adds that width to my UL left position. Super simple, right?

Here's the directive I've got controlling this movement at the moment:

app.directive('slider', function() { //to reuse, replace "#gallery_img" with whatever you want
    return {
        restrict: 'E',
        link: function(scope, element, attrs){
            var toMove = angular.element('#gallery_img');
            var imageWidth;
            var imageNumber = 1;
            element.bind('mousedown', function(){
                toMove.css({left: '-=200'});
                console.log(toMove.children([imageNumber]).width());
                console.log(imageNumber);
                imageNumber +=1;
            });
        }
    }
});

I added in some console.log details, so that I could see what widths I'm getting. My imageNumber is definitely changing; each time I click next or previous, the number goes up one. The width I'm getting, though, is only for the first image in each set; I've got several galleries, but no matter how many times I click "next," gallery one will only ever give me "566," gallery two only "433", gallery three "521." Each image is of an entirely different size, so... why is it only giving me the width of the first image?

e: Here's a plnkr of what I'm talking about: http://plnkr.co/edit/nLG4OKsNGvYTgEMg9UOv

can you create a plunker with your sample slider? Also, there's already a bunch of out-of-the-box angular gallery sliders that exist if you want to save yourself some time. — SoluableNonagon
– SoluableNonagon, Commented Nov 12, 2014 at 18:28

tasseKATT · Accepted Answer · 2014-11-12 18:50:13Z

2

In the following code:

toMove.children([imageNumber]).width()

You are passing imageNumber to the children function. The children function accepts an optional selector, not an indexer. In your case this will probably return a jQuery object containing all the li and the call to width() will return the width of the first.

Instead pass the indexer to what the children function returns and go from there (dividing for clarity):

var children = toMove.children()
var width = $(children[imageNumber]).width();
console.log(width);

Or:

var width = toMove.children().eq(imageNumber).width();
console.log(width);

answered Nov 12, 2014 at 18:50

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sarsparillo Over a year ago

Thank you! I didn't realize I could use .eq in an AngularJS selector; you've made this slider possible.

tasseKATT Over a year ago

You're welcome :) As long as you load jQuery before Angular, angular.element is actually an alias for the jQuery function.

SoluableNonagon · Accepted Answer · 2014-11-12 18:31:15Z

0

Check this to help you debug:

console.log(toMove.children().length); // how many children are seen?

then

angular.forEach(toMove.children(), function(element, index){
    console.log(index, angular.element(element).width());
});

answered Nov 12, 2014 at 18:31

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

Collectives™ on Stack Overflow

AngularJS - Finding width of changing DOM elements

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related