CODEWITHSUNDEEP
javascriptcsstablet
tester2001
tester2001

Reputation: 1073

hover effect on a tablet (i.e. iPad)?

I'm the processing of redesigning a website that uses hover effect on a button (like button images changes when you put your mouse over it and when you click it, it goes to a different page).

Now that works fine if you're on a a desktop/laptop computer. But on a tablet, the hover/onmouseover effect does not work. On a tablet, when clicking the button image, it changes briefly and then immediately goes to a new page.

What are methods and techniques where a website can detect if a visitor comes from a tablet or not? Then would it be possible to switch to a tablet CSS version? Or, are there tablet framework (i.e. Modernizer?) that can help with this process?

Upvotes: 1

Views: 7851

Answers (2)

RobG
RobG

Reputation: 147403

Touch devices don't have a hover event and there is no way to emulate the user interaction that might initiate it. Make sure that there is no critical functionality assocaited with hover events (most just do highlighting) so there is no loss of functionality if the device doesn't have it. Browser sniffing by UA string is a flawed strategy - you must update it every time a new device comes along or the string changes for an existing device. Great if you're into high prices for maintenance, but not if you're the one paying for it.

Upvotes: 5

mobius
mobius

Reputation: 5174

You could identify the iPad (or mobile device) simply by checking the User-Agent parameter of the browser.

In PHP for example you could do something like:

if( strstr($_SERVER['HTTP_USER_AGENT'],'iPad') ) { // Add custom iPad CSS }

If you want to get it further you could use WURFL (http://wurfl.sourceforge.net/)

Upvotes: 0

Related Questions