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

3 value toggle

1470235702

Edited 1470236185
chris b.
Pro
Sheet Author
API Scripter
Has anyone built a 3 value toggle? obviously this has to be CSS only to work in a Roll20 character sheet.  I suppose a radio button behind it is the right choice, but how to set it so only the 'next' radio is displayed for the user?  I am thinking something along these lines: <input type="checkbox" name="attr_3way" value="3" class="sheet-3way" style="display:none;"/> <input type="radio" name="attr_3way" value="1" class="sheet-3way sheet-3way_val1" /> <input type="radio" name="attr_3way" value="2" class="sheet-3way sheet-3way_val2" /> <input type="radio" name="attr_3way" value="3" class="sheet-3way sheet-3way_val3" /> <div class="sheet-div_to_affect" ></div> and in css something like this? actually this could be n-way now that I think of it: .sheet-3way { opacity:0; width:1em; } .sheet-3way:not(:last-child) { margin-right:-1em; } .sheet-3way:checked + .sheet-3way { z-index:99; } .sheet-3way:checked, .sheet-3way:checked + .sheet-3way ~ .sheet-3way { z-index:0; } Second Question can we use the CSS pseudoclasses :in-range and :out-of-range ? It looks like they are supported by Chrome, Firefox, and even MS Edge. But I don't see any examples in the CSS Wizardry. There are a number of number inputs which we read via javascript and then set associated checkboxes. If we don't have to do that but just use :in-range and :out-of-range .. i suppose that would lower the # of attributes and make the sheet appear faster.  oh .. nevermind it does not do what I thought it does, I thought we could set the range :in-range(1-2)
1470238059

Edited 1470238185
chris b.
Pro
Sheet Author
API Scripter
Oh i just saw, looks like Brian answered my post before I even wrote it:&nbsp; <a href="https://app.roll20.net/forum/post/882997/css-wizar" rel="nofollow">https://app.roll20.net/forum/post/882997/css-wizar</a>... the only difference is I added a checkbox so I could pop the first radio button back on top. I assume this works, but after my locking tab adventure in PF i worry about getting too fancy
1470238587
Lithl
Pro
Sheet Author
API Scripter
chris b. said: Oh i just saw, looks like Brian answered my post before I even wrote it:&nbsp; <a href="https://app.roll20.net/forum/post/882997/css-wizar" rel="nofollow">https://app.roll20.net/forum/post/882997/css-wizar</a>... the only difference is I added a checkbox so I could pop the first radio button back on top. I assume this works, but after my locking tab adventure in PF i worry about getting too fancy You can look at the Exalted 3rd Edition sheet to see an example of my cycling button in action. It's used for all of the traits on the sheet.