• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Bear Bibeault
  • Jeanne Boyarsky
  • paul wheaton
Sheriffs:
  • Junilu Lacar
  • Paul Clapham
  • Knute Snortum
Saloon Keepers:
  • Stephan van Hulst
  • Ron McLeod
  • Tim Moores
  • salvin francis
  • Carey Brown
Bartenders:
  • Tim Holloway
  • Frits Walraven
  • Vijitha Kumara

Toggle Switch Button Code Review  RSS feed

 
Greenhorn
Posts: 8
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
My requirement was to show a toggle button with a message on it's right for mobile website. I have implemented this but I am not sure how good it is & if it will work on most of the mobile browsers. I am very new to the UI development & this is the first time I have implemented a UI component. To give an idea, this final implemented result look somewhat similar to this

I have broken down this requirement into 5 parts -
1. The container - Parent div
2. Checkbox. - Hidden checkbox behind button
3. The button
4. The inner circle of button
5. The message string which will be shown on the right.

Additionally, this button needs to be disabled for first few seconds of page. By disabling, I mean it should be unclickable & it's UX would be little different so that user knows that it's disabled.

HTML -
   

CSS -


JS Function to handle click -

Disable -


So, the idea is to append a css property called 'active' on click of the switch so that the inner circle is moved to right & background color is changed. I need to know if there is any risky css property I am using which may not work on many browsers. Also, is there any scope of improvement in this implementation?

 
Tony Singh
Greenhorn
Posts: 8
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Correction - "To give an idea, this final implemented result look somewhat similar to this"  - https://cdn-images-1.medium.com/max/1600/1*PjHEsBxh7B9BrYARqHcujQ.jpeg
 
Sheriff
Posts: 13373
221
Android Debian Eclipse IDE IntelliJ IDE Java Linux Mac Spring Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Is that the actual name you're using, my-toggle-button? Because if it is, then it can be improved by giving it a better name. Names should reflect their intent. What setting is being toggled by this? For example, if this were for a WiFi on/off setting, then I would name this button toggleWifi or wifiToggle or even simply just wifi.

Same thing for the toggleSwitchObject name in your Javascript code. Use names that help the other people who will have to read and maintain your code understand it and connect the dots. The fact that your actual element type is a checkbox also creates cognitive dissonance. Why use "button" in the name when the element is actually a checkbox? That's just likely to create confusion on the part of whoever is coming after you to maintain this.
 
Roses are red, violets are blue. Some poems rhyme and some don't. And some poems are a tiny ad.
global solutions you can do at home or in your backyard
https://www.kickstarter.com/projects/paulwheaton/better-world-boo
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!