Javascript drop down menu not working on iphone/ipad

Question

I have a javascript drop down menu on my site, and its not working on iphone/ipad, does anyone know what I should modify the code to so that it will work on those devices? (Blackberry for example the menu works fine).

JS file:

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{ 
 // cancel close timer
 mcancelclosetime();
 // close old layer
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 // get new layer and show it
 ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
 closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
 if(closetimer)
 {
 window.clearTimeout(closetimer);
 closetimer = null;
 }
}
// close layer when click-out
document.onclick = mclose; 

HTML for dropdown:

<ul id="rentals">
 <li><a href="#" 
 onmouseover="mopen('m1')" 
 onmouseout="mclosetime()">Verhuur</a>
 <div id="m1" 
 onmouseover="mcancelclosetime()" 
 onmouseout="mclosetime()">
 <a href="shortterm2bed1.html">2 Slk. Vakantie <font color="172983">&nbsp;| </font></a>
 <a href="shortterm3bed1.html">3 Slk. Vakantie <font color="172983">&nbsp;| </font></a>
 <a href="longtermrentals1.html"> Lange Termijn</a>
 </div>
 </li>
</ul>

Any help is greatly appreciated.

• Gordon Bell: I don't think iPad/iPhone have Javascript enabled by default.
• Samuel Edwin Ward: I bet this menu is fun to use when you're blind.

Answer 1

iOS does not support mouseover or mouseout. You will want to use touchstart and touchend. ie;

<div id="m1" 
 touchstart="mcancelclosetime()" 
...>

Here is a link to Apple's Dev Guide for Javascript.

Hope it helps and best of luck!

Answer 2

Ipad/Iphones do not support onmouseover, onmouseout events.

Check out this page for supported events:

http://backtothecode.blogspot.ca/2009/10/javascript-touch-and-gesture-events.html

You probably can just change to onclick.

Answer 3

I did find with GoLive Menumachine, which creates dropdowns, that I had the same problem. It wouldn't show the dropdowns on mobile devices. When I linked the main menu button to a page, it started working. In other words, if I have Services>Repair and Services>Updating, I had to have services link to a page in order for the dropdowns to work on my ipad and ipod. Don't ask me why.