Javascript setInterval functionality to onmousedown event - javascript

I am trying to create a Virtual Keyboard using Javascript and an SVG keyboard image.
I have been able to access the onmousedown property of a 'button' element and make a call to myFunction when that button is pressed.
button.onmousedown = (function(self) {
return function() { self.myFunction(); };
})(this);
I was hoping to add a repeat key feature and want to incorporate setInterval so that myFunction repeats every second or so. I am having trouble incorporating the setInterval into the onmousedown functionality. Should I try to add setInterval to above code or add it to myFunction? I want to use just basic Javascript. Thanks in advance.

var interval;
button.addEventListener('mousedown', function() {
interval = setInterval(doSomething, 20);
});
button.addEventListener('mouseup', function () {
clearInterval(interval);
});
function doSomething()
{
//your code here
}
Something like this?
Live example: http://cssdeck.com/labs/cbpb6qqm

Related

How to call a function after click function execute

I'm using click event to execute some code. And after execute the click function code, want to execute another function or code like a callback function. But have struct to call function after the click function.
var $body = jQuery('body');
$body.on('click', '.modal_popup_btn', function() {
var $data_type = jQuery(this).attr('data-popup-link');
jQuery('.modal_wrapper[data-popup="'+ $data_type +'"]').removeClass('modal_closed').addClass('modal_opened');
jQuery('.modal_wrapper[data-popup="'+ $data_type +'"]').find('.modal_container').removeClass('modal_container_closed').addClass('modal_container_opened');
setTimeout(function() {
hiddenBodyScrollWithPadding();
}, 550);
});
Here is the code, need to call 'hiddenBodyScrollWithPadding()' after the click code execute. Here used setTimeout to execute before code. But setTimeout is a bad idea to this situation. Can anyone have another idea to execute this function in a better way?
If your '.modal_wrapper' animating, then add this jQuery Code.. Your Popup modal will listen transition event is ended then check if Modal has .modal_opened class. If transition has been ended and hasClass condition is true then your custom function will be executed.
jQuery('.modal_wrapper').on('transitionend', function(event) {
event.preventDefault();
if(jQuery(this).hasClass('modal_opened')){
hiddenBodyScrollWithPadding();
}
});

Create a custom event like 'click' for longtap

I want to make a custom event which I can use like
$('.entry').on('click', function().......
I need it for detecting a longtap for mobile devices. I want to call it like this:
$('.entry').on('longtap', function().......
I read a lot about creating events but the most ways are with bind and trigger. So is there a way to do this?
Here is a way to implement long tap:
var clickStart;
document.getElementById("cool_button").addEventListener('mousedown', function() {
console.log('mouse down');
this.clickStart = new Date().getTime();
});
document.getElementById("cool_button").addEventListener('mouseup', function() {
console.log('mouse up');
if ((new Date().getTime() - this.clickStart) >= 1000) {
console.log('this is a long tap');
}
});
<button id="cool_button">i'm a long tap button</button>
You may use one of the handmade solutions, provided here.
You may attach it as third-party script.
There is a special taphold event for jQuery Mobile.
As said here , you don't need to create a custom event for longtap, you only need js timer and two already exsiting events like mouseup, mousedown:
var pressTimer;
$(".entry").mouseup(function(){
clearTimeout(pressTimer);
// Clear timeout
return false;
}).mousedown(function(){
// Set timeout
pressTimer = window.setTimeout(function() {
console.log("hi!")
},1000);
return false;
});
I made an example for you
https://jsfiddle.net/sOoN92/74rbc2ph/

Multiple simultaneous button animation

I am trying to create an animation for a button on click event. A simple function which simply consists on toggling classes and setting timeouts is used for the animation.
It works well for one button but when I have more than one button and I click two or more of them consecutively before the animation is finished, the animation stops and continues on the element which has been clicked later.
So the problem is to make the animation function to refer to the object which has triggered it, therefore creating multiple instances of it, for which I haven't been able to find a simple solution after hours of search).
Thanks in advance.
There's a simplified example (real example has more classes toggles):
$('.myButton').on('click', animateButton);
function animateButton(){
var $this = $(this);
$this.addClass('animate');
setTimeout(function(){
$this.removeClass('animate');
},2000)
}
EDIT: I've made a fiddle: https://jsfiddle.net/8ozu14am/
EDIT2: SOLVED
Using $.proxy() it is possible to maintain the context.
$('.myButton').on('click', animateButton);
function animateButton(){
$(this).addClass('animate');
setTimeout($.proxy(function(){
$(this).removeClass('animate');
},this),2000)
}
Jquery return an Event to your handler.
It have the property targetwhich is the DOM element that initiated the event.
$('.myButton').on('click', animateButton);
function animateButton(evt){
var $this = $(evt.target);
$this.addClass('animate');
setTimeout(function(){
$this.removeClass('animate');
},2000)
}
SOLVED
Using $.proxy() it is possible to maintain the context.
https://api.jquery.com/jQuery.proxy/
$('.myButton').on('click', animateButton);
function animateButton(){
$(this).addClass('animate');
setTimeout($.proxy(function(){
$(this).removeClass('animate');
},this),2000)
}

jQuery Slide in and out

im trying to get a div to slide down on click, which works perfectly, but when clicking the button again, i want to to be hidden, maybe with slideUp()... However im not quite sure how to do it... Any help would be appreciated...
var iJob = this;
this.init = function () {
//Hook up My Page
$("#open-mypage").one("click", iJob.onMyPageDisplayJquery);
//Hook click event on all "mere om.."
/*$('.more-jobs').one("click", iJob.onJobCategoryMoreInfoJquery);
$('#more-wrapper .close').bind("click", iJob.onJobCategoryMoreHideJquery);*/
};
//Vis Min Side
this.onMyPageDisplayJquery = function (event) {
event.preventDefault();
//iJob.jobCategoryMoreHideJquery();
$("#mypage-result").addClass("hidden");
$("#mypage-li").removeClass("mypage-li").addClass("mypage-li-hover");
$('#mypage-info').slideDown('fast', function () {
// Load content with ajax
return false;
});
};
As you can see, slideDown works fine, and the div is displayed - However clicking on the button again it should be hidden... I've tried this, slideToggle(), without any luck
//Vis Min Side
this.onMyPageDisplayJquery = function (event) {
event.preventDefault();
//iJob.jobCategoryMoreHideJquery();
$("#mypage-result").addClass("hidden");
$("#mypage-li").removeClass("mypage-li").addClass("mypage-li-hover");
$('#mypage-info').slideToggle('fast', function () {
////Animation complete
});
};
Have you looked at the JQueryUI Accordion?
I think this might do what you want already?
slideToggle should work. I would suggest it's probably because you're not reversing the other actions you're taking... e.g:
$("#mypage-result").addClass("hidden");
$("#mypage-li").removeClass("mypage-li").addClass("mypage-li-hover");
Should be flipped to...
$("#mypage-result").removeClass("hidden");
$("#mypage-li").removeClass("mypage-li-hover").addClass("mypage-li");
...when clicked again.
The problem is you are using the one function to bind the click handler, which will only ever fire once. Change it to use bind.

JavaScript repeat action when mouse held down

Is there to have a JavaScript function repeated every so many milliseconds that an html button is held down? It would be great if this could be done with standard JavaScript, but using jQuery or a jQuery plugin would be great too.
On the mousedown() event, this code starts a repeating timer (every 500ms in this example) that is cancelled as soon as the mouseup() event occurs. This should be adaptable to what you want:
var intervalId;
$("#button").mousedown(function() {
intervalId = setInterval(do_something, 500);
}).mouseup(function() {
clearInterval(intervalId);
});
function do_something() {
// whatever
}
See setInterval() for more information on clearing timers.
I would use the javascript function setInterval() within a function that gets called on mouse down.
<input type="button" id="button" onmousedown="inter=setInterval(startAction, 1*1000);"
onmouseup="clearInterval(inter);" value="click here" />
<script type="text/javascript">
function startAction(){
//whatever you want done
}
</script>
var intervalId;
$("#button").mousedown(function() {
intervalId = setInterval(do_something, 500);
}).mouseup(function() {
clearInterval(intervalId);
}).mouseleave(function() {
//this should help solve the problem that occurs when the mouse leaves the button while pressed down
clearInterval(intervalId);
});
function do_something() {
// whatever
}
I see a problem with both solutions listed above.
onmouseup is only triggered if the mouse is released while it is over the button. If the user keeps the mouse down then moves the mouse away before releasing it then clearInterval is never fired and so do_something will fire forever.
You would need to add another event, "onmouseout", that also calls clearInterval.

Categories