Member Avatar for jonsan32

I've got a new navigation layout I'm trying to implement at this url:

It's not all done yet, but in my tests I've found this page to not work on an old un-unpdatable ipad of mine. I figure since not all people are internet-savvy, I'd best think of the worst case scenarios. So how can I ensure that all the hidden divs show when any particular label is pressed? Also, let me know if there are any other potential issues I might be overlooking.

PS I tried to add this script to a fiddle, but I couldn't figure it out. I suck at this stuff, and need any help you can offer. Maybe just view the code with your browser's console if you can. Thanks a ton.

  • 3 Contributors
  • 2 Replies
  • 188 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by broj1

Dani AI

Generated

Short, practical summary built on the existing replies (notes for , and thanks to and ): problems where a visible label click does not reveal a hidden panel are almost always either (a) the label-to-control activation is not being honored by that browser, or (b) the browser’s event model for touch differs from desktop click. The HTML label element will pass focus/events to its associated control when properly wired (id + for, or a nested input). (developer.mozilla.org) Mobile Safari / older iOS builds sometimes need touch-event fallbacks in addition to click. (stackoverflow.com)

Checklist of concrete fixes and quick diagnostics:

  • Confirm each label is explicitly associated (matching for → id) or that the input is nested; mismatches are the most common markup bug. (developer.mozilla.org)
  • Avoid silent pitfalls: IE/Edge have a known quirk where a hidden input placed before the visible checkbox inside the same label can steal the click; if that pattern exists, move or remove the extra hidden field. (dunkman.me)
  • Don’t use display:none on a focusable control you expect a label to activate. If an input must be visually hidden, use an accessibility-friendly technique (off-screen / sr-only) so the control still participates in the accessibility tree. (webaim.org)

Small, resilient JavaScript fallback (attach both touch and click, and use a tiny addEvent helper so very old IE won’t blow up):

function addEvent(el, ev, fn){
  if(el.addEventListener) el.addEventListener(ev, fn, false);
  else if(el.attachEvent) el.attachEvent('on'+ev, fn);
  else el['on'+ev] = fn;
}
function toggleHandler(e){
  e.preventDefault();
  var id = this.getAttribute('data-target');
  var t = document.getElementById(id);
  if(!t) return;
  t.className = t.className.indexOf(' visible')>-1 ? t.className.replace(' visible','') : t.className+' visible';
}
Array.prototype.slice.call(document.querySelectorAll('.toggle-label')).forEach(function(lbl){
  addEvent(lbl,'click',toggleHandler);
  addEvent(lbl,'touchend',toggleHandler);
});

For old IE/ancient devices, prefer the small fallback above (or the library mentioned if already included). Use a real device or cloud device tester to confirm behavior, inspect with remote devtools, and validate markup if something still behaves oddly. (developer.mozilla.org)

Recommended Answers

All 2 Replies

Member Avatar for rproffitt

My iPad is away at the moment so I can't test this. But there is something that I want to share here. I'm running into a lot of web makers that have such issues and I'm using caniuse.com a lot more often now.

It's a lot of work on some pages but if I have a suspect line I can see if I can use that on the target browser. Sometimes this site offers a workaround.

PS. Added with edit. W3C check follows. May want to see if you can reduce those errors.
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.50allstars.com%2F2016%2F05%2Fgrid-menu.html%3Fm%3D1

Edited by rproffitt because: Add PS
Member Avatar for broj1

I can't test the code since I am on Linux and using Firefox and Chrome. However my recommendation is that you use jquery functions in your javascript code since jquery is meant to abstract browser differences. Looking at your code you did include jquery library but are not using it. Also you could consider including latest version of jquery (either 2.2 or 1.12 if you need 1.x backward compatibility).

Other good tool for checking compatibility with any browser is Modernizr. You can use it to test whether a browser supports a feature you want to implement.

Edited by broj1
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.