Develop Reference

A-Frame look-controls very unstable on older devices

I'm building a 360 panorama viewer with A-Frame 1.0.4 and I'm having some trouble with older devices that I don't know how to solve. I'm testing in a WebView inside an Android application.
On most recent devices, the gyroscope and accelerometer work great, but on older devices (for example ASUS X008D), it's all shaky, the view can't stay still when I put the phone on the table or when I hold it. I thought it could be due to polyfills but I can't figure how. I added some logs to check for DeviceMotionEvent and DeviceOrientationEvent and both are recognized but it seems like it's not enough.
How could I be sure that the events are handled correctly and eventually disable the hmd in look-controls manually when it's not stable enough? There would still be the dragging and I would be fine with that.
Thanks for your help :)

After further investigations I found out where the issue came from. It was because the Sensor API was not available on some devices and the Gyroscope wasn't read correctly. If I understood correctly there was a fallback on DeviceMotion but it was probably not good on older devices, I don't know...
What I did to "fix" this was writing this little snippet to check that the Gyroscope class was available. If it was not I disabled all movements from look-controls component to allow only manual movements. I hope it can help anyone who meets this issue. It's kinda quick'n'dirty but it did the job so I'm okay with this.
var gyroscope = null;
try {
gyroscope = new Gyroscope();
gyroscope.addEventListener('error', event => {
document.getElementById("camera").setAttribute("look-controls", "magicWindowTrackingEnabled: false");
});
gyroscope.start();
// Stop the gyroscope after trying so it does not run in background.
setTimeout(function() { gyroscope.stop(); }, 500);
} catch (error) {
document.getElementById("camera").setAttribute("look-controls", "magicWindowTrackingEnabled: false");
}
There's also an open issue about it on A-Frame github page.

Not all hammer.js events fire in ripple

'm trying to include some gestures in this phonegap project I am working on. I decided to go with hammer.js and I added the following code.
function handleHammer(e) {
console.log("SWIIIIPE" + e.type);
}
$('#categories_page').hammer({ drag_lock_to_axis: true })
.on("tap", handleHammer);
This works great when I test on my local browser. But when I test it on ripple and on an actual phone the event is not fired.
I looked at some code samples and I found that if I change the events to
$('#categories_page').hammer({ drag_lock_to_axis: true })
.on("release dragleft dragright swipeleft swiperight", handleHammer);
I can see that events fire correctly on ripple.
Is there a problem with hammer.js or am I doing something wrong?

Actually I tried this again on the a real phone and it worked. Must have been doing something wrong. Still doesn't work on ripple. Annoying not only a minor issue.

Calling function if mobile

I'm completely lost when it comes to jQuery/Javascript so apologies in advance. I'm using the MixItUp jQuery filter on a Wordpress site which has the option to show either grid or list view (default), what I'd like to do is set grid as default when visiting the site using a mobile device.
This is what I have at the moment (I've been copying and pasting from around the web so probably not even close):
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$(document).ready(function(){
$('#Grid').mixitup('toGrid');
});
Any help on this issue would be highly appreciated!

I have messed with detecting if a device is mobile or not a lot in the past and I have found it to be much easier to detect if it is not a mobile device versus detecting if it is a mobile device.
I like the searches you are doing, but you are missing a few like the Nook and Kindle a lot of mobile devices also use the word "mobile" in their user agent. With that said even if you include these in your search you will surely have more that pop up over the next few years. I have found it to be better to detect if it is a desktop or not because there are not new desktop operating systems being added on almost a yearly basis like we are seeing with mobile devices these days. Not only that but I have also found that older Android devices can return mixed results in their user agents.
Here is the bit of code we use to figure out if the device is Windows, Linux, Mac, Facebook, a bot, or a mobile device. We have used and tested this code a lot with all the different devices we have vising our site and it appears to be working correctly for all devices. I hope this helps!
$(document).ready(function(){
if (deviceType() == "Mobile")
$('#Grid').mixitup('toGrid');
});
function deviceType ()
{
var OSName="Mobile";
if (navigator.appVersion.indexOf("Win")!=-1 && navigator.appVersion.indexOf("Phone")===-1) OSName="Windows";
if (navigator.appVersion.indexOf("Macintosh")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1 && navigator.appVersion.indexOf("Android")===-1) OSName="Linux";
if (navigator.appVersion.indexOf("facebook.com")!=-1) OSName="facebook";
if (navigator.appVersion.indexOf("bot")!=-1) OSName="bot";
if (navigator.appVersion.indexOf("Slerp")!=-1) OSName="bot";
return OSName;
}

You want to wrap the "if" statement and function call inside the document ready call. Not the other way around:
$(document).ready(function () {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) {
$('#Grid').mixitup({layoutMode : 'grid'});
}
});

Chrome on Windows 8 Mouse Down/Up/Move Touch Screen

This question is outdated
The problem doesn't exist in newer versions of Chrome
I'm working on a drag-to-select jQuery plugin, which is working. The problem, is that on the touch screen, it just scrolls the page.
Chrome doesn't implement touchstart and other touch events, so I would assume mousedown would be triggered. Here's a simplified example:
fullscreen demo [ code ]
A coffeescript snippet:
$(document).on 'mousemove', (e) ->
$('.follow').css
left: e.pageX
top: e.pageY
How can I get this to respond to touching the screen in Chrome on Windows 8?

Not sure where you got your information, and your CodePen examples are not there to check what the problem may be, but Chrome not only implements touchstart, touchmove, touchend etc but I have found it to have the nicest touch support of all browsers I have used in the last year.
The only thing to ensure is that if you have two monitors, you start up the browser page on the touch screen.
I am using Windows 8.1 with a touch-screen for JQuery plugin development (to ensure it is all tablet enabled).
Test existence of touch with:
var hasTouch = (typeof TouchEvent !== "undefined");
alert(hasTouch);
This is some working TypeScript code straight out of one of my plugins (which works best on Chrome. IE is the problem-child for touch):
THIS.$element.on("touchstart", function (e)
{
THIS.momentum.touchstart(e.originalEvent.touches[0].pageY);
});
THIS.$element.on("touchmove", function (e)
{
THIS.momentum.touchMoveTo(e.originalEvent.touches[0].pageY);
});
THIS.$element.on("touchend", function (e)
{
THIS.momentum.touchEnd();
});

This seems to be fixed in the latest versions of chrome. It's an evergreen browser, which mean nearly every user is on the current, or previous release of chrome.

HTML Drag And Drop On Mobile Devices

When you add drag and drop to a web page using JavaScript, such as jQuery UI draggable and droppable, how do you get this to work when viewed via a browser on a mobile device - where the touch-screen actions for dragging are intercepted by the phone for scrolling around the page etc?
All solutions welcome... my initial thoughts are:
Have a button for mobile devices that "lifts" the item to be dragged and then get them to click the zone they want to drop the item on.
Write an app that does this for mobile devices rather then try and get the web page to work on them!
Your suggestions and comments please.

jQuery UI Touch Punch just solves it all.
It's a Touch Event Support for jQuery UI. Basically, it just wires touch event back to jQuery UI.
Tested on iPad, iPhone, Android and other touch-enabled mobile devices.
I used jQuery UI sortable and it works like a charm.
http://touchpunch.furf.com/

There is a new polyfill for translating touch events to drag-and-drop, such that HTML5 Drag And Drop is utilizable on mobile.
The polyfill was introduced by Bernardo Castilho on this post.
Here's a demo from that post.
The post also presents several considerations of the folyfill design.

I needed to create a drag and drop + rotation that works on desktop, mobile, tablet including windows phone. The last one made it more complicated (mspointer vs. touch events).
The solution came from The great Greensock library
It took some jumping through hoops to make the same object draggable and rotatable but it works perfectly

The beta version of Sencha Touch has drag and drop support.
You can refer to their DnD Example. This only works on webkit browsers by the way.
Retrofitting that logic into a web page is probably going to be difficult. As I understand it they disable all browser panning and implement panning events entirely in javascript, allowing correct interpretation of drag and drop.
Update: the original example link is dead, but I found this alternative:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

The Sortable JS library is compatible with touch screens and does not require jQuery.
The library size is 43KB.
The official website states in a video that this library is running faster than JQuery UI Sortable.

You might as well give a try to Tim Ruffle's drag-n-drop polyfill, certainly similar to Bernardo Castilho's one (see #remdevtec answer).
Simply do npm install mobile-drag-drop --save (other installation methods available, e.g. with bower)
Then, any element interface relying on touch detection should work on mobile (e.g. dragging only an element, instead of scrolling + dragging at the same time).

Jquery Touch Punch is great but what it also does is disable all the controls on the draggable div so to prevent this you have to alter the lines... (at the time of writing - line 75)
change
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){
to read
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
|| event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
|| event.originalEvent.target.localName === 'a'
|| event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {
add as many ors as you want for each of the elements you want to 'unlock'
Hope that helps someone

here is my solution:
$(el).on('touchstart', function(e) {
var link = $(e.target.parentNode).closest('a')
if(link.length > 0) {
window.location.href = link.attr('href');
}
});

For vue 3, there is https://github.com/SortableJS/vue.draggable.next
For vue 2, it's https://github.com/SortableJS/Vue.Draggable
The latter you can use like this:
<draggable v-model="myArray" group="people" #start="drag=true" #end="drag=false">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>
These are based on sortable.js