As you may already know, I have been working on a new project which is known (currently, maybe not forever) as JBBar. JBBar is a lightweight menu for websites that you will find across my website (look up at the top of the page). It is designed to be flexible in that it will work on a mobile device as well as on a desktop device. A lot of time went into this menu before I officially released it to my own personal website as a non-development stage menu.
A lot of time was spent getting round a major flaw in devices of today. I talk specifically about interaction. It is of course somewhat obvious that touch devices work differently to those which include pointer devices, and currently JavaScript is not quite ready enough to detect these differences. The resolution is somewhat annoyingly fiddled together.
The issue arises because touch devices register a hover event as an event despite tablets not really featuring hover. Thankfully, they also register click events. Of course, on a desktop browser, you want to hover over items to show them when in the full-sized menu but when it scales down you really want to have to click on items (if you are on a desktop browser, take a look and see what I mean by scaling the page).
Here's the issue: click and touch register at the same time (sometimes even twice each) on touch devices. To fix this, there is a very slight delay then a variable is set to say the event has been fired and not to fire again. This then causes problems on desktop (a viable 'hack' would not be to use user agent sniffing - it's ugly). The issue resolves itself however, I do not need to register hover events on screen sizes that use the mobile menu (900 pixels or less) and only want to see click events.
There you go. Done.
If you interested in a free, open source, very lightweight menu for your own projects or websites, feel free to read more about it from here.
