I want a pull-to-refresh function that can be used on desktop browsers with the mouse and via touch on mobile touch devices.
There seem to be several solutions using jQuery, however I could not find anything appropriate for MooTools.
How would you do it using MooTools Core/More, or do you know of a small script that does it ?
Related
Do you know is it possible by means of bootstrap 3 classes or some other its features to hide some html when there is no mouse at device which is browsing my site?
There are three possible solutions to this, none of which will work completely:
User agent detection - compile a list of user agents of devices that you know are touchscreen (without mouse) and use navigator.userAgent to check if they're being used. This may not work because people can change their user agents in some mobile browsers, and it is almost impossible to find a list of every possible touchscreen user-agent.
Use feature detection libraries like Modernizr. This answer explains it well. However, these detect for touch events, but some desktop browsers have these, so that would tell you something was touchscreen when it wasn't.
Detect the height and width of the window. Most mobile devices have small screens, but some touchscreen devices (like tablets) can have screens as big as some computers, which means it wouldn't always work. You can use window.innerHeight and window.innerWidth (this wouldn't work in IE). You can also use CSS media queries here.
The new FB paper app website has html5 videos when seen from a non-mobile device.
A video like effect is achieved on the mobile website (tried on iOS browsers) using some kind of weird sprites.
Does anybody know how to implement that?
I think that used a method originally used by Apple.
Take a look at this
I have a Windows 7 tablet (an ASUS EP121), and I am using a web browser to display a Google Maps-based web application that I have created. Basically, I want the pinch gesture to zoom the Google Map (similar to using the scroll wheel to zoom a Google Map when using a mouse), rather than zooming the entire web page.
In Opera, Firefox, and Chrome, the pinch gesture simply zooms in the entire page. This behavior makes perfect sense for most use cases, but I'm wondering if there is any setting, in any of these browsers (e.g., Opera, FF, Chrome) that can cause the pinch gesture to behave like a mousewheel instead of zooming in the entire page?
Interestingly enough, in Arora, the pinch gesture can be used to zoom in/out a Google Map; however, other issues are preventing me from using Arora effectively that I think will be more difficult to address than the issues I am raising in this question.
Another option would be to disable pinch gestures (I know this is possible in Firefox, I'm sure the other browsers have some means to do the same), and then try to let the application take care of it. Are there any thoughts on going this route? Would something like jQuery mobile be able to accomplish this?
As a last resort, I could use Qt's webkit and implement my own event handling (basically creating a stripped down Arora), but I'm really hoping there's an easier way that utilizes currently available browsers.
Thanks.
If anyone ever runs into the same problem that I had here, I have created a very simple WebKit-based web browser using Qt that implements a pinch gesture and uses it to fire off a scroll wheel event.
It works quite well (especially for Google Maps) and the source is available on github here. I've tested the code on Windows 7 and Ubuntu Linux 12.04; it works without any problems.
I'm trying to get up to speed on HTML5 by prototyping an extremely simple drawing app using <canvas> and touch events like ontouchstart and ontouchmove.
This is displaying and working fine in an Android emulator where I use mouse clicks to simulate touch events. However, it doesn't work at all when running in my desktop browser (Safari 5.1.1, Firefox 7 on Windows).
I thought the mouse click events would be interpreted as touch events like they are when running within the emulator.
I wonder now if perhaps desktop browsers simply don't support touch events.
It's actually the other way round. Mobile browsers translate touch to mouse events for legacy support. If it needs to work on both mobile and desktop, and you don't really need touch events, you could just use mouse events instead. Failing that, bind both touch and mouse events and have the touch event cancel the mouse event. This way on mobile devices the touch fires and mouse doesn't. On desktop the touch doesn't fire and the mouse will.
For pilau, here's a simple example of cancelling the click event on mobile devices. Please note the question is more about drawing which would involve click dragging, which would require a bit more code for detection, but the basic idea is the same, bind the events you need to handle. Then e.preventdefault() will stop the mobile browsers from emulating click type events.
$('#element').on('touchend click', function(e){
// Do your onclick action now
// cancel the onclick firing
e.preventDefault();
});
Firefox 6 and above supports the touch events. See the compatibility table here.
MDN article on Touch Events
EDIT : Are you testing with a touchscreen or the mouse? The mouse events do not automatically translate to touch events. See this post for how to simulate touch events with a mouse.
ontouchstart will be a add on to the iphones version of webkit for javascript. you could test it but only on an emulator.
If you are working with react, the synthetic events are different:
onClick Works for both, mobile and desktop.
onTouchStart works only for mobile. Also, this event goes before the onClick event. Maybe it is the first event to being trigged.
In my case, I needed an event before the onClick event in a mobile and desktop environment, so I used onMouseDown. which with synthetic events from React, works for both, mobile and desktop.
Remember, for development propose, the easiest way to test in mobile or in desktop is with the developer tools, clicking on Toggle device toolbar or cmd + shift + M in the inspector.
Good luck!
My apologies for a more "theoretical" question, though I suppose this is more of a "state-of-the-industry" question: I'm curious about the options available for building a website meant to target multiple platforms (desktop browsers + touchscreen devices, like tablets and smartphones).
Technologies like CSS3 Media Queries give us the ability to format our content based on screen size (among other things), which is great - but what about other functionality? For instance, touch events - these can still get very sticky depending on what device you're targeting, etc. So is it possible to build one site to target all of these platforms? Or is it still necessary/better to use device detection scripts to redirect to versions of the site meant for touchscreens (Apple-devices or otherwise)? Or perhaps, does it depend on what you want to do? Is there a line drawn that, once crossed, would require a separate version of a site to be made? Anyone care to share their experiences?
It all depends on how complex your website features will and and how they differentiate from the offline or online version.
Sometimes it's better to make a totally different version of your website and redirect to it, sometimes, a few touchevents calls on the page will not make any different for desktop users, while mobile will see something different.
One good case to look at is the WP-Touch plugin for Wordpress. While you have a version of wordpress for regular browsers, it tweaks PHP into delivering a totally different and mobile experience for the mobile user.
If you have the patience, resources and time to make a proper mobile website from your regular one, do it! If you don't, a different stylesheet and some touch events properly coded can seal the deal