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.

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!