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
}
Related
I'm using Videojs and I need to know when the timeline is used to navigate. Especialy I want the "current time" of the player when I click on the bar, and also the timer where it has been clicked (but easy one, I'll explain)
By using the myPlayer.currentTime() I can get the timer of the video, so I with eventListener such as "onclick" or "onmousedown" I though I can get the timer of the video at the click. But it only give me the timer after.
It's not easy to explain so this is an example :
progressbar
The timer is currently 0:01, and I click at 0:14
How to get the "0:01" from the player, which event
This is my event but I get the new timer
myPlayer.controlBar.progressControl.on('mouseup', function (event) {
console.log(myPlayer.currentTime());
});
I even try other event, on other elements such as mousedown which also give me the timer after, and not triggered when I click directly on the slider
myPlayer.controlBar.progressControl.on('mousedown', function (event) {
console.log(myPlayer.currentTime());
});
I've tried lots of things, none of them work, have you any ideas?
The VideoJS library offers a nifty little event that can be useful for your use-case: timeupdate.
Just set up a global variable previousTime and update it each time the timeupdate event fires. As soon as you click on the progressbar you can get the time via previousTime.
var previousTime;
myPlayer.controlBar.progressControl.on('mousedown', function(event) {
console.log("previous: " + previousTime + " current:" + myPlayer.currentTime());
});
myPlayer.on("timeupdate", function(e) {
previousTime = myPlayer.currentTime();
});
I have set event listener onmouseUp.
I want to make difference between onmouseUp in short time (just click) and onmouseUp after holding lets say more than one second OR onmouseDown with mouseMove together.
Reason:
I'm listening button number 2 (which == 2), and i want to have function onclick to center something and zoom something with holding button2 and moving mouse up/down. But not to do it both in one time.
Is it possible in JS or jQuery with any integrated method?
Get NOW on Mouse Down
Get NOW on Mouse Up
var start = 0;
$('#button').mousedown(function () {
start = $.now();
});
$('#button').mouseup(function () {
end = $.now();
$('#output').html(end - start);
if (end - start > 1000) {
alert('you just held the mouse for 1 second');
}
});
DEMO
You can measure the time that was spent for the action before mouse is up:
E.g.:
$(<your_element>).on(<your_event_type>, function(e) {
start = new Date().getTime();
});
Then do a similar thing for the other event type and calculate a stop value.
Compute the difference stop - start and make a decision.
This will also cover the case when the mouse is moved while the click is pressed ( because it is bigger than a specified threshold ). But if you want to check that mouse was moved, you can use its coordinates (e.pageX and e.pageY).
previous.click(function(){
if ((parseInt($('.slider-box').css('margin-left'))) < 0) {
$('.slider-box').animate({'margin-left':'+='+rubrikWidth});
}
});
This code executes a slider to move right, if a button is clicked and the the margin-left is < 0.
But when you click fast and often, the if-clause calculates to slow and then it is possible to move the slider to far.
i want to prevent the button to be clicked too fast.
is there a way to do:
click -> execute event -> and after this execution, you can click again.
You can simply use the animate callback. This should do it, assuming .slider-box only matches a single element:
previous.click(function(){
var slider = $('.slider-box');
if (!slider.data('busy') && (parseInt(slider.css('margin-left'))) < 0) {
slider.data('busy', true).animate({'margin-left':'+='+rubrikWidth}, function() {
slider.data('busy', false);
});
}
});
you can check if an animation is running by checking:
$('.slider-box').queue('fx').length
and use preventDefault if the queue's length is more than zero
I'm trying to create a scrolling button that reacts differently to a quick click event than it does to a prolonged MouseDown (click and hold). The quick click event will scroll a specific number of pixels while click and hold will slowly scroll the pane until mouse up where it will stop.
This is what I have currently:
var mdown;
$('.next').bind('mousedown', function(event) {
mdown = event.timeStamp;
moving = setInterval(function(){
$('#main').scrollLeft($('#main').scrollLeft() + 5);
}, 1);
});
$('.next').bind('mouseup', function(event) {
clearInterval(moving);
if ((event.timeStamp - mdown) < 100)
$('#main').animate({ scrollLeft : '+=800'}, 500);
});
Is there another way of doing this without comparing event timestamps? Is a click event treated any differently than mousedown/mouseup? Thanks!
Check this plugin(It defines an event to handle long clicks):
https://github.com/pisi/Longclick
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();