Hammer.js is blocking scroll events on iOS Safari - javascript

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');
}

Related

cant solve the mouseout for IOS

first of all i'm no js expert,and all my know how,is from web and mainly from here.
I code a js (jquery) which is based on aion MMORPG and shows tooltips related to the item-id or what else can be found ingame. I came across several hurdles while creating this,and solved one problem after another.right or wrong, my knowledge can not decide this.but all the code works.
What I can not solve is a mouseout if you touch the on IOS devices.
android devices seems to work great,but i'am unable to solve it for IOS.
the tooltip disapears on -touch but the link has still a hovered state on IOS.
first touch opens tooltip second touch the href link.
i want the second touch on body should reset the href link an next touch should open tooltip again.
and maybe a js guru can give me some hints how i can code this a little smaller.
i made this
(DEMO)
$(document).on('touchstart', function() {
detectTap = true;
});
$(document).on('touchmove', function() {
detectTap = false;
});
$(document).on('click touchend', function(event) {
if (event.type == "click") detectTap = true;
if (detectTap) {
TT_Item_wegmachs();
}
});
and hope for any solution.thx
i found temp solution that helped me,to get IOS mobiles loose hovered on focused element state on body tab.
on "touchstart" i add class to "body" with "cursor:pointer;".
now if i tab on body elswhere,the hovered element on IOS mobiles becomes a "mouseout".
and after that i remove class from "body".
Nevertheless I am happy about better answers

jQuery .click() not working on iOS Safari even after trying some of the known fixes

I have been having a little bit of trouble trying to figure this out. I can not get a JQuery .click() event to work on iOS Safari, even after trying some of the known workarounds for this issue.
My code:
HTML:
<div class="mobile-nav-menu">
<a href="#" onclick="void(0)">
<img id="hamburger-menu-icon" src="assets/dot-menu.svg">
</a>
</div>
JS (variable declarations omitted to spare length):
window.onload = () => {
hamburgerMenuIcon.click(toggleMobileNavDropdown);
}
const toggleMobileNavDropdown = () => {
if(mobileNavDropdown.height() == 0) {
mobileNavDropdown.css({
height: '180px',
width: '200px'
})
mobileNavContents.delay(800).fadeIn(900);
} else if(mobileNavDropdown.height() == 180) {
mobileNavContents.fadeOut(400);
setTimeout(() => {
mobileNavDropdown.css({
height: '0px',
width: '0px'
})
}, 400)
}
}
This works absolutely without issue in any browser, both mobile or desktop, other than Safari iOS. I have spent some time on Google and came across a few known work arounds. Here is what I have tried so far without success:
I have tried applying cursor: pointer; to the link. From what I can gather, without this Safari iOS does not register the element as being clickable.
Since adding the cursor CSS property did not work, I tried to add onclick="void(0)" to the HTML as seen in the HTML snippet above. This is another suggestion I came across on Stack, and I am assuming it somehow allows Safari iOS to register the element as being clickable.
On my third attempt, I tried changing the click event to vanilla JS like so and adding touchstart and tap:
hamburgerMenuIcon.on("click touchstart tap", toggleMobileNavDropdown);
So far, nothing gives. Any suggestions?
I do it like this, firstly this part to stop the events happening multiple time due to bubbling from what I do next:
function eventHandler(event, selector) {
event.stopPropagation(); // Stop event bubbling.
event.preventDefault(); // Prevent default behaviour
if (event.type === 'touchend' || event.type === 'touchcancel')
selector.off('click'); // If event type was touch turn off clicks to prevent phantom clicks.
}
Then for the actual element interactions (you don't need the debounce part necessarily, but I find it helpful, if you like I will link you that plugin, is very light weight and helpful):
$(".selection-button").on('click touchend touchcancel', $.debounce(
100,
function(e) {
//whatever you want to do
}));

How to add swipe feature to a image gallery?

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.

mouseover event and click event on same element conflicts on mobile

I'm using angular.js to build my website, and I have an element that MOUSEOVER event is supposed to show the navbar, and on mobile, clicking on that element, supposed to show the navbar + the menu.
These two events conflict.
Any ideas?
//navbar fade in by mouse over menu button
angular.element('.picture_hamburger>.text').on('mouseover', function() {
angular.element('#navbar').stop().fadeIn();
btnState.setPosition(1);
// navbar fade out by mouse out of button
angular.element('.menu_hamburger').one('mouseout', function() {
btnState.setPosition(0);
});
});
//menu open by click
angular.element('.picture_hamburger>.text').click(function () {
angular.element('#navbar').finish().slideDown();
btnState.openMenu();
});
i finally used this:
var isTouchDevice = 'ontouchstart' in document.documentElement;
and i had a variable that checks for touch screen ability, without adding Modernizr.
If you are able to use Modernizr (js library for checking HTML5 stuff), then it provides the best method for checking if a client is mobile or not. You can do this in pure javascript too I think, but after countless tries I gave it up:
By using Modernizr.touch, you can see if the device is touch capable or not. Touch screens are quite unique to phones and pads, but unfortunately also laptops which have touchscreens (not many of these thank God).
So then the code would be like this:
//navbar fade in by mouse over menu button
angular.element('.picture_hamburger>.text').on('mouseover', function() {
if(Modernizr.touch) {
return;
}
angular.element('#navbar').stop().fadeIn();
btnState.setPosition(1);
// navbar fade out by mouse out of button
angular.element('.menu_hamburger').one('mouseout', function() {
if(Modernizr.touch) {
return;
}
btnState.setPosition(0);
});
});
//menu open by click
angular.element('.picture_hamburger>.text').click(function () {
angular.element('#navbar').finish().slideDown();
btnState.openMenu();
});
So, if its mobile and the mouseover and mouseout fires, then it just returns before executing anything - just the way you want.
Modernizr can be found at http://www.modernizr.com/

How to Show Ballon tooltip when mouse stops

[edit]
So I used one of the javascript tooltips suggested below. I got the tips to show when you stop and hide if you move. The only problem is it works when I do this:
document.onmousemove = (function() {
var onmousestop = function() {
Tip('Click to search here');
document.getElementById('MyDiv').onmousemove = function() {
UnTip();
};
}, thread;
return function() {
clearTimeout(thread);
thread = setTimeout(onmousestop, 1500);
};
})();
But I want the function to only apply to a specific div and if I change the first line to "document.getElementById('MyDiv').onmousemove = (function() {" I get a javascript error document.getElementById('MyDiv') is null What am I missing....??
[/edit]
I want to display a balloon style message when the users mouse stops on an element from more than say 1.5 seconds. And then if they move the mouse I would like to hide the balloon. I am trying to use some JavaScript code I found posted out in the wild. Here is the code I am using to detect when the mouse has stopped:
document.onmousemove = (function() {
var onmousestop = function() {
//code to show the ballon
};
}, thread;
return function() {
clearTimeout(thread);
thread = setTimeout(onmousestop, 1500);
};
})();
So I have two questions. One, does anyone have a recommended lightweight javascript balloon that will display at the cursor location. And two, the detect mouse stopped code works ok but I am stumped on how to detect that the mouse has started moving again and hide the balloon. Thanks...
A bit late to be answering this, but this will be helpful for those in need.
I needed this function to be able to detect when the mouse stopped moving for a certain time to hide an HTML/JS player controller when hovering over a video. This is the revised code for the tooltip:
document.getElementById('MyDiv').onmousemove = (function() {
var onmousestop = function() {
Tip('Click to search here');
}, thread;
return function() {
UnTip();
clearTimeout(thread);
thread = setTimeout(onmousestop, 1500);
};
})();
In my case, I used a bit of jQuery for selecting the elements for my player controller:
$('div.video')[0].onmousemove = (function() {
var onmousestop = function() {
$('div.controls').fadeOut('fast');
}, thread;
return function() {
$('div.controls').fadeIn('fast');
clearTimeout(thread);
thread = setTimeout(onmousestop, 1500);
};
})();
The jQuery plugin hoverIntent provides a similar behaviour. It determines if the user 'meant' to hover over a particular element by checking if they slow the mouse down moving into the elements and spend a certain amount of time hovering over the element.
It only fires the "out" event when the user leaves the element, which doesn't sound like exactly what you're looking for, but the code is pretty simple.
Also watch out for binding things to mousemove when you don't need to be collecting the events, mousemove fires a lot of events quickly and can have serious effects on your site performance. hoverIntent only binds mousemove when the cursor enters the active element, and unbinds it afterwards.
If you do try hoverIntent I have had some trouble with the minified version not firing "out" events, so I would recommend using the full, unminified source.
Here's a nifty jQuery plugin for a nice float over tool tip.
http://jqueryfordesigners.com/demo/coda-bubble.html
[edit]
I guess without seeing the companion HTML it's hard to say what's wrong. I'd double check that the element has the appropriate ID specified in the tag. Apart from that, unless this is an academic exercise, I would suggest using something like the jQuery plugin that I referenced above. There are certainly many other pre-built tools like that which will have already dealt with all of the minutiae you're currently addressing.
document.onmousemove = (function() {
if($('balloon').visible) {
//mouse is moving again
}....//your code follows
Using Prototype.js syntax you can determine that the mouse has moved once the balloon is visible.

Categories