All Levels Menu - click issue on Android

[semmel]

1) Script Title:
All Levels Navigational Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/

3) Describe problem:
Hi.
I just tried it on the DD website, and I get the same somewhat unpredictable issue as on my own site.
If you're on an Android browser on the original location of the script (i.e. the url I quoted above), try clicking CSS, then Item Folder 3b - and then one of the Sub Items below. Nothing seems to happen - I can't even hold the finger down for the "Open in New Window" box to open - it is as if the browser cannot see the link.
In some cases of sub menus, it works fine - I click on the sub sub menu entry, it changes color, the window flashes (as it loads #), and I can hold the finger down to "Open in New Window". But sometimes it just doesn't want to work...

It may have to do with the zoom level.
On some zoom levels, there is no right border visible, and in that case the menu cannot be clicked. If I zoom in or out a little until the right border is visible again, then it works.
... correction, the right border does NOT always vanish when this issue occurs.
I also saw the left border vanish once.

I find it interesting that in some cases I may be able to open a sub menu at a specific zoom level, but the sub sub menu below will not react until I change zoom level again.

Any thoughts what could be causing this and how it could be resolved?

Thanks!

[jscheuer1]

No android here to test on, and that was supposed to be fixed. But I'll take your word for it. I would try the following, around line #33 add the highlighted:


nonFF: !/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent), //detect non FF browsers
ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers
isandroid:/android/i.test(navigator.userAgent),

getoffset:function(what, offsettype){
return (what.offse . . .

Then around line #155 replace the highlighted line as shown:


this.addEvent(header, function(e){ //mouseover event
if ((ddlevelsmenu.ismobile && !ddlevelsmenu.isandroid) || !ddlevelsmenu.isContained(this, e)){
var submenu=ddlevelsmenu.subuls[this._master][parseInt(this._pos)]
if (this._istoplevel){
ddlevelsmenu.css(this, "selected", "add")
clearTimeout(d . . .

Other than that (with as I say no android to test on) all I can think of would be to find a way to disable this zoom on android for the page, or one could simply disable the menu for android, offering alternate content.

[semmel]

Thanks for your reply.

I tried your additions, but unfortunately now the menus don't open at all anymore - the top menu line is now treated as regular links.

I also just realized something that I hadn't before since I had tested the script on YOUR site and not on ours on an Android tablet:
There's two ways that sub menu links do not work on Android:
1. The zoom situation I described above which might be related to something overlapping with the link and disabling it (which also explains the border going missing on occasion). When I click a menu entry while this is happening, I cannot click it at all - there is no reaction at all.
2. In the original version of the script, clicking a link will activate the menu entry (i.e. the mouseover gets triggered and the style changes), but it will not follow the link in it.

I had not noticed 2 because I figured that on your site the links would all lead to #. But I realized on our site that links cannot be followed at all.

I'm thinking what I might have to do for now is to check for android browsers and disable your script on those and replace it with a simpler menu script that uses the same HTML structure to build it. It would be great, though, to get this fully working.
If I can help at all with this since I have access to my android phone and a tab, please let me know. I'm unfortunately not sure how to get debugging information on the Android browser.

Oh, as for your recommendation of disabling Zoom - not sure if it's possible at all, but the issue is that the site is pretty small on an android device, so zooming is pretty much a must at this time :-(

Also, yes, there has been quite a bit of fixing going on between the earlier version and this one - the menus open and function now when previously they wouldn't on touch screen devices.

Oh, the code available for download on that page seems to still be the old one! The new code has been implemented into the site, but not into the download. Does anyone know how to contact the author to let them know of this?

[ddadmin]

Oh, the code available for download on that page seems to still be the old one! The new code has been implemented into the site, but not into the download. Does anyone know how to contact the author to let them know of this?

Ah yes you're right, at least the .js file inside the zip file compared to the one used on the demo page. I've gone ahead and updated the former with the latest .js file.

[semmel]

You're welcome :-)
Glad I could help!