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

[Request for Help] Trying to get a 'config' option to show/hide certain blocks on the character sheet

JSFIDDLE:&nbsp; <a href="https://jsfiddle.net/16bLmax7/1/" rel="nofollow">https://jsfiddle.net/16bLmax7/1/</a> Hello, I'm creating a new sheet for a game I'm running, a World of Darkness 20th anniversary edition.&nbsp; Because the game uses both werewolf and mage, none of the prebuilt sheets will work.&nbsp; Therefore I'm trying to build a sheet that can shift between different versions of the character sheet effortlessly.&nbsp; This has proven to be much more difficult than I expected. I have created this initial draft using the tabbed sheet layout.&nbsp; I currently have a CONFIG tab which will let the user turn on or off elements from the various versions of world of darkness, mage, werewolf etc using a checkbox to show/hide elements elsewhere.&nbsp; The problem is, it just isn't working. I copy/pasted some code from another character sheet to try and get it working and reverse engineer it, but obviously I am missing something. I want the code that is within the &lt;div class="sheet-section sheet-wound-threshold"&gt; to only show up when the checkbox for MAGE content is checked on the CONFIG tab. &lt;input type="checkbox" class="sheet-wounds-show" name="attr_wound_threshold-show"&gt; &nbsp; &lt;div class="sheet-section sheet-wound-threshold"&gt; &lt;label class="sheet-sl2 sheet-sml27"&gt;&lt;input title="@{mage_nature}" type="text" name="attr_mage_nature" placeholder="Nature"&gt;&lt;span&gt;Nature&lt;/span&gt;&lt;/label&gt; &lt;label class="sheet-sl2 sheet-sml27"&gt;&lt;input title="@{mage_essence}" type="text" name="attr_mage_essence" placeholder="Essence"&gt;&lt;span&gt;Essence&lt;/span&gt;&lt;/label&gt; &lt;label class="sheet-sl2 sheet-sml27"&gt;&lt;input title="@{mage_demeanor}" type="text" name="attr_mage_demeanor" placeholder="Demeanor"&gt;&lt;span&gt;Demeanor&lt;/span&gt;&lt;/label&gt; &lt;br&gt;&lt;!-- New Line --&gt;&lt;!-- Mage Core 2 --&gt; &lt;label class="sheet-sl2 sheet-sml27"&gt;&lt;input title="@{mage_tradition}" type="text" name="attr_mage_tradition" placeholder="Tradition/Convention"&gt;&lt;span&gt;Tradition/Convention&lt;/span&gt;&lt;/label&gt; &lt;label class="sheet-sl2 sheet-sml27"&gt;&lt;input title="@{mage_cabal}" type="text" name="attr_mage_cabal" placeholder="Cabal/Amalgam"&gt;&lt;span&gt;Cabal/Amalgam&lt;/span&gt;&lt;/label&gt; &lt;label class="sheet-sl2 sheet-sml27"&gt;&lt;input title="@{univ_concept}" type="text" name="attr_univ_concept" placeholder="Concept"&gt;&lt;span&gt;Concept&lt;/span&gt;&lt;/label&gt; &lt;/div&gt; but it doesn't, checked or unchecked that section remains invisible.&nbsp; I have pasted the code to jsfiddle, as I dont use github, and any assistance would be greatly appreciated, furthermore, when I complete this I'd be more than happy to share it with anyone else as most of the WoD sheets are rather.. old. P.s., yes much of the CSS not needed, I intend to clean it up after I pull what elements from my previous character sheets I need, then discard the rest.&nbsp; Also, while I am proficient in css1 and 2, I know almost nothing about using selectors ( + - &gt; &lt; ~) in css.&nbsp; They confuse me very badly.&nbsp; Which leads me to just blindly trial and error my way through stuff :P&nbsp; Admittedly, thats what makes css powerful, but I generally just use it for formatting.
1600646110

Edited 1600646596
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Not having much familiarity about the sheet, I'm confused why you are using visibility on sheet-section instead of display on sheet-section.&nbsp; But anyway: As far as I can see, your css does not contain a way to display section. In the css, you've declared the section to be both visibility:hidden &nbsp;and display:none &nbsp;yet have no code to toggle those.&nbsp; You need a: .sheet-wounds-show:checked ~ .sheet-wound-threshold { &nbsp;&nbsp;&nbsp;&nbsp;display: block; &nbsp; &nbsp; visibility: visible; } As far as selectors, its useful to have a guide up <a href="https://www.w3schools.com/cssref/css_selectors.asp" rel="nofollow">https://www.w3schools.com/cssref/css_selectors.asp</a> But they allow you to basically be more specific when you are handling classes. For example, if I'm trying to dress up a roll-button with an image that needs a border, I might write a css selector of: .sheet-button .sheet-image { &nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid yellow; } I'm saying that only things with the class image that is also inside a class button should have the border.&nbsp; But what if I have two images, say the button has a sword image followed by a dice image but I only want the sword to have a border. Currently the class would target both images because they both qualify as images insides a button. I could, as an option, make a new class and name it something like .sheet-image2, but then I might have to add it to a bunch of other parts of the css or repeat styling I might have for sheet-image, or I can simply do something like: .sheet-button + .sheet-image { &nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid yellow; } I'm now using a selector that only applies to the first .sheet-image class immediately after .sheet-button, so it only applies to the sword image but not to the dice image.&nbsp;
1600646825

Edited 1600646890
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Oh, going back to your redundant visibility and display usage. I'd probably only use one or the other, I'm having a hard time imagining a use case for both. They both hide the section but will change your layout in different ways.&nbsp; Using display:none &nbsp;will hide the section and also collapse your layout as if it doesn't exist; this is useful if you are trying to do some space-savings on the sheet.&nbsp; Using visibility:hidden &nbsp; will hide the section but does not collapse your layout, it still takes up the same space as if it was visible. This is useful for maybe something that is temporarily hidden but you need a placeholder for it, such as maybe hiding icons in a skill-tree that become revealed later but the player should know that something is there.&nbsp;
1600647178
GiGs
Pro
Sheet Author
API Scripter
That html looks way too complex for what you really need. Also, your mage, werewolf, and so on options are probably exclusive: characters cant have more than one of them. So I would rewrite it more like this &lt;input type="hidden" class="race-type" name="attr_race" value="human" /&gt; &lt;select name="attr_race"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="human" selected&gt;Human&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="mage" &gt;Mage&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="werewolf" &gt;Werewolf&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="vampire" &gt;Vampire&lt;/option&gt; &lt;/select&gt; Notice there are two elements here that have the same name and default value: a visible select, and a hidden input. You then need the html of the things you want to hide or show, and the CSS that makes it happen. To do this, you'll repeat that hidden input several places on the sheet. So imagine there's a div containing the vampire elements, you would create that like &lt;input type="hidden" class="race-type" name="attr_race" value="human" /&gt; &lt;div class="race-vampire"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- vampire stuff --&gt; &lt;/div&gt; And you would create CSS for that like this: div.sheet-race-vampire, div.sheet-race-werewolf, div.sheet-race-mage { &nbsp; &nbsp; display: none; } input.sheet-race-type[value="vampire"] ~ div.sheet-race-vampire, input.sheet-race-type[value="werewolf"] ~ div.sheet-race-werewolf, input.sheet-race-type[value="mage"] ~ div.sheet-race-mage { &nbsp; &nbsp; display: block; } So the above div would only show up for vampires, and be hidden if you had a different race. Note that you should always test in roll20 itself, because many html things work differently in roll20 than in other sites.
1600648055
Eric
Sheet Author
Hi Toby ... I think you want to take a peek at the CSS Wizardry wiki; check the show/hide section which does what you want with checkboxes. <a href="https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas</a>
Richard T. said: Oh, going back to your redundant visibility and display usage. I'd probably only use one or the other, I'm having a hard time imagining a use case for both. They both hide the section but will change your layout in different ways.&nbsp; ..... This section is only using display: none.&nbsp; Now the navigation tabs at the top are indeed using visibility, because that is more appropriate.&nbsp; I am aware that there is a better way to do navigation menus now with sheet-workers.&nbsp; But I understand javascript even less, and I cant stand how the buttons look.&nbsp; Perhaps at a later time I will examine redoing the tabs, but for now they stay as they are. As for, not having a toggle to show the content, the opposite state for hide... is show, I am going by the logic that it wasnt required.&nbsp; That being said I have tried adding a bit of code for show, and nothing changes. In fact I have tweaked the code and now.... it never is hidden, no matter the state of the checkbox.
GiGs said: That html looks way too complex for what you really need. Also, your mage, werewolf, and so on options are probably exclusive: characters cant have more than one of them. So I would rewrite it more like this: .... I was not aware it was possible to use css in that manner, I can see a great deal of things I can try with that, however, I still would rather do it this way, as I actually want to be able to display everything at once.&nbsp; I have been in several games with npcs that are really rather strange.&nbsp; Not to mention, kinfolk and fae-blooded which might have elements from other sourcebooks.&nbsp; Oh and I'd be remiss if I didnt mention good 'ol Sammy.&nbsp; May he rot as an ash tray in a pile of Umbral Realm rubble for all eternity.&nbsp; :D
1600657812
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Toby said: Richard T. said: Oh, going back to your redundant visibility and display usage. I'd probably only use one or the other, I'm having a hard time imagining a use case for both. They both hide the section but will change your layout in different ways.&nbsp; ..... This section is only using display: none.&nbsp; Now the navigation tabs at the top are indeed using visibility, because that is more appropriate.&nbsp; I am aware that there is a better way to do navigation menus now with sheet-workers.&nbsp; But I understand javascript even less, and I cant stand how the buttons look.&nbsp; Perhaps at a later time I will examine redoing the tabs, but for now they stay as they are. As for, not having a toggle to show the content, the opposite state for hide... is show, I am going by the logic that it wasnt required.&nbsp; That being said I have tried adding a bit of code for show, and nothing changes. In fact I have tweaked the code and now.... it never is hidden, no matter the state of the checkbox. Maybe I'm just reading it incorrectly because I'm not used to this css syntax but I spotted this: div[class^="sheet-section"] { &nbsp; &nbsp; visibility: hidden; &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; max-height: 0; &nbsp; &nbsp; overflow: hidden; } and your threshold section would be targeted by it I believe.&nbsp; &lt;div class="sheet-section sheet-wound-threshold"&gt;
Hmm, fixed.&nbsp; I didnt see that.&nbsp; Unfortunately, that doesnt fix it either.&nbsp; In either event, the sheet-section code is mostly used with the navigation tabs. Perhaps I need sleep, and a fresh look will help me to see what I'm doing wrong.
1600684100
GiGs
Pro
Sheet Author
API Scripter
Toby said: GiGs said: That html looks way too complex for what you really need. Also, your mage, werewolf, and so on options are probably exclusive: characters cant have more than one of them. So I would rewrite it more like this: .... I was not aware it was possible to use css in that manner, I can see a great deal of things I can try with that, however, I still would rather do it this way, as I actually want to be able to display everything at once.&nbsp; I have been in several games with npcs that are really rather strange.&nbsp; Not to mention, kinfolk and fae-blooded which might have elements from other sourcebooks.&nbsp; Oh and I'd be remiss if I didnt mention good 'ol Sammy.&nbsp; May he rot as an ash tray in a pile of Umbral Realm rubble for all eternity.&nbsp; :D You can use the same technique I described using checkboxes instead of the select, and multiple inputs independent of each other. You need a checkbox for each property (mage, vampire, etc), each matched with a hidden input of the same name. The class you put on the hidden input is then used in the CSS to control whether a div is visible or not. Check out the CSS Wizardry page on hiding areas. This is a very commonly used technique in roll20 sheets.
1600728594
Andreas J.
Forum Champion
Sheet Author
Translator
Yes, please take a look at the CSS Wizardry section for hiding/swapping areas that Eric linked halfway through the thread: <a href="https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas</a>
1600755454

Edited 1600755663
Toby
Pro
Well, I have spent the better part of a day trying to figure this out and it has the same result... Nothing shows.&nbsp; I even tried importing the example from the CSS wizardry wiki page.&nbsp; And that works, so long as I keep the checkbox and the show/hide section exactly as it is in the example.&nbsp; The problem is, that's not where it is for me.&nbsp; The moment I move the check box to where all the configuration options are for my sheet (its own tab, elsewhere).&nbsp; Everything breaks and it doesn't show or hide anything beyond its default state of hidden. Is there a way to show or hide, regardless of the checkbox position in relation to the rest of the code?&nbsp; I mean I've seen it done, but I just cant replicate it. The Show Hide Contents should be on one tab: While the checkbox is on a different tab: Whenever what I need is for that checkbox to function regardless the showhide section's position on the page, and preferably for inline elements as well.&nbsp; Also, I was asked to show the code for the checkbox so...&nbsp; &lt;span class="sheet-table-data sheet-left" style="width:20%;"&gt; &lt;label&gt;&lt;input type="checkbox" name="attr_mage20-show" class="sheet-race-type-mage sheet-boldlabel-check sheet-noshow"/&gt; &lt;b title="Uncheck to Hide Mage 20th Character Information"&gt;Use Mage 20th&lt;/b&gt;&lt;/label&gt;&lt;/span&gt; The above is actually written as all on one line, I just added linebreaks for readability. EDIT: I have made the game page public at :&nbsp; <a href="https://app.roll20.net/join/8577316/pHTBlg" rel="nofollow">https://app.roll20.net/join/8577316/pHTBlg</a> .&nbsp; Feel free to examine it, though, it is a work in progress.
1600762063
Andreas J.
Forum Champion
Sheet Author
Translator
Keep a hidden duplicate of the checkbox in the correct spot, and it should work. It has to do with how the Sibling Selector work in CSS. You could look at my D6 Star Wars(in GitHub) for another working version of this, but it's on the older side &amp; might be more convoluted than needed.
Hrm, well I have gotten this to partially work, though I am not sure what I did to make it work because I am using code I used last night.&nbsp; The only thing thats different was I did alot of browser reloading instead of using the preview function.&nbsp; So many be some weird browser cache thing or the preview doesnt update all the time... I dont know. The problem is, when I try to hide the checkbox above the &lt;div&gt; sections that content what I want to show/hide... The script breaks.&nbsp; When inspecting the code, I see that the when it is set to a hidden input instead of a checkbox, it doesn't detect the state change from the un-hidden checkbox elsewhere on the page.&nbsp; Is this some sort of css class hierarchy problem, do i need to alter the show/hide code to refer to a different type of input perhaps? Also, an idea has occurred to me; when working with css wizardry page, I saw the new way to handle page tabs is to use buttons/sheet workers.&nbsp; I am terrible with js, but I know just enough to understand how code works and logic functions.&nbsp; Could I adapt that to use those buttons instead of checkboxes to show/hide different sections, and if so, would that be an easier option to work with?&nbsp; It looks like its more adaptable for tabs, not needing both inputs and spans being equal sized and lining everything up and all that junk. Once again, I want to thank all of you for your assistance, I know I'm a slow learner.&nbsp; And I can come off as a bit abrasive, I often have difficulty expressing what it is I am trying to accomplish in text.&nbsp; One of the reasons I cannot stand text-only based ttrpg sessions.
Hello! I'm also still a beginner (while also doing a WoD-based sheet, funnily enough), but at least in regards to the hidden input I can help. The input type should remain a checkbox and instead you add a "hidden" at the end, like this: &lt;input type="checkbox" name="attr_example" class="sheet-example" hidden&gt;
1600802455
GiGs
Pro
Sheet Author
API Scripter
Never use the preview function. Looking at the live sheet is the only way to be sure you're seeing wha is really there. I recommend trying out the custom sheet sandbox, it is MUCH faster than reloading the campaign when you want to see changes. The problem is, when I try to hide the checkbox above the &lt;div&gt; sections that content what I want to show/hide... The script breaks.&nbsp; When inspecting the code, I see that the when it is set to a hidden input instead of a checkbox, it doesn't detect the state change from the un-hidden checkbox elsewhere on the page.&nbsp; Is this some sort of css class hierarchy problem, do i need to alter the show/hide code to refer to a different type of input perhaps? Are you using just one checkbox or hidden input? Refer to my earlier post, where I used a select and a hidden input. With checkboxes, it works the same: you have a visible checkbox where you want it, and as many copies of a hidden input as you need, that has the same attribute name. The class on the hidden input (not the visible checkbox) is used to set the visibility of the sections, and a copy of the hidden input should be just before the section you want to hide. Once again, I want to thank all of you for your assistance, I know I'm a slow learner.&nbsp; And I can come off as a bit abrasive, I often have difficulty expressing what it is I am trying to accomplish in text.&nbsp; One of the reasons I cannot stand text-only based ttrpg sessions. You havent come over as abrasive in this thread, and i think we're all tolerant of some frustration with coding - it's a very common experience to be frustrated!
1600802634
Andreas J.
Forum Champion
Sheet Author
Translator
Toby said: Hrm, well I have gotten this to partially work, though I am not sure what I did to make it work because I am using code I used last night.&nbsp; The only thing thats different was I did alot of browser reloading instead of using the preview function.&nbsp; So many be some weird browser cache thing or the preview doesnt update all the time... I dont know. the preview is not accurate, don't rely on it <a href="https://wiki.roll20.net/Building_Character_Sheets#Common_Mistakes" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Common_Mistakes</a> Could I adapt that to use those buttons instead of checkboxes to show/hide different sections, and if so, would that be an easier option to work with? Yeah, you can adapt one of the other swap visible/tab example and use action button+sheetworkers.&nbsp;
Well, I want to say that I finally got this working an am able to move on.&nbsp; Thank you all for your help.&nbsp; Will probably have other issues that arise but for now I can get the sheet's general layout and content down.&nbsp; Then I'll worry about fancy stuff like sheet workers and fancy css styles.