I need a script show/very simple and you can use css transition, was using the jquery below but it has a certain delay in mobile devices, and I can't use transitions with him, I'll use the script many times on my site, so I wanted something simple to keep the site and that works both in browser mobiles, and desktops.
Very Delay in Safari/ IE10 Mobile
$(document).ready(function(){
// show and hide menu top
$(".dropmenu").hide();
$(".dropbtn").show();
$('.dropbtn').click(function(){
$(".dropmenu").slideToggle(0);
});
});
For the "click" event to fire you need mousedown and mouseup an element, which on mobile browsers results in an 300ms delay.
If you go directly for touchstart it'll fire in no time :)
$(function(){
// show and hide menu top
$(".dropmenu").hide();
$(".dropbtn").show();
$('.dropbtn').on('touchstart click',function( e ){
if(e.type=='touchstart') $(this).off('click');
$(".dropmenu").slideToggle(0); // or use just .toggle();
});
});
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events
Related
I am currently working on my website and am using the following code to flip a card on hover. However, I tested it on mobile and the card flips on touch but doesn't flip back on click out, only if i click another card. Does anyone know how or if I can adapt this code (or have a different code I could use?) to make this work on mobile. Thank you!
$('.card').hover(function() {
$(this).toggleClass('flipped');
});
hover() accepts a second (optional) parameter that gets run when you hover out
$('.card').hover(function() {
$(this).toggleClass('flipped');
},
function() {
$(this).toggleClass('flipped');
});
But on mobile devices hover() isn't a actual jquery mobile event it uses touch events internally so if it didn't work you might need to use touchstart and touchend events and bind on them
EDIT : touchstart is similar to click and touchend is similar to mouseup event on mobile .If you include jquery mobile you can do this
Snip 1
$(".card").on('touchstart',function() {
$(this).toggleClass('flipped');
});
This would be like a "toggle button" when you touch and release it would keep its state untill you do it again.Whereas this
Snip 2
$(".card").on('touchstart',function() {
$(this).toggleClass('flipped');
});
$(".card").on('touchend',function() {
$(this).toggleClass('flipped');
});
would behave like a "turbo button" the moment you release your touch it would revert back to its original state
I have this code, on a mobile page:
jQuery(document).ready(function($){
$('a').on('click touchend', function(e) {
/* Do something */
});
});
works fine, but on mobile devices it's called both for click on links and on swipe (that is touching the link, scrolling and lifting the finger). How can I modify this to be called only on click?
I tried 'tap', 'click' and doesn't seem to work, nor I can find a good list of all the possibile events fired on mobile...
jQuery(document).ready(function($){
$('a').on('vclick', function(e) {
/* Do something */
});
});
Firstly you must recognize mobile or pc after that decide which type of event use.
example how you can recognize device here
On mobile devices, it seems that the first click on a menu is taken as an hover instead of a click, so the solution in my case was
jQuery(document).ready(function($){
$('a').hover(function(e) {
/* Do something */
});
});
Is there a better way to handle a "hover" (this tapped, then effect active until something else is tapped) event on touch devices than using a global event handler to detect when the user taps something else?
For example, this code might work, but it relies on an event listener attached to the document body, so it's questionable performance-wise.
//note a namespace is used on the event to clear it without clearing all event listeners
$('myDiv').on('touchstart.temp', function () {
//do stuff
$('body').not(this).on('touchstart.temp', function () {
//undo stuff
$('body').not(this).off('touchstart.temp');
});
});
In the future you should be able to use the touchenter and touchleave events, which apply to specific elements.
$("myDiv").on("touchenter mouseover", function() {
// do hover start code
}).on("touchleave mouseleave", function() {
// do hover end code
});
But according to MDN, this is just a proposal which hasn't been implemented yet.
If you use jQuery Mobile, you can use the vmouseover and vmouseleave events, which simulate the mouse events on mobile devices.
The Javascript onmouseover and onmouseout events work just fine! :)
It won't work on mobile devices, but I believe you anticipated that.
Edit: I also noticed you included the JQuery tag. You could also use the JQuery hover method if it is to your liking.
i.e.
$('div').hover(function(){
$(this).css('background-color', 'red');
}, function(){
$(this).css('background-color', 'blue');
});
Example: https://jsfiddle.net/sofdz0s2/
As for hovering on all touch devices, it is not constant between all touch devices. Mine does not keep hovering after a tap. (I tried tapping on the div that changes and then on the green div, but it kept hovering after a tap.)
Edit 2:
As talked about in the comments, touchenter and touchleave are probably what you want.
I hope this helps!
In our app we want to drop from one list to over. Problem is, when there are many items in list - it's impossible to scroll when elements are dragable.
As workaround we want to disable drag-ability of elements and enable it only when user makes a long tap on an element.
$('li').bind('taphold', function (event, ui) {
console.log('taphold');
clearAll(); // clearing all other catched
$(this).addClass('catched')
$(this).draggable('enable');
});
here is jsfiddle https://jsfiddle.net/nrxaqc34/10/
So far it works, but user needs to tap once more in order to drag. And would be nice if user could start dragging right after long tap.
This answer here https://stackoverflow.com/a/9922048/582727 doesn't work on iOS.
Maybe someone has an idea.
Does it make sense to use delay option? http://api.jqueryui.com/draggable/#option-delay
$("li").draggable().draggable( "option", "delay", 2000);
Fiddle: https://jsfiddle.net/dob3uegj/
EDIT:
jqueryui-touch-punch (http://touchpunch.furf.com/) added to fiddle for smartphone simulations:
https://jsfiddle.net/dob3uegj/1/
My website has lots of elements which trigger ajax data retrieval on click, and some drag&drop elements handled by jquery ui. Many elements use their own click events, attached directly to them. I need some functionality which will ignore all mouse clicks/mouseup/mousedown events temporarily under some predefined circumstances. For example, I want to disable drag & drop entirely until some ajax request is in progress, etc. I thought I would bind on click and preventDefault(), I tried to bind on document, like this, but it doesn't seem to work:
$(document).on("mousedown", "*", null, function(ev){ev.preventDefault();});
I think it's because when the event reaches $(document), it was already triggered on all childs, so it's too late to preventDefault().
One solution I could imagine is to set some global variable, like ignore_clicks=true; and then add to every function which handles mouse click a check if this variable is true or not. This seems very difficult and I'm afraid even impossible due to external click handlers like in jquery-ui code.
Another solution I imagine is to temporarily put some fixed style element, 100% width and 100% height, zero opacity, over the current page, but this doesn't seem like an ideal solution, feels more like a hack. Furthermore if there is any ongoing animation on the webpage while it is covered by transparent element, the performance of the animation is degraded.
Is there any simple and elegant solution which would allow me to temporarily block all mouse clicks on the given page? (mouseup & mousedown too).
One solution is to stop the event in the capturing phase by using addEventListener:
document.addEventListener("mousedown", function(e) {
e.preventDefault();
e.stopPropagation();
}, true /* true == capturing phase */);
Do note that this won't work in IE8.
With jquery you can toggle on/off event handlers:
function doClick(e) {
e.preventDefault(); //Prevent default event.
//do some fancy ajax stuf...
};
//Toggle on:
$(document).on('click', '.clickable', doClick);
//Toggle off:
$(document).off('click', '.clickable', doClick);
This will work with any event such as click/mousedown/mouseup etc.
If you want to prevent all other events from being fired, you could try as follows:
function preventPropagation(e) {
e.stopImmediatePropagation();
};
//Toggle on when ajax:
$(document).on('click mousedown mouseup', '*', preventPropagation);
//Toggle off when ajax finishes:
$(document).off('click mousedown mouseup', '*', preventPropagation);
If you want to prevent all mouse-based interactions, you could place an invisible overlay in front of the dom, e.g.
HTML
<div id="click-blocker" style="display: none;"></div>
CSS
#click-blocker {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
JS
// to disable clicks:
$('#click-blocker').show()
// to enable clicks again
$('#click-blocker').hide()
By showing the click-blocker, all clicks will happen to the blocker, since it's in front of everything, but since it has no content or background, the user will perceive it as their clicks are just not doing anything.
This won't work if you only want to disable a specific type of interaction, e.g. drag+drop as you mentioned.
I do not think having a "processing" animation overlay is a hack and it seems pretty elegant to me. Plenty of applications use this because it gives users feedback. They know that the application is working and they'll have to wait.