Programmatically scroll ng-repeat with overflow:hidden

Question

I'm using the following markup (JADE) to build a pagination with AngularJS and Foundation.

ul.pagination
    li.arrow: a &laquo;
    li(ng-repeat="month in months | orderBy:'_id'" ng-class="month._id === shownMonth ? 'current' : ''")
        a(ng-href="#/months/{{month._id}}") {{ month._id | monthid:'short' }}   
    li.arrow#right-arrow: a &raquo;

In the CSS, I've set overflow: hidden. This gets me this:

pagination

Perfect so far, but obviously this could get long.

How can I make this scroll when the user clicks on the little arrow symbols at the end?

I've tried doing stuff like $(...).animate({left: '-=20'}) but it simply gets ignored (I'm guessing because of the Foundation css). Any ideas?

UPDATE

I've got a semi-working solution, but it's ugly.

I have attached an ng-show condition to the repeated list items as such:

li(ng-repeat="month in months | orderBy:'_id'" ng-class="month._id === shownMonth ? 'current' : ''" ng-show="month._id >= min && month._id <= max")

and after loading my data I do

$timeout(function() {
    var availableWidth = $('ul.pagination').width() - 2 * $('ul li.arrow').width();
    var itemWidth = $('li:not(.arrow)').width();
    var total = Math.floor(availableWidth / itemWidth);
    $scope.min = $scope.shownMonth - Math.floor(total / 2);
    $scope.max = $scope.shownMonth + Math.floor(total / 2);
});

Then I basically just need to adjust min and max in an ng-click handler for the arrow buttons. This works, more or less, but for some reason, availableWidth gets calculated to much, much smaller than the space that's actually available for it - it's off by about 600px! Why?

Nick Angiolillo · Accepted Answer · 2014-04-25 15:03:52Z

1

Animating the left position makes no sense. What you want to animate is the horizontal scroll position (element.scrollLeft).

Also, consider removing your arrows out of the list of months. They don't make sense semantically in that list, and they'll end up constraining you when you want to scroll just the months but leave the arrows in place.

Edited to add fiddle: http://jsfiddle.net/R9QcB/5/ I did this with jQuery for quickness, but scrollLeft is a native javascript property.

It's the CSS that's actually important here moreso than the javascript:

#pagination {
    text-align: center;
}
    .nav {
        display: inline-block;
        vertical-align: middle;
    }
    ul {
        display: inline-block;
        vertical-align: middle;
        max-width: 75%;
        overflow: hidden;
        white-space: nowrap;
    }
        li {
            display: inline-block;
            list-style: none;
            color: #fff;
            background: #aaa;
            padding: 0.25em 0.5em;
            margin: 0 0.5em;
        }

Basically, you need a containing element that you can update the scrollLeft position of. That containing element has an overflow: hidden on it so that its child elements sit in a series inside the container (which is a result of white-space: nowrap).

edited Apr 25, 2014 at 15:03

answered Apr 25, 2014 at 14:31

Nick Angiolillo

4963 silver badges5 bronze badges

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

4 Comments

BadIdeaException Over a year ago

I tried that first, but doing scrollLeft didn't do anything - it just got ignored. I have the arrows in the ul so they become part of the pagination.

BadIdeaException Over a year ago

Ya I figured probably the CSS was the key, but CSS is definitely not my strong point. Either way, I would like to avoid bypassing the foundation CSS, so I'm trying to integrate what you've posted into what I have. And, again, getting ignored...where does the magic happen in yours? Could you explain a little bit more?

Nick Angiolillo Over a year ago

The magic is in understanding the overflow properties of CSS and the scrollTop and scrollLeft properties of javascript. Here's a really basic example: jsfiddle.net/9VajK The #overflow-frame div is going to have a scrollLeft property that can be polled (to get its position) or updated (to set its position). In jQuery, this method is $.scrollLeft().

BadIdeaException Over a year ago

Ha, I got it! I started manually disabling foundation's CSS rules in the Firefox developer tools until it started working. Turns out they applied a float: left to the lis in the pagination. I don't know enough CSS to understand why that is keeping it from working, but adding float: none !important; to my own stylesheet does the trick. Thanks for pointing me down the right track!

Collectives™ on Stack Overflow

Programmatically scroll ng-repeat with overflow:hidden

UPDATE

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related