Question

I have a web app for iOS devices. I have a pesky link that calls a javascript function to show and hide the div layer. however, instead of performing this javascript show/hide in the webapp view, it closes and loads the page and javascript in safari.

I want it to execute the javascript in the webapp view. I know it is possible because i have other javascript running on the page successfully, however it is not called by a link.

Here is my Javascript:

 <script language="javascript" type="text/javascript">

 function showHideDiv()
{
    var divstyle = new String();
    divstyle = document.getElementById("optionpanel").style.visibility;
    if(divstyle.toLowerCase()=="visible" || divstyle == "")
    {
        document.getElementById("optionpanel").style.visibility = "hidden";
    }
    else
    {
        document.getElementById("optionpanel").style.visibility = "visible";
    }
}
</script>

Here is the link that calls my Javascript:

 <a href="#" class="Action" id="action" onclick="showHideDiv();">Menu</a>

And finally, here is my div layer:

<div id="optionpanel" style="visibility:hidden">
 content here
 </div>

Answer 1

Did you tried o add ‘return false’ on the end of the function showHideDiv() and fix call:

<a href="#" class="Action" id="action" onclick="return showHideDiv();">Menu</a>

I also encourage you to try jqtouch or jquery mobile or any other framework for iOS which gives you support for things like tapping screen events.