Touch-Friendly

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.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>