I'm constructing a character sheet and I want to have certain buttons show up on the page and others not show up based on what the player has "prepared". There are 6 skills ie (s1_name, s2_name ...etc) and each skill has an attribute called "s1_prepared" which is a checkbox. So i was trying to "hide" roll buttons that are not "prepared" (ie prepared=0). Thanks in advanced.
If you have not read the css wizardry wiki page, I recommend it.
But one short answer is...
in the html you have code that looks like this.
<input class="sheet-testCloseChecked sheet-hidden" name="attr_Hide-Spells-Tab" type="checkbox" value="1"/>
<span class="sheet-HideIfCloseChecked">
whatever ... </span>
and in the css you have code that looks like this.
.sheet-testCloseChecked:checked+.sheet-HideIfCloseChecked,
.sheet-testCloseChecked:not(:checked)+.sheet-HideIfNotCloseChecked,
.sheet-testChecked:checked~.sheet-HideIfChecked,
.sheet-testChecked:not(:checked)~.sheet-HideIfNotChecked,
.sheet-testChecked:checked~div>.sheet-HideIfChecked,
.sheet-testChecked:not(:checked)~div>.sheet-HideIfNotChecked,
.sheet-testChecked:checked~div>div>.sheet-HideIfChecked,
.sheet-testChecked:not(:checked)~div>div>.sheet-HideIfNotChecked,
.sheet-testChecked:not(:checked)~.sheet-table-row>.sheet-HideIfNotChecked,
.sheet-hidden {
display: none;
}
Also, the tested condition does not have to be a checkbox everywhere. You could have something that is a number or a select option in one place, but call it a checkbox where you want to do a test. so for example
<input class="sheet-testCloseChecked sheet-hidden" name="attr_WeirdTest" type="checkbox" value="Bob"/>
will test as checked only when WeirdTest is equal to "Bob".
Gary said:
I'm constructing a character sheet and I want to have certain buttons show up on the page and others not show up based on what the player has "prepared". There are 6 skills ie (s1_name, s2_name ...etc) and each skill has an attribute called "s1_prepared" which is a checkbox. So i was trying to "hide" roll buttons that are not "prepared" (ie prepared=0). Thanks in advanced.
I hope each skill's attribute name is not the same. You meant "s1_prepared", "s2_prepared", etc?
The key thing to get right in these is assigning a class you can use in the CSS. You need a class on the checkbox, and a different class on the button.
Let's say you have the following CSS
<input class="sheet-showskill" name="attr_s1_prepared" type="checkbox" value="1"/> <button class="sheet-hidebutton"> //rest of button code skipped for clarity
Then in your CSS, you can use
input.sheet-showskill:not(:checked)~button.sheet-hidebutton {
display: none;
}or
input.sheet-showskill:not([value="1"])~button.sheet-hidebutton {
display: none;
}I cant remember if you need a different class name for each skill. (sheet-showskill1, sheet-showskill2, etc). You might not - test it.
Note the actual attribute name is not referenced here. You get its value by accessing the CSS class you give the checkbox. And using the checked approach, you dont actually need to use an attribute.
I tried those solutions and they still didn't work and I think it is because the checkbox is on one "tab" and the button was on another "tab". Once I moved both the button and checkbox onto the same tab it worked fine. Thanks for the help guys.
Yes, they have to be in the same div or similar section.
It is possible to make controls like this separated across divs, but the syntax is a bit different. For something like this, where the controls are naturally conencted (one checkbox to one button) is much simpler to keep them together.
Yes, once again, it is possible for the same attribute name to appear in multiple places, but they will all share the same input.
So if you want, it is easy to have a visible checkbox on one tab, but have a hidden checkbox with the same name on another tab. When the input is changed in one place, the checked/not checked status changes in the other.
Chris D. said:
Yes, once again, it is possible for the same attribute name to appear in multiple places, but they will all share the same input.
So if you want, it is easy to have a visible checkbox on one tab, but have a hidden checkbox with the same name on another tab. When the input is changed in one place, the checked/not checked status changes in the other.
Something to watch for is this works best with checkboxes...if you use radio buttons in multiple places with the same names and values, you'll get weird behavior.
One cool trick is the checkboxes with the same name and values can actually have different classes (or none at all) which can make the visible one look one way and the hidden on affect things (like the visibility of a tab).