Callback to update totalitems after load about flexisel

[9bitStudios]

Hi there. I have not worked with Mixitup previously. Do you have a URL you can point me to so I can see the behavior that is occurring?

[clauderic]

You can see it in action here, with no modifications made to the default flexisel.js file: http://sandbox.webmastr.ca/oeuvres/

I can get it to work properly the first time it loads by changing var totalItems to:
var nbItems = object.children().length; var totalItems = nbItems - (nbItems - object.children('[style*="opacity"]').length); // Visible elements have an attribute with opacity: 1, invisible items do not

However, I can't get it to dynamically refresh that value after the initial load (i.e. when Mixitup filters the items and the animation has ended)

[9bitStudios]

Ah, I see what you are referring to. Okay, so the challenge here is that Flexisel, in attempting to handle to responsive situations, is always trying to determine "How many items should I show?" based on the visibleItems property set in the options at different widths. So it's always going to be setting the width of items based off of the screen width. It doesn't differentiate whether the opacity of an item is 0 or 1. Rather than trying to reinitialize everything (because a bunch of HTML gets appended on init), the best approach would probably be trying to customize the visibleItems value after scroll events (see the adjustScroll method which runs afrer any scrolling left or right). A custom getVisibleItems method that returns the current number of items with opacity of 1 (but not less than the maximun number set for that width) could be used instead of the visibleItems property to calculate the number of items to show. Adding something like that in is probably the best way to handle what you're wanting to accomplish.

[clauderic]

Very insightful, thank you! I got it to work by creating a simple getVisibleItem method that returns the current number of items that have the attribute opacity as follows:

getVisibleItems : function() { return currentNbItems = object.children('[style*="opacity"]').length; }

And then called that method instead of totalitems in var objPosition of the ScrollRight method:
var objPosition = (object.position().left + ((methods.getVisibleItems()-itemsVisible)*itemsWidth)-innerWidth);

Works like a charm, but it messes up when i resize the browser. It stops scrolling one item short depending on the window width. Sometimes it works fine, other times it won't scroll to the last item

[9bitStudios]

Very nice! Seems like it's close. I don't have too much time at the moment but probably a good first step in trying to resolve this last bit would be to look at perhaps applying some of the modifications you have made also to the code inside the $(window).on("resize"... event in the setEventHandlers method. I can maybe try to take another look at it if you run into difficulties when I'm a bit more free up.