View Full Version : jQuery Issue with scrollable & filtering portfolio with jQuery.

10-19-2010, 08:18 PM
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?

Here is the jQuery being used in a single file: pastebin.com/jtW77SnQ (http://pastebin.com/jtW77SnQ)

Thank You.

10-20-2010, 12:59 PM
I think the problem is with your hide settings within filterable, combined with your css. Currently you have these:

show: { width: 'show', opacity: 'show' },
hide: { width: 'hide', opacity: 'hide' },

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.

If you change the show and hide settings to:

show: { opacity: 1 },
hide: { opacity: 0.25},

that might give you a better result.

10-20-2010, 02:37 PM
Thanks for the help!

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.

10-20-2010, 03:52 PM
Oh, right, I see what you're trying to do now. I think you just need to call your scrolling function when the filter's completed then - something like:

/* FILTER: select a tag and filter */
$(this).bind("filter", function( e, tagToShow ){
$(settings.tagSelector + '[href=' + tagToShow + ']').addClass(settings.selectedTagClass);
$(this).trigger("filterportfolio", [ tagToShow.substr(1) ]);

At the moment it seems to be cutting off the left hand item. If you amend your css to:

ul#portfolio-list {
list-style:none outside none;
margin:5px 0 0;

Then all of the left hand item shows.

10-21-2010, 02:29 PM
Thanks for the help.

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!

10-21-2010, 03:11 PM
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.