If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Issue with scrollable & filtering portfolio with jQuery.

For my portfolio section i've combined two scripts to be able to filter by category and be able to scroll horizontally through the images.

The scrolling works (does some weird jumping but still works), the bigger issue arises when you filter by category. The thumbnail animates off the screen so it can't be seen (and if you scroll it never shows up at all). You can see an example of what it's doing here: http://shanehowell.com/testing/ just click on one of the category buttons.

Can anyone advise me on why this is doing that and how to go about fixing it to where when someone clicks on a category it resets to the start?

So, when you select a category to filter, the width of each of the non-selected items is animated to 0 and then display:none. However, your items within #portfolio-list are floated left, so when they are set via the animation to display:none, the whole list collapses off to the left, and you can't see anything at all.

While that does work, it doesn't solve my issue with it's current functionality.
Because when I change to your suggestion it doesn't really filter, it just lowers the opacity of the none selected items.
I need it to actually filter the items to where the only thumbnails shown are the ones in the selected category.

I've tried messing with the CSS float and position properties but anything I try breaks it.
There must be a way to force the scroll to the beginning with the filtered categories as it starts off correctly at the beginning when the page loads and when the ALL category is chosen.

While that works it does present more issues with the script that I need to work out. - (when filtering it displays two thumbnails of each one, scrolling seems to glitch at times with filtered content, when linking directly to a filter section it shows all of the thumbnails to the right of the correct one, when going back to ALL category it doesn't reset to the beginning etc...) So another words, it's a mess!

Your infinite scrolling script is creating more than one copy of each link by cloning the existing links - which I assume is how it manages the "infinite" bit. That's why you get more than one link. You could perhaps hide the cloned items on filter.