Problem with jQuery application. Is it a glitch or incorrect coding?

Question

I have a pretty simple but annoying problem.

I am trying to create a kind of calendar "select date", but in the style of a carousel, like those image sliders.

As soon as the user clicks on the date, the <div> should go to the center and change its CSS-animated.

I found this image slider, which is exactly what I need: http://opiefoto.com/articles/photoslider ( Demo below >)

All I wanted to do was take a large image and play / pause button, and change the CSS a bit, so far I have managed to do THIS: http://chadascinco.net/photoslider/

People with a sharp look at glitches probably already noticed that ... when you click on a thumbnail and then click on another, the previous one retains its previous height , yet you can see this “click”, as if something forces him back to that height.

And that is my problem.

If you check the use of firebug or something similar, you will notice that the GOES height is up to 66px, but immediately returns to 121px.

And now, for something strange, if I remove the “top” change in value, the height works fine. It grows and returns exactly as I need. But if I come back ... hell, we go there, a glitch in height.

I tried to contact the author by email, but 3 days passed and I did not receive a response.

And here I ask all of you to share a share of knowledge, I am very new to JavaScript and jQuery, so this can be a problem in my code as well. I just tried using the basic programming logic.

The answer to js is “photoslider.js”, and if you check “FELIX Note”, you will find notes in each individual part where I made any changes. Any other comments are original to the author.

The lines in which the transition works range from 265 to 287.

If anything I said is confusing, I would be happy to be more accurate.

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

Also, if you know any other application that works the way I need, I would be very grateful for your understanding.

Thanks again.

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

No matter what you do, if you put the same CSS property in the SECOND call for both active and inactive divs, it will click and cause this crash. I tried changing to "background-color" instead of height, changing the color from black to white and back.

Here's what happened: when I load the page, only active black. Good. But when I press another, this one turns black, and the PREVIOUS tries to become white, but turns black again. I wonder why only the second call? If it was the first or the last, or each of them, well, but ... only the second? Weird

Answer 1

Hey, I have a problem. The fact is that this library does not expect you to use multiple animations at a time. the SKEL.EFFECTS.Slide.animate function, which in the animation creates a field in the animated object, called skel_animate_id, which is actually the identifier of the timer configured for the animation.

Since this library does not expect several animations at a time when you create a new animation, it just does element.skel_animate_id = setInterval(..... , and if you follow me, you will understand that everything that was on skel_aimate_id before (i.e. the library refers only to any previous animation timers) is lost after this assignment.

Now there is a step function called by timers, which is responsible for recognizing when the animation has finished, and stop the timer itself, but it does this by calling clearInterval(element.skel_animate_id); that, obviously, will only clear the timer associated with the last animated attribute.

In short, when you call the second animation of the attributes (until the first end), you leave an open timer that continues to move and "animates" the first attribute (that is, sets its final value to it).

EDIT: Live patch demonstration.

DESTINY OF VILLA

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 would have skel_animate_ids as an array and save each interval with a link to an animated attribute, so the step function indicates which interval will be cleared.

at 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 to 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 this needs to be done, but I cannot check it in my browser. If my code doesn’t work, I must have missed something, but I'm still sure that the problem is, you just need to figure out how to solve it (or change the libraries = D). You just try my suggestion, let me know how it works.

Greetings

EDIT: I could not wait, so I whipped up the JSFiddle for testing, and yes, it works with these changes. Check it out .

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

Answer 2

In your rush, to remove functionality from the slider, you basically killed it if you can pardon your language:

 /* var sliderCaption = $(document.createElement('div')); sliderCaption.addClass('photoslider_caption'); sliderDiv.append(sliderCaption); var sliderNav = $('#'+key+' .photoslider_nav').get(0); if(sliderNav != null){ //remove it $(sliderNav).remove(); } */ sliderNav = $(document.createElement('div')); sliderNav.addClass('photoslider_nav'); 

The syntax shortcut should already tell you what is wrong. You commented on the definition of a critical variable in application design.

Try at least resolving anything related to the sliderNav variable. This is the functionality that you are trying to simulate.