Radio-Controlled Web Design

by Art Lawry

18 Reader Comments

Back to the Article
  1. The only problem I see with your method is the JavaScript to support ARIA relies on jQuery, which defeats the page load requirement you started out with.
    Copy & paste the code below to embed this comment.
  2. The shim for IE7 and IE8 utilizes `addEventListener` which is not supported by either of those browsers. It also uses `document.querySelectorAll` which is not supported by IE7.
    Copy & paste the code below to embed this comment.
  3. Thanks Chris, While I personally prefer to work in native JavaScript I find that jQuery’s simpler syntax and familiarity within the web design and development communities makes it easier to explain the logic behind what’s actually being done. The use of jQuery in the codepen.io examples is meant to make understanding the technique easier for those that may not be as familiar with native JavaScript. If you’re interested in the native JavaScript required to accomplish the same thing, here’s the radio-controlled tabs example in straight JavaScript.
    Copy & paste the code below to embed this comment.
  4. Nice article, thanks Art. I happen to read this on an iphone 4 though, using Chrome. I cant get the CSS examples to work. The functionak tabs are the ones that use javascript only for me. May be because of the code editor that is used to showcase the examples I am not sure. I will definitely get back and test it on my desktop pc as well.
    Copy & paste the code below to embed this comment.
  5. Thanks Thodwris, I’m very interested in what you find. Can you let me know what version of iOS your iPhone 4 is currently on as well?
    Copy & paste the code below to embed this comment.
  6. your ie7 and ie8 JS won’t work in those browsers because neither supports addEventListener and only ie8 supports querSelectorAll
    Copy & paste the code below to embed this comment.
  7. The only problem is with the JavaScript that sometimes don’t support to IE7 and IE8.
    Copy & paste the code below to embed this comment.
  8. Thanks Ben, you’re right. I created a gist of the updated shim that I believe addresses this, but I would love some additional eyes on it. radio-control ie7 ie8 shim
    Copy & paste the code below to embed this comment.
  9. Why not use a single checkbox input for instances where you’re toggling a specific state, like showing or hiding the modal or menu? Modal: http://codepen.io/shshaw/pen/vBKmJ
    Menu: http://codepen.io/shshaw/pen/gvefr In these examples, “checked” indicates visible and unchecked indicates hidden.
    Copy & paste the code below to embed this comment.
  10. Thanks Shaw, Checkboxes will work (I reference Chris Coyier’s and Scott O’Hara’s examples which both use checkboxes). I used radio buttons, even for the two-state use-cases, just to keep the complexity down. I personally prefer using checkboxes for two-state systems. There may be some benefit to using radio buttons everywhere for implementation consistencies, however, that is if you have at least one system with more than 2 states.
    Copy & paste the code below to embed this comment.
  11. Good thoughts. To me, a single state toggle is different enough from a multi-state system that the difference in implementations is warranted. The single state toggle code is much easier to modularize with general classes and all that changes in HTML per module is the input ID and label’s “for” attribute. A quick example: http://codepen.io/shshaw/pen/Bsbhl Thanks for the response, and thanks for the article. It got me rethinking some of my simple toggle uses on the site I’m currently developing.
    Copy & paste the code below to embed this comment.
  12. Hi Art, Love the article. I tried to build something based completely on focus states of a button recently but couldn’t get it working on mobile in the time I had, great to see that people are thinking along the same sort of lines. I’m of a similar opinion to Shaw, that checkboxes are really useful for open/close systems, otherwise I’ve found I had to hack together solutions such moving a second radio button label above the first to get the binary behaviour. With checkbox inputs in mind, have you got any thoughts on how to create a checkbox & radio input shim for ie7 and 8? As far as I can tell, it’s currently limited to interpreting radio inputs only. Interested to hear your thoughts! Cheers,
    Josh
    Copy & paste the code below to embed this comment.
  13. @Josh I’m working on a revised shim for radio buttons. It turns out that IE7 and IE8 _really_ don’t like triggering onchange events when you interact with their labels. For the current time I think it’s safer to think of this technique as IE9-forward, but I’ll post here once I have a more robust shim that handles checkboxes as well. It will most likely involve listening for a click on the labels, triggering change on the radio button, and blurring and focussing to try to force the change. If anyone has experience with this particular IE7 and IE8 shortcoming feel free to contribute.
    Copy & paste the code below to embed this comment.
  14. @Josh Here’s the revised shim for IE7 and IE8 that also supports checkboxes: https://gist.github.com/artlawry/6d2c15bc6aa1fe499611 IE7/8 really doesn’t like triggering onchange events until the radios/checkboxes lose focus, so a bit of click triggering was necessary. Also, IE7/8 does not like re-drawing parts of the page that dynamically change via sibling selectors, so the solution was to add and remove a class from the radio/checkbox parent which triggers a redraw of everything the input would have access to via the sibling selector. One final IE8 bug is that any comma-grouped css selectors will fail if any one of them do, so I had to separate out the _starks:checked_ rules from the _starks.checked_ rules. It’s not pretty, but it works.
    Copy & paste the code below to embed this comment.
  15. <nerd>Nice article - but it’s Catelyn Stark, not Caitelyn Stark</nerd> ;)
    Copy & paste the code below to embed this comment.
  16. @RSpil, thanks for having my nerd back! I’ll update my Codepens _immediately_, may George. R. R. Martin have mercy on my soul.
    Copy & paste the code below to embed this comment.
  17. So cool of you to share the info and super cool of you to write such a great, in depth article. Much Thanks!
    Copy & paste the code below to embed this comment.
  18. Great article!It is really nice to know that there are others dealing with similar situations, I am not alone. Having people skills as well as technical skills is an awesome combination.We should all work at it! Read more about my website here: Adjustable electric beds
    Copy & paste the code below to embed this comment.