Updating Menu scripts for iPad/iPhone and Android devices
by
, 06-29-2011 at 06:34 AM (242728 Views)
Mobile devices such as the iPad, iPhone or Android tablets are pretty on par with modern desktop browsers when it comes to rendering JavaScript, though that's not to say they do so without hiccups. One of the more crippling limitations is mobile devices' lack of support for the onmouseover/out events of JavaScript, which if you think about is more of a fundamental "shortcoming" of touch based devices in general rather than a deliberate act of omission. Regardless, this lack of support means many menu scripts on DD that rely on the onmouseover event to trigger the dropping down of a menu do not work in said devices. One way to overcome this so these menu scripts are at least functional in mobile devices is to modify them so when a mobile device is detected, the onclick event is used instead to trigger their associated drop down menus instead of the default onmouseover. I'm sure I'll be getting an earful on better ways to target mobile devices, for for now I'm using the following scheme:
I'll be going through relevant menu scripts on DD to add in the necessary modification so they are functional in the major mobile devices. The first two to get the treatment are:Code:var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers
June 28th, 11
1) Anylink Drop Down Menu
2) Anylink CSS Menu
July 1st, 11
1) Flex Level Popup Menu
July 2nd, 11
1) Flex Level Drop Down Menu
July 17th, 11
1) All Levels Navigational Menu
I'll update this list each time another menu script is updated. In general only the .js file in each case is affected unless noted otherwise. Feedback, suggestions, fire away!