I'm developing a simple one page website and I'm integrating the jQuery UI Slider. The website I'm integrating it in is : Website.
It seems like I'm having a little problem with the slider. If you look closely at the slider when navigating with the left and right arrow ( or the left and right keyboard keys ) you will notice that when going backward, before the last step, the min range jumps ahead the handle with a few pixels ( the background image ).
And also the animate property attached to the handle it doesn't work when using the mouse cursor to move the handle, per say the handle is in position 0 and you click on the last position, normally it should animate to the last position but it jumps there.
Could someone tell me how to fix these bugs ? I tried working on the CSS for the first problem but it doesn't seem to be because of that.
"min range jumps ahead the handle" - I've reduced the bug here: http://jsfiddle.net/jefferyto/Gd5dn/
This is a bug in jQuery.animate() when animating non-pixel values; Slider uses percentages. Before animating, jQuery converts the element's starting value (in pixels) into the end value's units, and assigns this non-px starting value to the element (lines 8601-8605 in jQuery 1.7.2 (unminified)).
The calculation is flawed for small end values (like 0%), and so the range's starting width is larger than what it should be.
I've opened a pull request with a fix; the same fix can be applied to the current stable version of jQuery.
Update: You can find a plugin that fixes this bug (for jQuery 1.7.2) here: http://jsfiddle.net/jefferyto/zbkQX/
Copy from (at the top)
// Start jQuery.animate() fix
to (before the test code)
// End jQuery.animate() fix
It should work if you paste this code into your plugins.js.
"it should animate to the last position but it jumps there" - this is because the Slider and jPages plugins are connected with circular callbacks.
When the user clicks on the slider, Slider triggers a slide event then animates the handle and range. The slide event handler calls jPages to change to the new page. jPages calls its assigned callback function, which passes the current page number back to Slider. Slider sets its value and starts to animate the handle/range.
After the slide event, Slider goes back to animating the handle and range (which is actually the second time it is animating). Slider calls .stop(1, 1) on the elements before animating, which causes the first animation to stop and jump immediately to its end value. (The second .animate() does nothing since the elements are already in the correct position.)
(I hope that made sense :-) )
I suggest adding logic in the jPages callback to call Slider with the new page number only if the trigger isn't originally from Slider.
Update: I think you'll need to update both callbacks:
For Slider:
slide: function(event, ui) {
if (!self.paging) {
self.paging = true;
$(self.shop_navigation_class).jPages(ui.value);
self.paging = false;
}
}
For jPages:
callback: function(pages) {
var data = {
current_page: pages.current,
total_pages: pages.count
}
self.set_local_storage_data(self.data_key, JSON.stringify(data));
if (!self.paging) {
self.paging = true;
$(self.shop_slider_class).slider("value", pages.current);
self.paging = false;
}
}
Please let me know if this works for you.
The simplest answer is probably to just not use jQueryUI's slider.
Having looked at your code it looks like you're easily competent enough at JS and CSS to replicate its appearance and core behaviour yourself, and make it work exactly how you want it to.
Related
im using this DropDownList for searching item and i have a problem my problem is how can i scrolling in this DropDownList with up and down in Keyboard?
JSfiddle
EDIT: Since my first solution wasn't working properly when more items were added i adjusted it a little. Here's the fiddle
What i did:
First of all, i checked the position of the storeTarget and #search_results and logged it into the console to figure out what was causing the problem.
(This is something you could've done by yourself btw...)
What i found out then was, that, after a couple of items, the top position of the storeTargetitem was higher than the visible area of the #search_results.
so i changed the parameter of
$("#search_results").scrollTop(storeTarget.offset().top);
to scroll a little further than the current position and to make it smoother changed the check in the if-clause:
if(storeTarget.offset().top>220){
$("#search_results").scrollTop($("#search_results").scrollTop()+40);
console.log(storeTarget.offset().top);
console.log($("#search_results").scrollTop());
}
I didn't check for the case when the user goes up, that's left up to you to figure out.
here's a working fiddle based on your code
END EDIT
What i did:
when moving up or down with the keys i check if the offset().top value of the storeTarget is greater or lesser than 200 (you may change that depending on the size of your list) and if so, we scroll the top of #search-results to the
top of your storeTarget :
if(storeTarget.offset().top>200){
$("#search_results").scrollTop(storeTarget.offset().top);
}
I would like to trigger an SVG animation (thats coded into the SVG file itself) to happen when the user scrolls down. I believe this is done by setting "begin: indefinite" on "" and then setting it to 0 with jquery/js when the user scrolls? Anything I have tried does not seem to be working so I was wondering if anyone can give me some better direction on how to accomplish this.
Setting the begin time of an animation element to "0" tells it to start immediately after the document loads. Since the document has already loaded by the time your user is scrolling, it won't have any effect at that point.
To trigger an animation element using Javascript, use the beginElement() or beginElementAt(delayInSeconds) methods. The first method starts the element immediately, the second starts after the specified delay. More info in the SVG specs.
window.addEventListener('scroll', function(e){
document.getElementById("animateOnScroll")
//.setAttribute("begin", 0); //this doesn't work!
.beginElement(); //this does!
});
http://fiddle.jshell.net/k95aZ/
I am creating a whack-a-mole style game where a sum is given and numbers animate from the bottom of the container to the top. The aim of the game is to click the correct answer to the sum and collect as many correct answers as possible.
I have also added a couple of extra icons to make the game more fun. One of the icons is a flame which speeds up the animation for 5 seconds.
At the moment it makes all the icons move really fast all at once. Instead of this happening I want the flow to continue as usual, but at a faster pace.
This is what I have so far..
$(".character").click(clickThrottled(function () {
if ($(this).hasClass("heat")) {
$(this).effect("explode", 400);
$("#container").children().css('top', '400px').fadeIn(1000).animate({
'top': '-100px'
}, 3000).fadeOut(1000);
}
}));
Can someone show me where I am going wrong? Look at the demo and click the flame icon to get a better understanding of the problem.
Fiddle: http://jsfiddle.net/pUwKb/52/
Easing will make all the elements ease to the top at the same time, but in a stylish way (like they slow down at the end.)
What you actually need to do is keep a flag called 'isFlameOn' or 'speedModifier' would be better. When a flame icon is clicked, set 'speedModifier' to equal like 2 or 3, which will make the speed twice or three times as fast as normal.
Remove this:
$("#container").children().css('top', '400px').fadeIn(1000).animate({
'top': '-100px'
}, 3000).fadeOut(1000);
Because you will be changing the speed of objects individually.
Now go down to wherever you manage each icon (move them) and instead of saying: item[i].y -= item[i].speed;
Do item[i].y -= item[i].speed * speedModifier;
If you make them animate to get to the top, then you will need to keep track of each of those animate intervals and reset them. So if you create an item and then .animate it, you will need to remove that .animate effect and create a new one with the compensated speedModifier percent. You will have an easy day if you did it frame by frame instead :).
When you want the flame effect to run out, just set speedModifier back to 1. If you animated each item, you'll need to again remove the current .animate and replace it with a normal speed. Be sure to keep track of each item's random speed so that you can reset its speed back to the original speed after the effect wears off.
Look at the different easings provided by jQuery UI, they should solve your problem. To use them just set property easing of animate (if you need more advanced ones you should also include jQuery UI).
For further customization you can use the step callback of animate.
I built a slideshow-menu (using Slide JS - http://www.slidesjs.com/ ) and added a hover-event, so images will already switch when moving the mouse over the menu point. Additionally, when moving out of the whole block, there's a mouseleave event, which sets the image and menu point back to the first one.
Now when I quickly switch between menu points (hover event) and then leave the whole block (mouseleave), it usually skips the mouseleave event (- or it never reaches it because the hover events (including a fade effect) take up too long).
Is there a way to thoroughly work off each event (or at least the last one in a row - e.g. mouseleave or last hover)?
Maybe an image of the website layout helps?
Red: Hover-Event (changes green content)
Blue: Mouseleave-Event (green goes back to default)
If the fade effect is the culprit, then try adding a stop(true, true) function before your fade effect.
$(slideshow-menu-selector).on('mouseleave', function(){
// Reset code here
$(element-selector).stop(true, true).fadeOut();
})
This is just a sample code, based on your question. If you can put up a Fiddle, it would help a lot!
If you check the following link for my working example:
http://jsfiddle.net/xavi3r/Cd8cV/
You can see that when prepend() is invoked the positioning is lost within the animation and the order in which elements are placed seems to get distorted; (check HTML to see output);
$('#container .animateMe').prepend($('#container .animateMe .copy ').clone().removeClass('copy').removeClass('active'));
I have a solution, but it doesn't solve the prepend problem. If you click any button when the animation is still happening, the squares become offset.
This is an edit where the click event becomes unbinded to your left and right buttons as the animation is happening. This stops another animation running at the same time, and the squares don't get offset. The event gets rebinded at the end of the animation callback.
Check it out :
http://jsfiddle.net/SxFPc/
I have merged your left and right click methods into a single handler since they were doing the same thing, apart from the position offset.