Touch-Friendly

By Tom|January 31, 2013|Tech Stuff|6 comments

That sounds suggestive, doesn’t it?

Well we all love the tactile and intuitive quality that touch-screen interfaces have. But they’re far from perfect, and there’s one really common web trick that’s completely broken. That’s the “hover” effect, shown below in action. Or above, hover your mouse over some of the navigational items.
dropdowns

Touch screens have no “hover,” unless you’re using the kind of tablet that includes a pen. You can touch the element, and the popup menu appears, but there’s no way to reach it to click — as soon as you slide your finger away it all disappears.

And if you’ve owned your Samsung Slate (for example) more than a week you’ve already lost your pen because of the cheesy clip they put on it breaking. But I digress. Get one of those thingies that plug into the earphone slot and attach your stylus to that. I’m still digressing, aren’t I?

Microsoft, in its wisdom, suggests that developers simply stop using hover, and have hidden elements pop up and down on a click instead. Like that’s going to happen. Fortunately there’s the “aria” set of behaviors in HTML 5 that let you work around this.

A beta plugin-in for WordPress called Black Studio Touch Dropdown Menu moves in the right direction. Based on some other work by Ross McKay, the PHP plugin file itself feeds some parameters to a jQuery function that rattles through the navigation items and adds the all-important aria-haspopup="true" parameter to the navigational links, and then adds a function to the “touchstart” handler to handle initial and secondary clicks.

Out-of-the-box it doesn’t work on Win8 devices, but a member on one of the WordPress.org forums sorted it out. You have to go in and modify some of the code by hand. Change this line near the top:
var black_studio_isTouch = ("ontouchstart"in window);

To this:
var black_studio_isTouch = (("ontouchstart"in window)|(window.navigator.msPointerEnabled));

And then find this:
$(black_studio_touch_dropdown_menu_params.selector).each(function() {
var $this = $(this);

And add this right after:
$this.attr("aria-haspopup",true);

dropdownsWith that, it’s good to go and you’ll see the results shown here. But there’s more. The reason I started looking at this was because the guy here at work noticed that dropdowns weren’t working on touch devices for the main work web site. Clearly that’s unacceptable for an organization that’s handing out touch-screen tablets to people. So I took a look and sure enough, they weren’t working on our blogs either, including this blog you’re looking at. So once I got it working here and on the blogs, I spent a little time with their consultant getting it working.

The thing is that the jQuery selectors here:
$(document).ready(function(){
$(black_studio_touch_dropdown_menu_params.selector).each(function() {

Here:
var noclick = !($this.data('dataNoclick'));
$(black_studio_touch_dropdown_menu_params.selector).each(function(){

And here:
$(black_studio_touch_dropdown_menu_params.selector_leaf).each(function(){

Are fed into the function from the PHP plugin file, and so are irrelevant to non-WordPress sites.

The clue to the solution itself lies in the PHP file, where the default values are set.
$(black_studio_touch_dropdown_menu_params.selector)

Is by default actually
$('li:has(ul) > a')

That appears twice. There is also this one further down:
$(black_studio_touch_dropdown_menu_params.selector_leaf)

Which by default is
$('li li li:not(:has(ul)) > a')

We changed the first one to something like
$('#nav li:has(ul) > a')

Or whatever the correct ID selector is for the navigation you’re building. Worked like a charm as a standalone.

Tested on a Samsung Slate, on the basic installation’s Firefox, Chrome and IE10 — both the Windows 7 version and the Windows 8 version.

6 thoughts on “Touch-Friendly

  1. Jason Corwin

    Great Job! I was looking for a way to fix this when I was viewing my site I created. Every time on used my Surface Tablet, I had to try and select the menu really quick. I thought this Black Studio Plugin would work but it didn’t, not until I came on this webpage. Really appreciate the work and time to fix this problem, kudos to you sir! Kudos!

  2. Tom Post author

    Can you use the touch drop-downs on this blog? Send us a link to a site where you’re trying it, maybe we’ll see something. At work, we’re still trying to figure out how to make these work on iOS. There’s a related bug there we can’t diagnose.

  3. Tom Post author

    Brave New Code has pushed out an update to its WP Touch plugin. The changelog goes like this:

    Version 3.1.1 (Dec 6th, 2013)
    *Updated: Everything.
    *Changed: Everything.
    *Fixed: Everything.

  4. Stacy

    Hi, thanks for your post; I had seen the comments in the forum, but your instructions were easier to follow, and now my site is working on WinRT in addition to iPad and Android tablets. Thank you!
    Stacy

Leave a Reply

Your email address will not be published. Required fields are marked *