8

hey there.. need some advice again :)

I'm working on a project with a filterable portfolio [based on this plugin link: 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 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 ;)

4
  • is my question too long or too complicated? then i'll strip it down..
    – tobiasmay
    Nov 12, 2010 at 23:15
  • I am not sure the jsfiddle is up to date - Uncaught TypeError: Object #<Object> has no method 'filterable'.
    – Joel Purra
    Feb 5, 2012 at 15:48
  • Indeed the resource link to filterable.js (and jquery.ba-hashchange.min.js) is invalid.
    – JimmiTh
    Feb 5, 2012 at 15:52
  • Would the hiddenOnStart option for Smooth Div Scroll be relevant?
    – JSuar
    Feb 5, 2012 at 16:21

3 Answers 3

2

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.

4
  • Seems to break as soon as you click "Alle" after that - also doesn't remove the scroll-indicator on the first click. My guess is it doesn't work because filterportfolio is triggered before the filtering animation, and recalculateScrollableArea then calculates based on the current width needed (where the filter items haven't actually been removed or added yet). It would need to be triggered after the filtering animation - but that would require modifying filtering.js, as far as I can tell right now.
    – JimmiTh
    Feb 5, 2012 at 16:17
  • Yeah, just noticed that. It doesn't expand to the full width, since it's not necessary until after the animation has filled it with elements. I'm going to try to delay or repeat the function call after the filterportfolio was triggered.
    – Joel Purra
    Feb 5, 2012 at 16:22
  • ... or a hack involving waiting for animationSpeed (+ tolerance) msecs before calling recalculateScrollableArea.
    – JimmiTh
    Feb 5, 2012 at 16:22
  • @TheKaneda Try the setInterval version and see what you think!
    – Joel Purra
    Feb 5, 2012 at 16:43
1

You may use jQuery custom event: when it changes the content of slider, it executes

$(document).trigger('contentChange');

and in the plugin it sets an handler for this event

$(document).bind('contentChange', function(){//here the code that changes the width of slider});

0

Here is my view for this problem.

You can try your second option : capture hash change event

$('window').hashChange(function() {
    $('portfolio-list').filterable();
});

Only minus point with this approach is : IE7 do not support hashChange event natively.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.