Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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?

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

    Thank You.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,953
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I think the problem is with your hide settings within filterable, combined with your css. Currently you have these:

    Code:
     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:

    Code:
    show: { opacity: 1 },
    hide: { opacity: 0.25},
    that might give you a better result.

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by jet71dl; 10-20-2010 at 01:42 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,953
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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:

    Code:
                /* FILTER: select a tag and filter */
                $(this).bind("filter", function( e, tagToShow ){
                    if(settings.useTags){
                        $(settings.tagSelector).removeClass(settings.selectedTagClass);
                        $(settings.tagSelector + '[href=' + tagToShow + ']').addClass(settings.selectedTagClass);
                    }
                    $(this).trigger("filterportfolio", [ tagToShow.substr(1) ]);
                    $(this).trigger("goto",-1);
                });
    At the moment it seems to be cutting off the left hand item. If you amend your css to:

    Code:
     ul#portfolio-list {
    display:block;
    list-style:none outside none;
    margin:5px 0 0;
    padding:0;
    }
    Then all of the left hand item shows.
    Last edited by SB65; 10-20-2010 at 02:56 PM.

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Last edited by jet71dl; 10-21-2010 at 01:32 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,953
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.
    Last edited by SB65; 10-21-2010 at 02:23 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •