Context:
StackOverflow members helped me with some javascript to make a portfolio “data-base” web page: principally, a number of artworks in 100+ separate div components, the divs being filterable by “media-type” from a JS dropdown menu within the nav bar.
For improvement, knowledge entry and testing I am on a Mac, switching between a code editor and Firefox in responsive design mode. Like this, my data-base web page works completely. Reside on-line it really works with desktop browsers, and Android mobiles, however with a Mac iOS (iPad, iPhone) a small however essential little bit of performance is lacking.
Particular drawback:
ONLY below Mac iOS (examined with iPad, iPhone):
Tapping the suitable navbar component to indicate the dropdown menu works, however tapping exterior the dropdown to shut it (with out making a variety) doesn’t. Below iOS, the one method to shut the dropdown menu is to make a choice from it. That is counterintuitive to many person habits, and in addition adjustments the state of the web page (as tapping any dropdown hyperlink ought to).
I’ve the next javascript within the web page head:
<script sort="textual content/javascript">
/* When person clicks on the named goal component,
toggle between hiding and displaying the dropdown content material
by invoking css class ".present" */
operate myDropdownJS() {
doc.getElementsByClassName("navbarDROPDOWN-JS")[0].classList.toggle("present");
}
// Shut the dropdown if the person clicks exterior of it
window.onclick = operate(e) {
if (!e.goal.matches('.dropbtn')) {
var myDropdown = doc.getElementsByClassName("navbarDROPDOWN-JS")[0];
if (myDropdown.classList.accommodates('present')) {
myDropdown.classList.take away('present');
}
}
}
/* When person clicks reload,
browser is prevented from storing present place and compelled to reload at web page high */
window.onbeforeunload = operate () {
window.scrollTo(0,0);
}
</script>
Why does this JS work absolutely with desktop browsers (inc. Mac) and Android cell however not iOS?
Is the difficulty even to do with the javascript… possibly that “onclick”?
To recap: I would like the JS dropdown menu to vanish, with no different adjustments, when the person faucets anyplace on the web page exterior it.
I might be thankful for any method to implement an iOS repair with simply javascript and/or css.
PS.
- Obv, there may be css related to the javascript dropdown. Most of it’s simply to do with design, and so I am fairly positive just isn’t related to the iOS present/disguise concern. For now, for concision, I’ve left it out.
- There may be extra javascript on the finish of the data-base web page: it is there as a result of it is to do with displaying/hiding divs with varied data-type definitions, and the code has to refer ‘again’ to the loaded web page content material as a way to try this. I can put up if anybody thinks it may be interfering with the dropdown present/disguise.
