I create a animation that works when I hover over it, but due to mobile reasons I want the animation to play when the user clicks or touches it.
Here is my js code that makes the hover work, but not sure how to make the onclick work.
$(document).ready(function() {
$('.phone').hover(function(){
$('.phone').addClass('phone-two');
},
function(){
$('.phone').removeClass('phone-two');
});
});
Here is a JSFiddle to explain it better.
With $.on() you can add the 'touchstart' and 'touchend' event.
$(document).ready(function() {
$('.phone').on({
'mouseover touchstart': function(){
$('.phone').addClass('phone-two');
},
'mouseout touchend': function(){
$('.phone').removeClass('phone-two');
}});
});
note that this also preserves your hover event.
here is a great post on mobile touch events: How to recognize touch events using jQuery in Safari for iPad? Is it possible?
DEMO
To bind all of your events, use this:
$('.phone').on("mouseover click touchstart touchend",function(){
$('.phone').toggleClass('phone-two');
});
Reference: http://api.jquery.com/on/
Try this
$('.phone').on('click', function (e) {
$('.phone').toggleClass('phone-two');
});
Related
Holdable button works on desktop, but doesn't work on mobile
clicker.mousedown(function(){
timeout = setInterval(function(){
clicker.text(count++);
}, 500);
return false;
});
http://jsfiddle.net/8FmRd/
what's wrong?
To do it by actual hold, you'd do something like:
var timeoutContainer;
// this should work with mouse only
$el.on('mousedown', function(ev) {
if(ev.type=='click'){
timeoutContainer = setInterval(function(){
// your stuff.
}, timeToHold);
}
});
$el.on('mouseup', function(ev) {
clearInterval(timeoutContainer);
});
// or, if you only want to apply it to touch.
$el.on('touchstart', function(ev) {
timeoutContainer = setTimeout(function(){
// your stuff.
}, timeToHold);
});
$el.on('touchend', function(ev) {
clearTimeout(timeoutContainer);
});
After looking at your fiddle, it may not be working as expected because of touchcancel. I noticed you have document.mouseup. It might be treating moving finger as a mouse up or something. If you do it explicitly as touch start it may behave differently. You'd need to check for mobile before as above in the mouse down part.
You need to use touchstart and touchend events to detect a touch on a button on mobile devices. On some devices touchmove might also trigger so you can also check for that.
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
I'm having a hard time understand how to simulate a mouse click using JQuery. Can someone please inform me as to what i'm doing wrong.
HTML:
<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>
jQuery:
jQuery('#foo').on('click', function(){
jQuery('#bar').trigger('click');
});
Demo: FIDDLE
when I click on button #foo I want to simulate a click on #bar however when I attempt this, nothing happens. I also tried jQuery(document).ready(function(){...}) but without success.
You need to use jQuery('#bar')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/
You just need to put a small timeout event before doing .click()
like this :
setTimeout(function(){ $('#btn').click()}, 100);
This is JQuery behavior. I'm not sure why it works this way, it only triggers the onClick function on the link.
Try:
jQuery(document).ready(function() {
jQuery('#foo').on('click', function() {
jQuery('#bar')[0].click();
});
});
See my demo: http://jsfiddle.net/8AVau/1/
jQuery(document).ready(function(){
jQuery('#foo').on('click', function(){
jQuery('#bar').simulateClick('click');
});
});
jQuery.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE Boss!
}
});
}
May be useful:
The code that calls the Trigger should go after the event is called.
For example, I have some code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
$(function() {
$("#expense_tickets").change(function() {
// code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
});
// now we trigger the change event
$("#expense_tickets").trigger("change");
})
jQuery's .trigger('click'); will only cause an event to trigger on this event, it will not trigger the default browser action as well.
You can simulate the same functionality with the following JavaScript:
jQuery('#foo').on('click', function(){
var bar = jQuery('#bar');
var href = bar.attr('href');
if(bar.attr("target") === "_blank")
{
window.open(href);
}else{
window.location = href;
}
});
Try this that works for me:
$('#bar').mousedown();
Technically not an answer to this, but a good use of the accepted answer (https://stackoverflow.com/a/20928975/82028) to create next and prev buttons for the tabs on jQuery ACF fields:
$('.next').click(function () {
$('#primary li.active').next().find('.acf-tab-button')[0].click();
});
$('.prev').click(function () {
$('#primary li.active').prev().find('.acf-tab-button')[0].click();
});
I have tried top two answers, it doesn't worked for me until I removed "display:none" from my file input elements.
Then I reverted back to .trigger() it also worked at safari for windows.
So conclusion, Don't use display:none; to hide your file input , you may use opacity:0 instead.
Just use this:
$(function() {
$('#watchButton').trigger('click');
});
You can't simulate a click event with javascript.
jQuery .trigger() function only fires an event named "click" on the element, which you can capture with .on() jQuery method.
Using menu-aim:
https://github.com/hfknight/jQuery-menu-aim/blob/master/jquery.menu-aim.js
Having an issue going responsive with it. It uses mouseenter and I need to disable mousenter on with a click.function() {}. If you view the the code in the plugin (above) at the bottom you see these events:
$menu
.mouseleave(mouseleaveMenu)
.find(options.rowSelector) // here
.mouseenter(mouseenterRow) // and here
.mouseleave(mouseleaveRow)
.click(clickRow);
$(document).mousemove(mousemoveDocument);
I want to disable the mouseover event in this .click(function (){})
$('[data-toggle="offcanvas"]').click(function () {
});
Here is an incorrect code so you get a better understanding of what I am trying to achieve:
$('[data-toggle="offcanvas"]').click(function () {
$(".dropdown-menu").menuAim({
activate: function(){disable mouseenter here }
});
});
TL;DR
Didn't quite understand but this way you can off any event. You may give it a try:
// For all elements with an identifier
function(){ $('elementIdOrClass').off('mouseenter'); }
// For current element only
function(){ $(this).off('mouseenter'); }
Also you may use unbind('mouseenter').
I have a click method on a button + link that animates stuff as a result of the click. However, I want it so that it only works once. I managed to disable the button after it's clicked, so that's good. But I tried .disabled = true on the link and it didn't work. Is there some way I could prevent it from being clicked more than once?
JS
$('#frontbutton, #loginlink').on('click', function(){
$('.popup').hide();
usernameInput.val('');
emailInput.val('');
passwordInput.val('');
confirmInput.val('');
$('.intro').animate({opacity: '0.5'}, 1000).delay(800).animate({
left: "+=300px"
});
setTimeout(function(){
$('.formholder').show()}, 2000);
$('.toppic').animate({opacity: '0.5'}, 1000).delay(800).animate({
top: "+=300px"
});
document.getElementById('frontbutton').disabled = true;
});
Just use .one() instead of .on():
$('#frontbutton, #loginlink').one('click', function(){
.one() behaves like .on(), but the handler unbinds itself once it has been called.
Try one('click',function(){... instead of on('click',function(){.... The event will only run once per element.
Here's the documentation.
With jquery you can turn the event off this way
$('#frontbutton, #loginlink').on('click.myEventNamespace',function(){
//Run my code
$('#frontbutton, #loginlink').off('click.myEventNamespace');
});
You can also do this inside your event. Thought it may be worth knowing for when you don't use jQuery
this.removeEventListener('click',arguments.callee,false);
This is an example of my jQuery code that I use in a function to do pagination:
// new_content is a variable that holds the html I want to add to a div
$('div#my_div').html(new_content);
$("div#my_div a.details").hover(function(){
$(this).fadeIn(); //code to execute when the mouse get in
}, function(){
$(this).fadeOut(); //code to execute when the mouse get out
});
BUT the hover event does not work at all, and I believe that this is caused because the DOM is not ready yet!
To get around this I used set up a timer like this:
$('div#my_div').html(new_content);
window.setTimeout(
$("div#my_div a.details").hover(function(){
$(this).fadeIn(); //code to execute when the mouse get in
}, function(){
$(this).fadeOut(); //code to execute when the mouse get out
});
,100);
I asked this question because I'm sure that this is not the right way to attach an event immediately after the html method (maybe it didn't it's work!).
si I hope someone show me the right way to do it.
You would want to use the live mouseover mouseleave events
$("div#my_div").live({
mouseenter: function()
{
},
mouseleave: function()
{
}
}
);
Alternately you could do:
$('div#my_div').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});
UPDATE
In newer versions of jQuery you can do it like this
$('body').on('mouseover','#my_div', function(){});
$('body').on('mouseout', '#my_div', function(){});
Maybe you need to use the live() method. As you can read here, it seems that you will need to separate the two events:
.live("mouseenter", function() {...})
.live("mouseleave", function() {...});
UPDATE: Someone voted me up, so if someone gets here, I recommend to read the on() documentation (here) as live was deprecated long ago. Also, it may be interesting to see mouseenter()(link) and mouseleave() (link). The idea is the same as with live.
It is better to use a delegate rather than live, as live is essentially a delegate on the document.body causing it to have to bubble much longer.
Here is an example using a delegate: http://jsfiddle.net/Akkuma/wLDpT/
you can check out .live function of jquery. Here is the link
http://api.jquery.com/live/