Learning jQuery

One of the most frustrating things about optimizing a site for mobile is when certain styles or events that work perfectly fine on the desktop version don't really translate into a touch device. Take hover styles, for example, which work great on desktops, but, due to the nature of touch devices, don't really work at all on mobile.

So, when a link (or any other type of HTML element) that has a CSS hover effect applied to is tapped on mobile, there are many cases where the link actually has to be tapped twice in order to access the linked content. This is because the first tap will act as a hover effect. Luckily, there's a simple jQuery script that allows the hover styles to be overridden by invoking a .click() event.

Add this script to your code and any link with a hover style applied to it should respond appropriately the first time its tapped -- just make  sure that replace the broad ('a') selector with specific classes that apply to links with hover styles, otherwise this script will apply to every single link on your site, which could make your pages quite jumpy.

$('a').on('click touchend', function(e) {
      var el = $(this);
      var link = el.attr('href');
      window.location = link;
   });