Tag: html5

Windows devices touch issues

In this article i will show you how we can solve the touch issue in windows devices. Now a days we have lot’s of devices are available in the market. So when we are creating a responsive site we have to first fix the device requirement specification from client because we must sure it work properly, user friendly in every device mobile,tablet and desktop and¬†every platform like android,iOS and windows .

Every devices have different specification about touch and it behaves differently. In windows we mostly use IE who handle the touch events differently but in webkit it supports a touch interface that is separate from mouse handling and IE groups the touch,mouse and stylus into a single interface(pointer) it also has been submitted in W3C specification pointer events.

In windows devices IE pointer events model have custom gesture to indicate the area of the page by default gesture handling(pan). we can turn off default gesture handling by using this property -ms-touch-action for example.

However, IE10 on Windows Phone 8 also supports the pan-x and pan-y value of -ms-touch-action property which specify that the browser should handle horizontal or vertical gestures to solve the touch issues in windows, and custom JavaScript handlers should handle everything else.

Note  Microsoft vendor prefixed version of this event (-ms-touch-action) is no longer supported in IE11 and may be removed in a future release. Instead, use the non-prefixed name touch-action, which is better for standards compliance and future compatibility.

Syntax

When a we¬†touches an element, that element’s touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming.

Property values

One of the following values, a combination of the gesture values.

auto
Initial value. Indicates the Windows Store app using JavaScript will determine the permitted touch behaviors for the element.
none
The element permits no default touch behaviors.
pan-x
The element permits touch-driven panning on the horizontal axis. The touch pan is performed on the nearest ancestor with horizontally scrollable content.
pan-y
The element permits touch-driven panning on the vertical axis. The touch pan is performed on the nearest ancestor with vertically scrollable content.
pinch-zoom
The element permits pinch-zooming. The pinch-zoom is performed on the nearest ancestor with zoomable content.
manipulation
The element permits touch-driven panning and pinch-zooming. This is the shorthand equivalent of “pan-x pan-y pinch-zoom”.
double-tap-zoom
The element permits double-tap-zooming. The double-tap-zoom is performed on the full page. Double-tap-zoom is not available in Windows Store apps using JavaScript.
cross-slide-x
The element permits cross-sliding along the horizontal axis.
cross-slide-y
The element permits cross-sliding along the vertical axis.

For more information about web development for windows click here

What is Modernizr

Modernizr is a small piece of JavaScript code library for feature detection that detects the browser support next-generation web technologies in your user’s browsers. Modernizr uses feature detection to allow you to easily fit¬†your website on user’s experiences based with the¬†actual capabilities of their browser.

There are several JavaScript libraries are available now a days, which can help you detect features and browsers. Using these libraries we can detect whether the browser has support for that particular feature or not.

Modernizr gives the ability to detect the new features in the browsers that can render or utilize

Let’s take a¬†example with¬†plain javascript to detect¬†canvas feature.

In this code, we tried to create a canvas element and then added it to body.

we could use the Modernizr.canvas property to test if the browser supported canvas or not:

Modernizr creates an object named Modernizr to the document, which contains all of the test results as Boolean properties. We can write a simple script to list all supported and unsupported features:

Polyfilling with YepNope,requireJS

As a Developer, we can load the JS as per the feature is supported by your browsers. We can use Modernizr.load() method to test if a certain feature is supported or not and load the appropriate JavaScript based on the result. Unfortunately Modernizr.load() is not provided in the modernizr.js file by default and was a part of Modernizr Version 2.8.3. But there are many other third party libraries are available to load resources like YepNope,requireJS,HeadJS etc.

Modernizr.load() is actually yepnope.js (http://yepnopejs.com/). yepnope.js was known as a conditional loader for polyfills, but now its deprecated after version 1.5.

Let’s take a example for this:

In below code we are checking if touch is available in the browser then it will load touch.js, otherwise it will load the no-touch.js file into the browser.

For the newer versions of Modernizr, we can include yepnope.js to use Modernizr.load().

Developers can also wrote the previous example of code as below with RequireJS: