I'm using jQuery jCarousel for a slider, after few mins I found the way to stop the slider on mouseover, but the problem is it doesn't stop immediately on mouseover, it only stop at the end of the image set (3 images in my demo). However it does start immediately on mouse out. I'm new javascript stuff and couldn't do much by diving to it's source. :(
My Current Code - http://bit.ly/ijNcow
Thank You
Often, we manage a jCarousel by using .click(). In this case - you can use the following code to stop the animation:
itemLoadCallback: {
onBeforeAnimation: function(jc, state) {
jc.lock();
}
}
The jc.lock() or jc.unlock() functions stop and resume the animation, respectively.
The jCarousel code uses two timers that I can see. The timer wrapped in jQuery's animation support and a timer that scrolls the underlying list forward by one item. Your page's code clears the second timer by calling carousel.stopAuto(), but not the animation timer. Hence the animation continues until the next item has been scrolled in (in essence, that the second item reaches the topmost position).
To clear that one you'll have to also call jQuery's stop() function on the carousel element. At a guess (no, I have not tested this), you should call
$('#listing').stop(true);
Having said that, I'm not sure what will happen to the user experience if you've paused half way through an animation and then started it up again (by moving the mouse out, say). The animation won't start up where you left off, that's for sure. I would also guess that the carousel will assume that the animation completed normally and you'll get a "jump effect" as it sets the top item properly in place.
Related
I am looking for a scroller which auto scrolls to the end and stops and switches to manual navigation. I tried googling, there are thousands of scrollers but I need one with both autoplay and manual scroll functionality. Where user can also switch to manual scroll with a single click while it is auto scrolling, something like this.
But it must stop auto scrolling when it has reached end and then switch to manual scrolling.
jQuery Easy Slider 1.7 (Demo here) has both manual scrolling and automatic scrolling, which automatically turns off as soon as the user clicks on the slider. It's also really easy to customize and extend - and I've done so in a few past projects.
As for the autoscrolling to stop at the last slide, you could manually add the functionality using a timer that turns off autoscrolling after all the slides are done. Or you could play with it and just add an event that gets fired whenever the last slide is reached.
Edit:
Using SmoothDivScroll is even better, because it allows the user (you) to add a number of callbacks. So you can just turn off autosliding when the last slide is reached:
$("#makeMeScrollable").smoothDivScroll({
autoScrollingRightLimitReached: function(eventObj, data) {
$("#makeMeScrollable").smoothDivScroll("option","autoScrollingMode","");
}
});
Edit 2:
Sadly, it seems that callbacks not working are a known issue on their bugtracker. You could try and contact the creator of the script and see whether he's planning on fixing them.
Last night I was wondering how it is possible to delay a fadeIn or something similar. It's not something I'm working on, I was just wondering.
If you have a list, with links that activates a tooltip on hover, for example. How do you make it "wait" until you have hovered for 1 second?
I want to do this, so the tool tips doesn't "flicker" when you hover along the list. If you understand what I mean.
The same thing could be used at logins. If you see http://twitter.com/ (not logged in). If the login box in the top, was activated with hover, and not click, it would disappear again if your cursor left the login box. Is it possible to set a "delay" so your cursor could leave the login box, and come back, without it disappearing...?
In short:
- How do you activate a script, when hover after x seconds?
- How do you set a delay for hiding a div (when not hovering) that was activated by hover?
- Is it the same thing, just in reverse?
There is a quite advanced hover plugin that waits for your mouse to slow down before triggering arbitrary code - http://cherne.net/brian/resources/jquery.hoverIntent.html
Alternatively, if you don't need something so advanced... you can simply trigger the animation in a setTimeout(), and on mouseleave call clearTimeout()
Yet another alternative, is to not bother with the delay. If you do a .stop().fadeIn() and a .stop().fadeOut() rather than a simple show() and hide(), you won't get a "flicker" and the effect will look quite nice.
(You can look at .delay() for delaying animation-related code - although this will only delay the animation, even if you move off the div before the delay finishes.)
When running a Jquery animation like slideDown(), it looks like a number of element-specific css properties is set to be updated at a specific interval and when the animation is complete these properties are unset and the display property is simply set to auto or whatever. At least in firebug you can't see those temporary properties any more.
The problem I've encountered is the scenario where we stop the slide down with stop(). The element is then left with the current temporary css values. Which is fine because it has to, but let us say that I stoped the slidedown because I have decided to slide it back up again a bit prematurely. It would look something like this:
$(this).slideDown(2000)
//The below events is not in queue but will rather start execute almost
simultaneously as the above line. (dont remember the exact syntax)
$(this).delay(1000).stop().slideUp(2000)
The above code might not make much sense, but the point is:
After 1 second of sliding down the animation is stopped and it starts to slide back up. Works like a charm.
BUT!!! And here is the problem. Once it it has slid back up the elements css properties are reset to the exact values it had 1000ms into the slideDown() animation (when stop() was called). If we now try to run the following:
$(this).slideDown(2000)
It will slide down to the very point the prior slideDown was aborted and not further at half the speed (since it uses the same time for approximately half the height). This is because the css properties were saved as I see it. But it is not especially wished for. Of course I want it to slide all the way down this time.
Due to UI interaction that is hard to predict everything might soon break. The longer animations we use increases the risk of something like this happening.
Is this to be considered a bug, or am I doing something wrong? Or maybe it's just a feature that is not supported?
I guess I can use a callback function to reset the css properties, but depending on the animation used, different css properties are used to render it, and covering your back would result in quite a not-so-fancy solution.
You could try to replace the slideUp and slideDown with animate.
http://api.jquery.com/animate/
This way, you are explicitly telling it what to do.
This is the expected (though not desirable) behavior...to get the .slideDown() to go to the full height, start the slides from the finished position, by using .stop(true, true), so the animation completes. The second true argument, telling it to skip to the end of the animation is the important part here, so those "final" values it slides back to are the full height, etc...rather than the height it was at when it stopped sliding.
This was a bug that has been fixed in jQuery 1.7.2: http://bugs.jquery.com/ticket/8685
I have written a scroller function which will scroll one div inside another one. The idea is to use the setInterval method to change the margin of the inner element to simulate a scrolling div.
The problem I am facing is that the scrolling is not entirely smooth. Sometimes it stops for a split-second and then it resumes. What can I do to remove these random hiccups? (I am moving 1px per 20 milliseconds)
three comments that might make an answer:
i see you are already using jQuery. it has scroll functions that have been smooth for me.
have you tried fractional positions? as in scrollerMarginTop -= 0.7;
also, you should probably clearInterval() unless the user can move the div and you want it to resume scrolling back into place.
if it works great until you interact with it, consider clearing the interval and waiting until interaction occurs and re-intervaling.
hth
It was quite some time ago that you asked this question, but if you haven't found a working solution you could try Smooth Div Scroll which is a jQuery plugin that does exactly what you describe: scroll one div inside another one.
Ive been fiddling with this for hours and hours and just cant get it right. First off my sites are already using Prototytpe and Scriptaculous, and to change would take a long time.
Basically I am after achieving a slideshow effect similar to jQuery Cycle plugin. I have written most of it but cant get over this hurdle:
I need the user to be able to press a control button which will skip the slide to which ever one they have picked. My problem is that if a fade / appear effect is running, then it causes an overlap.
I am using queues and they are in their own scope. The problem as I see it is that the fade effect on one slide and the appear effect on the next slide are separate functions. Which means that if the user clicks the control button to move to another slide whilst the animation is inbetween fade & appear, then the next cycle will slot itself in the queue between those 2 effects. The default is to append to the end of the existing queue, which should be fine. But if the appear hasnt been added when a new fade is instantiated, then the queue messes up.
I can make it so nothing happens if animation is in effect but thats not the effect I am after. I want to be able to click a slide and whatever is happening to effectively stop and the next slide appear.
This is an example of what I am after: http://www.zendesk.com/
Im sorry if that doesnt make sense. Its a tough one to explain.
If you don't find anything by the lib you can just use the DOM and some JS like in this question: How do you make something to appear slowly on a page using Javascript?
I managed to fix my own problem last night.
I had already tried this but couldn't get it to work right. All I done was added a flag variable which is true if any animation is running (var running = true; [or false])
If the user clicks the pager buttons to move the slide (lets say from slide 1 to slide 4), and if the slide is already in motion (then var running == true), then the code finds all queued effects in the system, deletes them, and then hides all the slides. It then just starts a new cycle to slide 4, as the user requested.
Doesn't matter how fast you click the pager buttons now, it works seamlessly. :)