Updating dropdown.js in AnyLink Drop Down Menu

[peter117]

1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem: My (fairly ancient) version does not work well on some mobiles. The menu fails to close when clicking elsewhere on page.

I was looking for an update, which I found - item 2) above. However it seems to employ a different approach. My version has all the link information in the file dropdown.js but I cannot see that file here. Does an updated version of that file exist somewhere? Or do I have to re-do everything?

Peter

[ddadmin]

In the new version, the menu contents is defined in a separate .js file called menucontents.js (see script page). Otherwise the implementation should be fairly similar to the original.

[peter117]

Thanks.

I see menucontents.js is in different format from dropdown.js which was:
var menu1=new Array()
j=0;
menu1[j++]='<a href="http://www.peterrussell.com/php">Home Page</a>'
etc

Was hoping to be able to keep previous format and save work. Oh well...

Peter

[peter117]

So I re-did the data for all the files. It is all working OK, except that I still have same problem on mobile (iPhone 6Plus - Safari and Chrome) - menu does not hide when I click elsewhere on screen.

[peter117]

Works OK on a stripped down page, so looks like the error is probably somewhere on my page. Have to go find what it could be.

Sorry for troubling you.

Peter

[ddadmin]

Try the below modified .js file...

anylinkmenu.js

[jscheuer1]

Works OK on a stripped down page, so looks like the error is probably somewhere on my page. Have to go find what it could be.

Sorry for troubling you.

Peter

Try the below modified .js file...

anylinkmenu.js

If you're still having problems, a link to you page may help us pinpoint the issue.

[peter117]

Tracked down the problem to the "google translate" script. Something in their javascript must be conflicting with anylinkmenu.js on mobiles.

Updated anylinkmenu.js and no longer any conflict with google translate.

Thanks for the help. Peter

[molendijk]

May I add the following for an explanation of the problem (now solved, apparently). Menus, tooltips etc. not hiding after a tap somewhere on the screen typically is a focus problem with iOS.
You can solve it by having the following at the end of the body section of the page:

var eventList = ["click", "touchstart"];
for(event of eventList) {
document.body.addEventListener(event, function(e) {
if(e.target.id!=='YOUR_MAIN_MENU_BUTTON(S) OR TOOLTIP'){setTimeout(function () {YOUT_HIDE_INSTRUCTION}, 0);}
});
}