iPad Javascript hover

iPad Javascript hover

You may find that your fancy hover effects do not work on a tablet...

When testing your website on a tablet you may find that your fancy hover effects do not work. As mentioned previously tablet users will be using their fingers, inparticularly clicking. This raises three issues:

  1. Is the element obviously clickable/hoverable? Users tracking text with their mouse whilst reading does not happen any longer on a tablet.
  2. Tablet users will need to click and un/click the element
  3. Laptop/Desktop users will still expect certain elements to react to a hover.

Please Note: The code examples below use the mootools framework. We recommend that you watch the tutorial video which gives an overview of the code.

Click here to view our demo

The Problem

The following example shows a classic hover scenario where the child element (Another Test) is hidden unless the user hovers on its parent element (Testing).

The CSS

ul li { display: inline-block; padding: 20px; background-color: black; color: white; }
ul li:hover { background-color: red; }
ul li ul { display: none; }
ul li:hover ul,ul li.over ul { display: block; }

The HTML

<h1>Standard Test</h1>
<ul>
  <li>Testing
    <ul>
      <li>Another test</li>
    </ul>
  </li>
</ul>

As demo’ed in the tutorial video the hover does not take effect on a tablet device. In this article we will look at two different methods to solve this problem.

Solution One – Click event

The first solution is to use a standard click event to add an additional class to the item you would ordinarilly hover over. The advantage of this method is that it will work across multiple platforms and could replace the original hover attribute.

The Javascript

window.addEvent('domready',function() {
  $("iosClick").addEvents({
    click: function() {
      $("iosClick").addClass('over');
    }
  });
});

In order for the javascript to work you will need to add the id “iosClick” to the element that you would like to interact with like so:

<li id='iosClick'>Testing

Solution two – Tablet touchstart/touchend event

Whilst solution one is effective it does not utilize events native to the tablet. The mootools library supports the tablet touchstart and touchend events. Using these events we can create real touch functionality which mimics the hover effect when the user touches the screen and removes the effect when they move their finger away.

The Javascript

$("iosTouch").addEvents({
  touchstart: function() {
   $("iosTouch").addClass('over');
  },
  touchend: function() {
   $("iosTouch").removeClass('over');
  }
});

In order for the javascript to work you will need to add the id “iosTouch” to the element that you would like to interact with like so:

<li id='iosTouch'>Testing

Things to consider

If you do not want to use the DOM’s ID as the selector you could use mootools $$ selector to select elements with a specific class etc. The CSS would be more involved for this, but in certain scenarios would be a better solution.

I hope you found this tutorial useful

If you did please be sure to click the like button below and +1 us on Google. You can also find us on facebook and Youtube.

Please recommend us if you found this article helpful:
Anthony Luxton
Author
Anthony Luxton
Director

Published:
14th December, 2011

Infographics

5 reasons why you need a website
Android usage – Medina Valley Centre
Website success benchmark
View all

Interviews

Interview with Mr Tom Fallick
Interview with Samuel Claxon
Interview with Anthony Luxton
View all

iPad Web Design

Responsive web design example
iPad Javascript hover
Introduction to iPad development
View all

Marketing

Why you should run an e-mail campaign
View all

Print

The intricacies of preparing for print
View all

Search Engine Optimisation

Getting started in guest blogging
Website recommendations for 2013
The importance of site structure for SEO
View all

Web Development Tips & Tricks

Youtube iframe API player undefined Firefox
Show and hide input password field
Pixel-perfect webpages with just CSS
View all

You and Your Website

LinkedIn For Business
How much content is enough?
How often should I update my blog?
View all

Useful Links

Ipad Detection – David Walsh
How iPad affects the way we design websites?
Mootools Framework
Fixing the hover event
Mootools touch events