CODEWITHSUNDEEP
responsive-designscreen-orientation
LeeTee
LeeTee

Reputation: 6601

responsive design - disable jquery effects for touch screens

I have some jquery mouseover effects on my website that I need to disable for touch screens, however, how do I know what width of screen to disable the JQuery? At the moment I have it at less than 800px. This works on an ipad portrait but then when I turn it landscape the JQuery is activated again. I have read that Ipad landscape width is 1024px but this could also be the size of a small none touch screen. Is there a way I can specify effects for certain devices instead of screen widths ?

Upvotes: 1

Views: 1172

Answers (1)

justinavery
justinavery

Reputation: 2596

To achieve this you should look at working the other way and instead of disabling mouse over events for touch devices ADD the events for non-touch devices.

Add Modernizr to the project your working on (you've probably already got it in there). Once added you can include a test for "touch" by adding it as a class to the HTML element 

<html class="touch">

If the device has touch capabilities then everything will remain as is, however if the device does not have touch then moderizr will covert that from touch to to no-touch

<html class="no-touch">

You can then bind your mouse events off the html element having the class of .no-touch

I've put an example of this in the code pen - http://rwd.is/VyRl37

This assumes that you're still loading the jQuery library for all devices and deciding whether to load the mouse over functions based on touch devices. If you're looking at conditionally loading jQuery itself then you should look at enquire.js to load in jQuery at a specified width.

If you want to keep jQuery for other functions on smaller devices but want to improve performance you could look at using using Zepto.js as a lightweight alternative.

Finally Response.js will also allow you to call functions at particular breakpoints but you still run into the issue of not knowing if it's touch enabled or not.

Upvotes: 2

Related Questions