CODEWITHSUNDEEP
javascriptjqueryhtml
Tom
Tom

Reputation: 12659

How to check if browser supports rollovers (ie many mobile devices do not have a cursor)

I am looking for a way of checking whether rollover events will work for navigation, and if not I am going to switch these to click events.

I have been looking through jQuery.Support and Modernizr but haven't found anything specific, closest I found was Modernizr's touch, but doesn't seem to be exactly what I need.

What is the best way of checking this?

Upvotes: 2

Views: 423

Answers (2)

VoteyDisciple
VoteyDisciple

Reputation: 37803

Avoid the question entirely: just do both.

Include :hover rules where you want rollover navigation, and those rules may or may not ever get applied. You don't have to care.

Meanwhile, with JavaScript, write a $('.foo').click(function() { $(this).addClass('hover'); } setup, so you can also apply .hover rules in the same stylesheet. Mine normally end up being :hover, .hover rules so they're actually completely identical.

This doubling up means that someone using a mouse may also click. This is redundant, but not harmful.

Upvotes: 5

Nilesh
Nilesh

Reputation: 6155

You can use navigator object to identify a browser. Check user-agent and platform on which browser is running and then accordingly customize your webpage for mobile devices.

You can use something like this:

var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)

Upvotes: 0

Related Questions