How to add swipe feature to a image gallery? - javascript

I have an image gallery and I want to add swipe feature to it,next and prev big image. I don't want to use any pluggin. I have some code, I tried some but I was unable to make it work. Any advice is highly appreciated.
$(document).on("pagecreate","#pageone",function(){
$("img").on("swipeleft",function(){
console.log("Left");
});
$("img").on("swiperight",function(){
console.log("Right");
});
});
Jsfiddle
Thanks!

the swipeleft event listener is not available with only jQuery. You can use jQuery Mobile, or craft your own using the touchstart, touchmove, and touchend. Assuming you only want to execute something once, the following code should do:
var swiping = false;
$('#div').on('touchmove', function (event) {
swiping = true;
})
$('#div').on('touchstart', function (event) {
setTimeout(function() {
if ( swiping = true ) {
console.log('swiping');
}
}, 50)
})
The setTimeout likely isn't necessary since touchmove begins at the same time as touchstart - but I left it there in case any given browser performs differently.

Related

menu hide and toggle strange behavior

$(function(){
$(".OpenTopMenu").click(function (e) {
$("#top_menu").slideToggle("fast");
e.stopPropagation();
});
$(document).click(function() {
$("#top_menu").hide();
});
$(document).on("touchend", function (event) {
if (!$(event.target).closest("#top_menu").length) {
$("#top_menu").hide();
}
});
});
Hi all, i ran into a strange problem with toggle and hide.
As you can see in my code. If i touch the menu button (.OpenTopMenu) the menu (#top_menu) toggle.
And here its the problem. If #top_menu is visible so when i touch on .OpenTopMenu, #top_menu will hide then toggle to visible again. So i can't really hide #top_menu on touching the menu button (.OpenTopMenu).
Can someone help me with this?
Thanks
Your touchend and click are basically doing the same thing. For mobile uses it's always good to know that a "click" can actually be seen as two events that rapidly follow each other, namely the "mousedown" and "mouseup" event, the last one triggering the "click". On mobile devices, the "click" is triggered at the same time as your "touchend". Now there's also an event called "touchstart" which is triggered when a user put's his / her finger on the glass.
You are right now wondering what all this has to do with your question. Well, it has to do with your document click..
Personally I would solve your problem in the following way;
var userClick = function(){
//you will need something that determines whether your user is
//using a mobile device or not.
return (Browser.isMobile)? "touchend" : "click";
};
var menu = {
isOnMenu:false,
isOnMenu_reset:null,
attachEvents:function(){
$('#top_menu').on('mouseenter',function(){
menu.isOnMenu = true;
}).on('mouseleave',function(){
menu.isOnMenu = false;
}).on('touchstart',function(){
clearTimeout(menu.isOnMenu_reset);
menu.isOnMenu = true;
}).on('touchend',function(){
menu.isOnMenu_reset = setTimeout(function(){
menu.isOnMenu = false;
},30);
});
$('.OpenTopMenu').on(userClick(),function(){
$("#top_menu").slideToggle("fast");
});
$(document).on(userClick(),function(){
if(!menu.isOnMenu){
$('#top_menu').slideToggle("fast");
}
});
},
init:function(){
menu.attachEvents();
}
};
$(function(){
menu.init();
});
Try to change your $(document).click() by somthing like $(".OpenTopMenu").blur(). This might not work with old browsers.
I only wanted click and touched for testing purpose.
But it only have to work with touchend. This is the working code that i finally use. Thanks.
$(document).ready(function(){
$(".OpenTopMenu").click(function(){
$("#top_menu").slideToggle("fast");
});
});
$(document).on("touchend", function(event){
var $trigger = $(".OpenTopMenu");
if($trigger !== event.target && !$trigger.has(event.target).length){
$("#top_menu").slideUp("fast");
}
});
I tried earlier with
!event.target.hasClass('OpenTopMenu') instead of $trigger !== event.target
in the if condition but it doesn't work. Can someone tell me why the upper code work and this one not?

Find if device is touch screen then apply touch event instead of click event

I am creating a phonegap application, but as I came to know that it takes 300MS to trigger click event instead of touchevent.
I don't want to apply both event. Is there any way to know if it's touch device without modernizer.
Here is jquery code for assumption
$('#id').on('click',funciton(e){
alert('id was clicked');
});
is there anyway to do it with pure JS/jQuery as phonegap application already takes more memory I want to use less library as I can.
I mean really you should Modernizr but...
var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
var eventType = supportsTouch ? 'ontouchstart' : 'click';
Then declare your event listeners as such:
$('#id').on(eventType, function(e) {
alert('id was clicked');
});
This should eliminate the 300ms delay and trigger simulated clicks on desktop and touch devices :
$('#id').on('mousedown touchstart', function() {
$(this).one('mouseup touchend', function() {
alert('id was clicked');
});
});
If the item has a link in it (normally triggered by click), it would need some adaptation :
$('#id a').on('mousedown touchstart', function() {
var destination = this.attr('href');
$(this).one('mouseup touchend', function() {
if (destination) window.location = destination;
});
});
Edit - already having an accepted answer, this reply was more of an additional note. But nirmal was correct in the comments that touch devices emulating mouse events might lead to complications. The above code is therefore better suited to use with touch events only.
To be more complete with this answer, I'll post my approach for handling both touch and mouse events simultaneously. Either sequence will then trigger a custom event named page:tap. Listening for these simulated clicks can then be done as follows:
$(subject).on('page:tap', function() { ... });
Mouse and touch events are separated and any emulation triggering additional events is prevented by adding a class to body in between touchend and click, removing it again when the latter occurs.
var root = $('body'), subject = '#example_1, #example_2';
$(document).on('mousedown touchstart', subject, function(e) {
if (e.type == 'mousedown' && e.which != 1) return; // only respond to left clicks
var mean = $(e.currentTarget);
mean.one('mouseup touchend', function(e) {
if (e.type == 'touchend' && !root.hasClass('punch')) root.addClass('punch');
else if (root.hasClass('punch')) return;
mean.trigger('page:tap');
});
})
.on('click', subject, function() {
root.removeClass('punch');
return false;
});
One could also choose to add the class to the active element itself or html for example, that depends a bit on the setup as a whole.
Apply fastclick to your application. You'll find a .js file and a documentation over there. The shortest (jQuery) way of implementing that would be:
$(function() {
FastClick.attach(document.body);
});
If you don't use jQuery, you can choose the other way:
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
Let me know if you need further help!
This is the direct link to the fastclick.js file
You can try:
var clickEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(clickEvent, myClickHandler);
for anyone coming here in 2021, use pointers events, and check pointerType to distinguish between mouse, touch, and pen.

Hammer.js is blocking scroll events on iOS Safari

I've added Hammer.js events to an element on my site. They all fire correctly and everything is good, but an issue caught the eye of my designer. He noticed that when you try and scroll the page with your finger over the element, nothing happens. Unfortunately this is a game-breaker.
So my question is, how can you retain scrolling when using Hammer.js.
Thanks!
For anyone out there looking for a solution, here's what I came up with.
this.$hammer = $('img').hammer();
this.$hammer.on('touchstart', fingerDown)
.on('touchend', fingerUp)
.on('pinch', setScale);
function fingerDown(e) {
var fingersDown = e.originalEvent.touches.length;
if (fingersDown > 1) {
// Lock Scrolling over the zoom element by allowing Hammer.js to fire pinch events.
toggleHammerScrolling(true);
}
}
function fingerUp(e) {
toggleHammerScrolling(false);
}
function toggleHammerScrolling(shouldScroll){
//This is where your implementation may change. Just do .get('pinch').set... on your own hammer object.
this.$hammer.data('hammer').get('pinch').set({
enable: shouldScroll
});
}
function setScale(){
console.log('do pinching stuff here');
}

Detect if a scroll event is triggered manually in jQuery

This question was already asked here a long time ago:
Detect jquery event trigger by user or call by code
But it has never been answered conclusively (or maybe I'm simply not able to search properly).
Is it possible to detect whether a scroll event has been triggered by the user or by the jQuery animate function?
I am trying to prevent the scroll event to trigger itself while doing something like this:
$(document).scroll(function(){
$("html").stop(true);
var number = 400; //some other stuff is happening here
clearTimeout(tout);
tout = setTimeout(function(){
if(top == $(document).scrollTop()){
$("html").animate({
scrollTop: (number),
easing: "easeInQuad",
duration: 110
});
}
},120);
});
This code seems to be suitable:
$('#scroller').scroll(function(e) {
if (e.originalEvent) {
console.log('scroll happen manual scroll');
} else {
console.log('scroll happen by call');
}
});
But the originalEvent object isn't able to detect the animate trigger properly.
Is there any other way to do this?
Maybe :animated selector will help you:
$('#scroller').scroll(function(e) {
if ($(this).is(':animated')) {
console.log('scroll happen by animate');
} else if (e.originalEvent) {
// scroll happen manual scroll
console.log('scroll happen manual scroll');
} else {
// scroll happen by call
console.log('scroll happen by call');
}
});
Demo
I don't know how well this works with touch screen devices but this works for me on desktop at least
$(window).on('mousewheel', function(){
//code that will only fire on manual scroll input
});
$(window).scroll(function(){
//code that will fire on both mouse scroll and code based scroll
});
I don't think there is a way to only target the animated scroll (the accepted answer didn't work for me).
UPDATE: Warning!
Unfortunately, 'mousewheel' doesn't seem to pick up on users who manually grab the scroll bar and drag it or users who use the scroll bar arrow buttons :(
This still works ok for touch screen devices as their swipes seem to count as mouse scrolls. This isn't a great solution for desktop users though.
Using #Tony's accepted answer and #DanielTonon's comment I came up with the following solution:
var animatedScroll = false;
var lastAnimatedScroll = false;
$(window).scroll(function(event){
lastAnimatedScroll = animatedScroll;
animatedScroll = $('html, body').is(':animated');
});
This seems to solve the issue mentioned whereby jquery removes the .is(':animated') then scrolls one more pixel, which leads to .is(':animated') ending on a false. By storing the second to last version of .is(':animated') you can be (more) sure whether or not the scroll was an animated one or not.
When you want to know if the scroll was animated or not just check the lastAnimatedScroll variable.
This has NOT been thoroughly tested by me but has been correct on many page refreshes so I will assume it works well enough.
After attempting to implement the various solutions in this issue I came up with a different approach that is working well for me.
I use a manual boolean for whether an animation is running:
var isRunningAnimation = false;
and set it to true just before animating, and false in the jQuery animate callback function:
isRunningAnimation = true;
$('html').animate({
scrollLeft: 100,
scrollTop: 100
}, 400, 'swing', function() {
isRunningAnimation = false;
});
and then in the scroll listener just check that boolean:
$('scroll', function() {
if (!isRunningAnimation) {
// If we made it to here, the animation isn't running
}
});
Of course technically if the user decides to manually scroll during the animation, that won't trigger the on scroll logic either, but that seems like enough of an edge case to not worry about.
I would suggest First of all create a javascript function
// Attaching scroll event when document/window is loaded
function OnFirstLoad() {
if (document.attachEvent) {
document.attachEvent('onscroll', scrollEvent);
} else if (document.addEventListener) {
document.addEventListener('scroll', scrollEvent, false);
}
}
then, use either
window.onload = OnFirstLoad;
Or
$(document).ready(function () {
OnFirstLoad();
});
In This scroll event is a function
function scrollEvent(e) {
var body = document.body,
html = document.documentElement;
var docHeight = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
var currentScroll = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
// implement your logic according to requirement
}
If you want to bind with jquery selector and check for event
$('#div.class').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function (e) {
if (e.which > 0 || e.type == "mousedown" || e.type == "mousewheel" || e.type == "touchmove") {
// any code
}
})
jQuery(document).on('click', 'p.questions__text a[data-clickid="delay_next_delivery"]', function(ele){
if(ele.originalEvent.isTrusted){
// human
} else {
// non human
}
});

JavaScript: translate long tap events to right click events

How can one automatically translate long tap events to right click events? Since many touch devices like the iPad don't provide a way to do a right click on a website this would be very handy because a website's code doesn't need to be adjusted.
For example this code is designed for desktop browser having mouse support:
<html>
<head><title>Long tap to right click test</title></head>
<body>
<img src="dummy.png" oncontextmenu="alert('Hi!'); return false;" width="20" height="20" />
</body>
</html>
The goal is to translate a long tap event to the right click event without modifying the code. (Just loading some JavaScript, of course.)
If've seen that https://github.com/furf/jquery-ui-touch-punch/ does something similar for drag'n'drop support on jQuery widgets. However this plugin doesn't support the long tap.
Also http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ does actually perform the desired translation but it brakes scrolling, thus making it useless for regular websites with the need of scroll support.
Any help is appreciated - thanks!
You can write simple plugin to handle this type of events. Lets call it longTap event. Example:
$.fn.longTap = function(options) {
options = $.extend({
delay: 1000,
onRelease: null
}, options);
var eventType = {
mousedown: 'ontouchstart' in window ? 'touchstart' : 'mousedown',
mouseup: 'ontouchend' in window ? 'touchend' : 'mouseup'
};
return this.each(function() {
$(this).on(eventType.mousedown + '.longtap', function() {
$(this).data('touchstart', +new Date);
})
.on(eventType.mouseup + '.longtap', function(e) {
var now = +new Date,
than = $(this).data('touchstart');
now - than >= options.delay && options.onRelease && options.onRelease.call(this, e);
});
});
};
Obviously you want to change mousedown and mouseup to touchstart and touchend in case of iPad.
Usage: http://jsfiddle.net/dfsq/RZgxT/1/
You can use a timeout for that:
var timeoutLongTouch;
var $mydiv = $j('#myDiv');
// Listen to mousedown event
$mydiv.on('mousedown.LongTouch', function () {
timeoutLongTouch = setTimeout(function () {
$mydiv.trigger('contextmenu');
}, 1000);
})
// Listen to mouseup event
.on('mouseup.LongTouch', function () {
// Prevent long touch
clearTimeout(timeoutLongTouch);
});
All solutions not work in desktop browsers.
You should also tune up 'click' handler behaviour, cause all 'longtap' events should also be followed by 'click' event.
In this case something code like this:
itemEl.click(function(event){
if ($(this).data('itemlongtouch')){
$(this).data('itemlongtouch', false);
}else{
//some work
}
});
itemEl.longTap(function(event){
$(this).data('itemlongtouch', true);
//some work
});

Categories