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!

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.