For quite some time, I've been working on getting my Wordpress Theme to function properly on iOS devices. However, there seems to be a missing piece or perhaps a misunderstanding of how iOS operates that has led me to tackle this issue blindly.
My goal is to make a menu (essentially a div) appear every time another div is tapped. While this setup works flawlessly on Android, it's proving to be a challenge on iOS.
<script>
var $v = document.getElementsByClassName("midbar")[0]; //the div that triggers the menu appearance
var $x = document.getElementsByClassName("menubar")[0]; //the menu with opacity initially set to 0
$v.addEventListener("mouseup", TapEvent, false); //I used mouseup, touchend also works
function TapEvent(event) {
if ($x.style.opacity == 0) {
$x.style.height = "300px";
$x.style.opacity = "1";
$x.style.overflow-y = "auto";
}
else {
$x.style.height = "0px";
$x.style.opacity = "0";
$x.style.overflow-y = "hidden";
}
event.preventDefault();
return false;
}
</script>
You can check out the temporary site at: itdctest3.comule.com
The theme switches to mobile mode when the screen size is below 700px. The hidden menu is revealed by tapping on the Black Space to the right of the Site Title at the top of the page.
Any assistance or guidance on where to research would be greatly appreciated. Thank you in advance for your help.