Using the radio buttons for alternate sheet "pages?"

Some one talking about this, but I can't seem to find the thread. This is the basic setup for it, right? Obviously there is nothing in the sheets, but when I put any thing in there, I do not see any thing going on. <input type="radio" class="isPC" value="1" name="attr_pc" checked> PC <input type="radio" class="isNPC" value="0" name="attr_pc"> NPC <div class="sheet-pc"> <div> <!-- Something Clever here! --> </div> </div> <div class="sheet-npc"> <div> <!-- Something Clever here! --> </div> </div>

You need the CSS for it too. Look at the pathfinder CSS file since this example is basically the Pathfinder html file.

An example of the CSS required

I'm using a 3 tab setup, works well. You can't use labels to make them pretty, so you have ugly radio buttons on the tabs, but maybe when css selectors 4 are actually added to chrome you'll be able to... Anyway, the post I followed to get it set up is here: <a href="http://css-tricks.com/functional-css-tabs-revisite" rel="nofollow">http://css-tricks.com/functional-css-tabs-revisite</a>... The basic method is to have your &lt;div&gt;s follow the radio buttons, then you can use [type=radio]:checked ~ div {display: block;} and [type=radio]:not(:checked) ~ div {display: none;} to show and hide the following divs. Note that you need one more layer than you currently are using, so that each radio only has one div as a sibling.

Oh. I didn't even realize that is was CSS dependent. So far I've only be messing with the HTML.

I can't get this to work for the life of me. Chrome or Firefox, All I get is the buttons. <a href="http://www.twitch.tv/mercnet/b/533790371" rel="nofollow">http://www.twitch.tv/mercnet/b/533790371</a>

Here's the one I'm currently working on. Of course you'll want to strip the current contents of the divs. The important CSS for tabs starts on line 987. If you like, I can post an already stripped one. <a href="http://jsfiddle.net/72FuR/" rel="nofollow">http://jsfiddle.net/72FuR/</a>

Oh, I just spotted the problem with your current setup. class="isPC" should be class="sheet-isPC" and in the css .isPC should be .sheet-isPC

Logan, the classes in the HTML don't need to have the sheet- prefix, as it will get added automatically. The CSS does, though.

True, however if you are using an external editor/demo, adding the classes to the HTML is needed to get consistent behaviour. Since he is using a jsfiddle, it would be advisable to make them match.

I still have no idea why I can not see anything.

<a href="http://jsfiddle.net/c9pTu/" rel="nofollow">http://jsfiddle.net/c9pTu/</a> I copied it from the one you were using in the video and changed the class I mentioned, it is working for me, so if you're still having issues I need some more details. Oh, and you might want to include the link to the jsfiddle you're using in the video next time, save people the trouble of snagging it from the video :)

It is the one brian posted. The function works fine in jsfiddle, but using the same exact code, will not work in roll20 editor or runtime.

All classes in the character sheet's CSS (such as .isPC and .isNPC) must begin with "sheet-". The jsfiddle doesn't have that requirement, because it doesn't modify the classes on your HTML elements like Roll20 does.

So I need to add sheet- to everything in roll20 editor? I get everything you are saying. What I don't get... is why roll20 is being stupid about it.

There has to be something I am missing in the CSS because it just displays all "pages" and doesn't hide anything. Yet, everything looks the way it should. It is so frustrating nearly a whole day wasted trying to get this to work. I really want this functionality on my sheet.

Damn it, it was the css... since adding the sheet- to the is&lt;page&gt; classes, the CSS needed to be updated. Finally I can move on with my life and stop drinking this bottle of rum ive been wanting to throw at the screen for the last 5 hours.

Well, I just learned all this, and the thing was I was looking at the HTML and not the CSS. I have since took a break because I went 5 hours looking that over and didn't even notice the error, even when told. I've been pushing my self too hard. I got it now, so its all good.

So this is all working, somewhat. I have a video here showing the weird behavior I am seeing now. My particular setup uses four buttons to switch between the 4 areas of the sheet, basic character info and logo as a header. I can change between the pages just fine, but there is nothing showing for sheet-equip. Furthermore, when the radio button is on the first sheet (sheet-stats) and then I switch to the next one, it immediately switches to the last page (sheet-spells) Here is the video... <a href="http://www.twitch.tv/mercnet/b/534295138" rel="nofollow">http://www.twitch.tv/mercnet/b/534295138</a> Is there something wrong here? Gist

The fact that 3 of your radio buttons have the same value might be the reason why the selection jumps. You click the radio button, Roll20 saves 0 as the value of "pc", and then Roll20 tries to synchronize the sheet, finding three inputs for "pc" with value 0, selecting them in sequence and ending on the last one. Not sure why the display isn't working properly, though. I don't see anything wrong at a glance.

What should the values be then? Should they just be numbered 1-2-3-4? Edit: yea using 1234 worked. Edit2: Fixed the equipment page. Is the CSS at the top of the gist, you'll notice that sheet-isEquip is spell Eqiup. Corrected and its working fine. Thanks for all the help.

After playing around with this some I think I found a way to turn the radio buttons into tabs using a label tag. With the css as follows: .sheet-character-sheet { display: none; } .sheet-expand:checked ~ .sheet-show, .sheet-expand:not(:checked) ~ .sheet-hide { display: block; } And the html: &lt;label style="position:absolute;left:2px;top:4em;"&gt; &lt;input type="radio" value="1" name="attr_tab" style="display:none;" checked/&gt; &lt;div style="float:left;"&gt; &lt;table style="width:64px;border-top:thin solid gray;border-right:thin solid gray;border-left:thin solid gray;border-radius: 3px 3px 0px 0px;"&gt; &lt;tr&gt; &lt;td&gt;tab1&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table style="width:800px;border-left:thin solid gray;border-right:thin solid gray;border-bottom:thin solid gray;"&gt; &lt;tr&gt; &lt;td&gt; tab1 stuff goes here &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div&gt; &lt;table style="width:64px;border:thin solid gray;background-color:#acacac;color:#555555;"&gt; &lt;tr&gt; &lt;td&gt;tab1&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/label&gt; &lt;label style="position:absolute;left:64px;top:4em;"&gt; &lt;input type="radio" value="1" name="attr_tab" style="display:none;" /&gt; &lt;div style="float:left;"&gt; &lt;table style="width:64px;border-top:thin solid gray;border-right:thin solid gray;border-left:thin solid gray;"&gt; &lt;tr&gt; &lt;td&gt;tab2&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table style="width:800px;position:relative;left:-62px;border-left:thin solid gray;border-right:thin solid gray;border-bottom:thin solid gray;"&gt; &lt;tr&gt; &lt;td&gt; tab2 stuff goes here &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div&gt; &lt;table style="width:64px;border:thin solid gray;background-color:#acacac;color:#555555;"&gt; &lt;tr&gt; &lt;td&gt;tab2&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/label&gt; &lt;label style="position:absolute;left:128px;top:4em;"&gt; &lt;input type="radio" value="1" name="attr_tab" style="display:none;" /&gt; &lt;div style="float:left;"&gt; &lt;table style="width:64px;border-top:thin solid gray;border-right:thin solid gray;border-left:thin solid gray;"&gt; &lt;tr&gt; &lt;td&gt;tab3&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table style="width:800px;position:relative;left:-126px;border-left:thin solid gray;border-right:thin solid gray;border-bottom:thin solid gray;"&gt; &lt;tr&gt; &lt;td&gt; tab3 stuff goes here &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div&gt; &lt;table style="width:64px;border:thin solid gray;background-color:#acacac;color:#555555;"&gt; &lt;tr&gt; &lt;td&gt;tab3&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/label&gt;

Randall, your example does not work (primarily because you're not using the classes you've defined in your CSS). Multiple inline styles and single-cell tables also makes for hard-to-read code and difficult maintenance.

Yea, I know, I try to avoid tables as much as possible. I love the 1/2/3 column bit the dev team made for us. I try to keep tables only for tabular data, but if you notice in my code, I use one to center an img. Ha! This was before I read up on &lt;center&gt; There are so many tags and bits I am missing. Like I see I make classes to use styles on but then I just said F it and made all the CSS inline. I am having trouble with text area styling though, I quite don't understand how it works. Right now my repeating feats section, I would like to use a textarea for the Effect box, but when I use it, I can't seem to style it correctly. Sigh, at this rate my first campaign won't be ready for another month. HA!

Sorry - apparently pasting text into here deletes some of the code, including 'class=' statements. Here is a simplified example: css: .sheet-character-sheet { display: none; } .sheet-expand:not(:checked) ~ .sheet-hide { display: block; background-color:white } .sheet-expand:checked ~ .sheet-show { display: block; background-color:red } html: &lt;label&gt; &lt;input type="radio" value="1" name="attr_tab" class='expand style="display:none;" checked/&gt; &lt;div class='sheet-character-sheet sheet-show'&gt; tab 1 selected &lt;/div&gt; &lt;div class='sheet-character-sheet sheet-hide'&gt; tab 1 not selected &lt;/div&gt; &lt;/label&gt; &lt;label&gt; &lt;input type="radio" value="1" name="attr_tab" class='expand' style="display:none;" /&gt; &lt;div&gt; tab 2 selected &lt;/div&gt; &lt;div class='sheet-character-sheet sheet-hide'&gt; tab 2 not selected &lt;/div&gt; &lt;/label&gt; The only problem here is that this gives you a vertical list, not a nice row of tabs.. To make proper tabs, you need to re-position everything manually so the tabs line up in a row and any information below the selected tab lines up to the left side.

This should work (and be a but cleaner) <a href="http://jsfiddle.net/VJegX/" rel="nofollow">http://jsfiddle.net/VJegX/</a>

FYI, "top" is an invalid value for "float". Your example works well, although the hard-coded tab width could cause havoc if you ever have longer tab names. That would be a good use of inline styles, to ensure the tab width is correct, as the inline style would override the default width set in the CSS. The nested labels is certainly interesting. Here's a fork of your example that uses an inline-block display instead of relative positioning, letting you eliminate the inline styles used for positioning: <a href="http://jsfiddle.net/2QxN9/" rel="nofollow">http://jsfiddle.net/2QxN9/</a> You can see that I used an inline style on the last tab to widen it and accommodate the extra long name.

Your example is exactly what I was trying to accomplish, but while it works perfectly in js fiddle, when I paste it into roll20, the tabs just stack on top of each other and do not line up correctly.

Looks like the default stylesheet is setting the label to display: block. Add this: label { display: inline; } label, label div { font-size: 12px; font-weight: normal; } (Based on the screenshot, it seems the inline width for the final tab also needs to be increased, but that's trivial.)

That did the trick - thanks!

My god, Brian you are some kind of wizard.

Michael P. said: My god, Brian you are some kind of wizard. This type of thing is part of my job description, actually. It's kind of nice to have some webdev work with no deadlines attached. =)

I LOVE you Brian! I owe you a pint, or a glass, or jug..or whatever you poison of choice is... I've been racking my brain how how to make a rifts sheet 'neat' when it looks like this normally <a href="http://i.imgur.com/RPOsAF0.jpg" rel="nofollow">http://i.imgur.com/RPOsAF0.jpg</a> Without making it 40 miles long..the tabs is a great way! And since you always seem to have the answers I need, If you (or anyone actually) is ever up for some "no rush or deadline" pro bono work for a bit of cash, of looking over and cleaning up my 1st grader level 'beat into submission until it looked right" html/css I got for it, Id be a happy GM :)

William R. said: pro bono work for a bit of cash You know "pro bono" generally means "for free," right? =)

yea, i meant "pro bono work OR for a bit of cash" was typing faster than I should, I type with 40yo fingers, refusing to admit they don't move like they did 20 years ago typing and miss words :P why 90% of my posts you see "edited" on it.

William, I have the same problem. Though I am only 34 :)