Question

I’ve got into a rather simple, yet annoying problem.

I’m trying to create a kind of “pick a date” calendar, but in carousel style, just like those image sliders.

Once the user clicks on a date, the <div> should scroll to the center, and have its CSS changed, animated.

I’ve found this image slider which is exactly what I need: http://opiefoto.com/articles/photoslider (Demo at the bottom)

All I wanted to do, is, take off the big image and the play / pause button, and change the CSS a little bit, so far, I’ve managed to do THIS: http://chadascinco.net/photoslider/

People with keen eye for glitches probably already had noticed that… when you click on a thumbnail, and then click on another, the previous one keeps its old height, still, you can see it “flicking” like something is forcing it back to that height.

And that’s my problem.

If you check using firebug or something similar, you’ll notice that the height GOES to 66px, but goes back to 121px just after that.

And now, for something weird, if I take off the “top” value change, the height works perfectly. It grows and go back exactly as I need. But if I put it back… damn, there we go, height glitch.

I’ve tried to contact the author through email, but it has been 3 days and I’ve gotten no reply back.

And here I ask ya all for a share of knowledge, I’m a very newcomer with JavaScript and jQuery, so it might be also a problem in my code. I just tried to use basic programming logic.

The js responsible is “photoslider.js” and if you check for “FELIX Note”, you’ll find notes in every single part where i made any changes. Any other comments are original from the author.

The lines where the transition works are from 265 to 287.

If anything I said is confusing, I’d be glad to be more accurate.

If you guys also need to check the original code, you can check it here: http://chadascinco.net/photoslideroriginal

Also, if you know any other application that works like what I need, I’d be most thankful to know.

Thank you all once again.

BRAND NEWS EDIT: I’ve found one interesting fact: if you check the lines i mentioned, you’ll notice 3 animation calls.

No matter what you do, if you put the same CSS property on the SECOND call for both active and inactive divs, it’ll flick and cause this glitch. I’ve tried changed to “background-color” instead of height, changing from black to white and backwards.

Here’s what happened: When i load the page, only the active one is black. Good. But when i click another, this one becomes black, and the PREVIOUS one tries to become white, but is forced to become black again. i wonder, why only the Second call? If it was the first, or the last, or every of them, alright, but… only the second? Weird.

Answer 1

Hey, I got the problem. The thing is this library isn’t expecting you to use multiple animations at a time. the function SKEL.EFFECTS.Slide.animate which inits the animations creates a field in the animated object, called skel_animate_id, which is in fact the id of a timer set up to do the animation.

As this library doesn’t expect multiple animations at a time, when you create a new animation, it just does element.skel_animate_id = setInterval(....., and if you are following me, you’ll realize that anything that was on skel_aimate_id before (i.e. the library’s only reference to any previous animation’s timers) is lost after that assignment.

Now, there’s a step function, called by the timers, which is in charge of recognizing when the animation has ended, and stop the timer itself, but it does that by calling clearInterval(element.skel_animate_id);, which will obviously only clear the timer related to the last attribute animated.

Long story short, when you call the second attribute’s animation (before the first one ended), you leave an open timer, which keeps on going and going “animating” the first attribute (i.e. setting it to it’s final value).

EDIT: Live demo of fix.

THE GUILTY SNIPPET

Lines [488-531]

SKEL.EFFECTS.Slide = {
counter: 0,
fps: 50,

//handles the animation from an attribute to an attribute
animate: function(element,cssAttribute,from,to,duration,transition){

    if(element.css('display') != 'block'){
        element.skel_old_display = element.css('display');
    }

    //if there isn't a default transition set one
    if(!transition){
        transition = SKEL.Transitions.quadOut;
    }

    //cancel any current animation

    // FELIX Note: I've commented this because when we had 3 transitions on the same element, this function would make only the first one to work.
    //SKEL.EFFECTS.Slide.stop(element);

    var startTime = new Date().getTime();

    //IE doesn't support arguments, so make a function that explicitly calls with those arguments
    element.skel_animate_id = setInterval(function(){
        SKEL.EFFECTS.Slide.step(element,cssAttribute,from,to,duration,startTime,transition);
    },(1000/SKEL.EFFECTS.Slide.fps));

    return element.skel_animate_id;
},

//cancels any animation event
stop: function(element){
    //console.log(this,element,element.skel_animate_id);
    //console.log(element.skel_animate_id);
    if(element.skel_animate_id){
        clearInterval(element.skel_animate_id);
        element.skel_animate_id = 0;
        if(element.skel_old_display){
            element.css('display',element.skel_old_display);
        }
    }

},

POSSIBLE SOLUTION

I’d have skel_animate_ids as an array, and store every interval with a reference to the attribute animated, so the step function nows which interval to clear.

in SKEL.EFFECTS.Slide.animate

if (!element.skel_animate_ids){
    element.skel_animate_ids = new Object();
}

//IE doesn't support arguments, so make a function that explicitly calls with those arguments
element.skel_animate_ids[cssAttribute] = setInterval(function(){
            SKEL.EFFECTS.Slide.step(element,cssAttribute,from,to,duration,startTime,transition);
        },(1000/SKEL.EFFECTS.Slide.fps));

return element.skel_animate_ids[cssAttribute];

then in SKEL.EFFECTS.Slide.stop

//cancels any animation event
stop: function(element,attribute){
    if(element.skel_animate_ids[attribute]){
        clearInterval(element.skel_animate_ids[attribute]);
        delete element.skel_animate_ids[attribute];
        if(element.skel_old_display){
            element.css('display',element.skel_old_display);
        }
    }

},

and in SKEL.EFFECTS.Slide.step (line 575)

if(finished){
    SKEL.EFFECTS.Slide.stop(element,cssAttribute);
}

I think that should do it, but I can’t really test it in my browser. If my code doesn’t quite work, I must have missed something, but I’m still sure that’s the problem, you just have to figure out how to solve it (or change libraries =D). You just try my suggestion, let me know how it worked.

Cheers

EDIT: I couldn’t wait, so I whipped a JSFiddle to test, and yeah, it works with those changes. Check it out.

EDIT2: Corrected typo: was still referencing skel_animate_id instead of skel_animate_ids in the first bit of code.