I am using jquery ui spinner, I want to call a function on spinner stop event.
I do not want to call that function every stop event, only when the user stop clicking up or down arrow.
Change event works only the textbox loss the focus, I want when text box is on focus.
Thanks in Advance..
If you want your callback to be triggered after a sequence of clicks is over, you can use _.debounce for that. Here is the code and the plunker:
$(function(){
var expectedDelayBetweenClicks = 500;
var element = $("input");
element.spinner({
start: function(e, ui) {
$('.selected-value').text('Waiting...');
},
stop: _.debounce(function(e, ui) {
$('.selected-value').text(e.target.value);
}, expectedDelayBetweenClicks)
})
});
This guarantees that you callback will be triggered only after several clicks, if the delay between those clicks is 500 ms. You can decrease this delay or increase it based on how fast you expect users to click the spinner.
Related
I have a carousel and I need to make him work as Instagram carousel does.
On click change slide, but on mousedown just stop animation. My JQuery :
$(".fancy-carousel").on('mousedown',function (e) {
...stop animation
});
$(".fancy-carousel").on('mouseup',function (e) {
..continue animation
});
$(".fancy-carousel").on('click',function (e) {
..change slide
});
But i don´t know how can i let script know about difference between "click" and "mousedown". When i click on element and hold for a time, it stop animation but after "mouseup" it trigger "click" event too. Is there any way how to split this events? Or should i do it with some calculating of mouse hold time?
A “click” is just a full cycle of a “mousedown” and a “mouseup”. You can’t have one without the other.
For your code to know the difference, you’ll need a variable that tracks your intentions.
Create a variable to track your intention - default it to “click”.
var intention = "click";
In your mousedown function, pause the animation and start a timer. We will use this timer to detect how long the mouse is down for (I.e, if it’s for over a second, it’s not a click and you just want to trigger mouseup)
var detectIntention = setTimeout(function(){
intention = "mouseup";
})
In your mouse up function, cancel this timeout. If mouse up is called after just a few MS, then you want to do a click.
clearTimeout(detectIntention);
if (intention === "mouseup") {
// do mouseup stuff
}
// reset intention
intention = click;
Check in your click function that you wanted to do a click;
if (intention === "click") {
// do click stuff
}
For the following test case (I replaced the XHR call with setTimeout to represent an XHR call with a very fast response):
<html>
<body>
<div onclick="console.log('onclick parent')">
Event Queue Test:
<input type=text onblur="console.log('onblur'); setTimeout(function() {console.log('onblur timeout')})"/>
</div>
</body>
</html>
If I click in the text field and then click on the text preceding the text field, I get the following output in Chrome (v70):
onblur
onblur timeout
onclick parent
I would have expected the parent onclick handler to have been queued before the setTimeout event. In Chrome, at least, it does not. Is this behavior specified by the standard or implementation-dependent? I'm also interested in workarounds to always have the parent onclick handler run before the timeout (or XHR) handler.
In my actual use case, this issue is problematic because the events are not guaranteed to be queued in the same order, depending on how long the XHR request takes to run.
This won't necessarily help with your actual XHR problem, but I think I understand what's going on. I extended your sample code, using jQuery for convenience:
<div class=parent>Label: <input class=field></div>
and the JavaScript:
var $d = $(document);
var t = {
mousedown: -1,
mouseup: -1,
focus: -1,
click: -1,
blur: -1,
timer: -1
};
["mousedown", "mouseup", "focus", "click"].forEach(function(event) {
$d.on(event, ".parent", function() {
t[event] = Date.now();
})
});
$d.on("blur", ".field", function() {
t.blur = Date.now();
setTimeout(function() {
t.timer = Date.now();
}, 150);
});
$d.on("click", ".parent", function() {
setTimeout(function() {
var race = Object.keys(t).sort(function(k1, k2) { return t[k1] - t[k2];});
console.log("Result: ", race);
race.forEach(function(key) { t[key] = -1; });
}, 1000);
});
What that code does is order the events by the times they actually happen. In the situation of clicking on the text after clicking and focusing in the input field, the order with a short timeout (less than 100ms or so) is
focus
mousedown
blur
timer
mouseup
click
The "blur" and "timer" events are for the input field and its setTimeout() callback. If I make that timeout interval longer, like 150ms or so, then I get
focus
mousedown
blur
mouseup
click
timer
That, I think, makes some sense: the "mousedown" and "mouseup" events are driven by your actual physical interaction with the mouse button. The "click" event does not make sense until "mouseup" is received. With a short timer in the "blur" handler, the timer can fire before the mouse has physically communicated the "up" event through your OS etc.
How can I make a form fade out when focus is lost entirely? Or another way of putting it: How do I prevent the form from fading when the focus is just shifted from one input to another?
My failing approach is:
form.focusout(function(){
form.fadeout();
});
I have tied to add an if statement counting the number of inputs with focus but to no benefit since the lostfocus fires before the new focus is set.
try setting a timeout, and then if another input has focus, clear the time out to avoid the fadeout:
var timeout;
form.find('input').on('focusout', function(){
timeout = setTimeout(function() {form.fadeout();}, 2000);
});
form.find('input').on('focusin', function(){
clearTimeout(timeout);
});
I'm able to detect a click on a button using jQuery
$('#myButton').click(function(){
// do something
});
but, when the user clicks many times on the button, it fires unnecessary intermediaries events.
I would like to fire the event only on the last click on the button.
Something like:
$('#myButton').lastClickOnASequenceOfClicks(function(){
// ignore the multiple clicks followed
// do something only on the last click of a sequence of clicks
});
With that, if the user clicks 10 times (with a little interval of time), it should fires an event only on the tenth click.
Each click resets the timer.
var timer;
$("#myButton").click(function () {
var timeToWait = 1000;
clearTimeout(timer);
timer = setTimeout(function () {
// do something only on the last click
}, timeToWait);
}
Update
Another way to solve this problem of handling 'multiple click events' generated by the user is to do what was mentioned in the OP comments section. do something on the first click THEN disable the button so the user cannot click it anymore (maybe also set a time for the button to become enabled again)
var timer, timeToWait = 5000, selector ="#myButton";
$(selector).click(function (e) {
$(this).attr("disabled", "disabled");
// do something
// Then wait a certain amount of time then remove the disabled attr on your button
timer = setTimeout(function () {
$(selector).removeAttr("disabled");
}, timeToWait);
})
I would like to display a helpful DIV that basically shows the user how to accomplish something on a particular page, but only if the user has been idle for a period of time, say, 30seconds.
What I mean by "Idle" is:
Not clicking any links
Not right clicking anywhere
Exceptions:
I would like to exclude the following conditions from the Is User Idle rule:
User has scrolled up or down/left or right
User has pressed mouse button on an empty area on the site/ or on an element which has no source/link for example, an image with no hyperlink.
and, Pressing keyboard buttons
Can this be done? Or can we only detect when a particullar event occurs?
Any thoughts/suggestions/resources will be greatly appreciated.
Thank you
fairly basic...
var trigger = 30000
$.(function(){
setInterval('displayInf()',trigger );
$('body').bind('click dblclick keypress mousemove scroll', function(){
clearDisplayInf();
});
});
function displayInf()
{
$('body').append('<div>Your notification div</div>');
}
function clearDisplayInf()
{
trigger = clearInterval(trigger);
trigger = setInterval('displayInf()', 30000 );
}
that should do the trick - you could add some script to make the div removable and start the timer again once its removed but that just polishing up really..
Event in DOM would bubble from leaf to root, thus add a event listener on document would make sense.
But since we are possibiliy stop bubbling for click event in certain element, register click event on document may not work perfectly, in that case, register mousedown and mouseup event would help:
var timer; // create a timer at first
// restart timer on click
function startIdle() {
timer = setTimeout(function() { /* show div */ }, time);
}
if (document.addEventListener) {
document.addEventListener('mouseup', startIdle, false);
}
else {
document.attachEvent('onmouseup', startIdle);
}
// start the first timer
startIdle();