Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

[CSS + sheet worker Wizardy] Multi-states (>3) checkbox

1491377974

Edited 1491378621
Natha
KS Backer
Sheet Author
API Scripter
The "CSS Wizardry" topic is still closed so I'll post this here before forgetting ... I was looking for a way to do a 4 states cycling checkbox (and without using images, to avoid the hosting hassle). I found several solutions online, through CSS only or JS+CSS, that looked great but couldn't be applied to Roll20 (either because of the JS part, or the CSS which would require the use of IDs). So I cobbled my own thing, which is not CSS only, but uses sheet workers. It's not pretty but it works : basically, it's an invisible checkbox on top of a radiobutton with 4 values. When clicking the checkbox, it fires a sheet worker which modified the attribute associated with the radiobutton (the value of the checkbox doesn't matter). There is probably a better and more elegant solution, though... GIF (click to see it in motion) : HTML: <span class="cyclestate">     <input type="checkbox" name="attr_COMprogsel" title="Combat, progression" />     <input type="radio" name="attr_COMprog" value="-1" checked /><span>◼</span>     <input type="radio" name="attr_COMprog" value="0" /><span>☐</span>     <input type="radio" name="attr_COMprog" value="5" /><span>☑</span>     <input type="radio" name="attr_COMprog" value="10" /><span>☒</span> </span> Sheet worker: on("change:COMprogsel", function(){     getAttrs(["COMprog"], function(values){         var prog = parseInt(values.COMprog) || 0;         var newprog = -1;         switch(prog) {             case -1:                 newprog = 0;                 break;             case 0:                 newprog = 5;                 break;             case 5:                 newprog = 10;                 break;             case 10:                 newprog = -1;                 break;             default:                 newprog = -1;         }         setAttrs({COMprog: newprog});     }); }); CSS: span.sheet-cyclestate input[type="checkbox"]{     opacity: 0;     z-index: 20;     width: 18px;     height: 18px;     margin-right: -18px; } span.sheet-cyclestate input[type="radio"]{    z-index: 1; } span.sheet-cyclestate input[type="radio"], span.sheet-cyclestate input[type="radio"] + span {   display: none; } span.sheet-cyclestate input[type="radio"]:checked + span {   display: inline-block;   width: 18px;   text-align: center;   -webkit-user-select: none;   -moz-user-select: none;   font-size: 18px;   color : #231F20; }
1491385982
Jakob
Sheet Author
API Scripter
There's a way to do it using only CSS, without workers. I recently posted a (not very clean, sorry) example of how I did it:  link .
1491386900
Natha
KS Backer
Sheet Author
API Scripter
Oooh thanks Jakob. I'll try that.
1491402631

Edited 1491402707
chris b.
Pro
Sheet Author
API Scripter
there's also a solution in the CSS Wizardly thread, an n-state checkbox by Brian here it is: <a href="https://app.roll20.net/forum/post/882997/css-wizar" rel="nofollow">https://app.roll20.net/forum/post/882997/css-wizar</a>...