Question

hey there.. need some advice again 🙂

I’m working on a project with a filterable portfolio [based on this plugin link: http://www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours.

the portfolio items are shown in a horizontal slider which is adding scroll areas (hot spots) on the left and right side of the browser window.

here comes my problem:

the width of the slider is calculated in the plug-in smoothdivscroller http://www.smoothdivscroll.com. but when i change the content of the slider via the filter navigation the total width of the slider changes, but the smoothdivscroller plug-in is not noticing it.

i set up a simplified example in jsfiddle for you and you can experience the whole problem herekuemmel-schnur.de/projekte: when all projects are shown (Alle) and you scroll to the right and then switch to the category “Lehrprojekte” you won’t see any projects because they are on the far left side and the total width of the container is not recalculated.

in order to fix this i have three ideas where i need some serious help.

1) the smoothdivscroll plug in offers a public method to recalculate the width of the container like

$("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");

which i need to fire every time after portfolio-list a is clicked. and i need to combine this with the method where the slider automatically switches to the first element of the current content

$("#makeMeScrollable").smoothDivScroll("moveToElement", "first");

2) My second idea – cause i don’t know if or how 1) works – is to check if the url changes and then fire the recalculation. the filter uses a hash to address the content. so i thought i could read out the url and every time the part directly after the hash changes i could fire the method.

3) I could bind the filterable plug-in to the smoothDivScroll plug-in with something like (beware of completely wrong code 🙂

$('#portfolio-list').filterable();
 $('#portfolio-filter a').click(function(){
        $('#makeMeScrollable').smoothDivScroll("moveToElement", "first")("recalculateScrollableArea");
});

so.. what do you think? again the jsfiddle link: jsfiddle.net/tobiasmay/QudtF/

thanks,
tobi.

ps. i would have setup the links properly, but i need 1 more reputation point to post more then 1 link 😉

Answer 1

You can listen to the event filterportfolio, and recalculate/moveToElement from there.

$("body").bind("filterportfolio", function()
{
    var
        interval = 50,
        duration = 1000;

    var intervalId = setInterval(function()
    {
        $("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");

        duration -= interval;

        if(duration <= 0)
        {
            clearInterval(intervalId);
        }
    }, interval);

    $("#makeMeScrollable").smoothDivScroll("moveToElement", "first");
});

It seemed to work when playing with it in the javascript console on the live site. Add the code block to aks.js or try it out in Chrome: go to the site, open the console, paste the code and press enter. Should work right away when reproducing the steps from the question: scroll far to the right, click on a filter.

Edit: due to the animations in the filtering, .smoothDivScroll(...) needs to be called after the animations are done. Since the animations might look a bit ugly if only called once, the recalculations will be done several times during duration milliseconds with an interval milliseconds in between.