Using the radio buttons for alternate sheet "pages?"

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

May 30 (11 years ago)

Pro

Sheet Author

API Scripter

An example of the CSS required

May 30 (11 years ago)

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: http://css-tricks.com/functional-css-tabs-revisite...

The basic method is to have your <div>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.

May 30 (11 years ago)

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

May 30 (11 years ago)

I can't get this to work for the life of me. Chrome or Firefox, All I get is the buttons.

http://www.twitch.tv/mercnet/b/533790371

May 30 (11 years ago)

Edited May 30 (11 years ago)

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.
http://jsfiddle.net/72FuR/

May 30 (11 years ago)

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

May 31 (11 years ago)

Pro

Sheet Author

API Scripter

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

May 31 (11 years ago)

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.

May 31 (11 years ago)

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

May 31 (11 years ago)

http://jsfiddle.net/c9pTu/ 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 :)

May 31 (11 years ago)

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.

May 31 (11 years ago)

Pro

Sheet Author

API Scripter

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.

May 31 (11 years ago)

Edited May 31 (11 years ago)

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.

May 31 (11 years ago)

Edited May 31 (11 years ago)

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.

May 31 (11 years ago)

Damn it, it was the css... since adding the sheet- to the is<page> 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.

June 01 (11 years ago)

Riley D.

Roll20 Team

Michael P. said:
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.

In my defense, there's a very good security reason to do that. It keeps people from completely messing with the rest of the application, which could lead to very bad things, and us not getting custom CSS/HTML features at all. I did my best to document the filtering so that it wouldn't catch anyone off-guard.

June 01 (11 years ago)

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.

June 01 (11 years ago)

Edited June 01 (11 years ago)

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... http://www.twitch.tv/mercnet/b/534295138

Is there something wrong here? Gist

June 01 (11 years ago)

Pro

Sheet Author

API Scripter

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.

June 01 (11 years ago)

Edited June 01 (11 years ago)

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.

June 09 (11 years ago)

Pro

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:

<label style="position:absolute;left:2px;top:4em;">
<input type="radio" value="1" name="attr_tab" style="display:none;" checked/>

<tr>

</tr>

</table>

<tr>

<td>

tab1 stuff goes here

</td>

</tr>

</table>

</div>

<div>

<tr>

</tr>

</table>

</div>

</label>
<label style="position:absolute;left:64px;top:4em;">

<tr>

</tr>

</table>

<tr>

<td>

tab2 stuff goes here

</td>

</tr>

</table>

</div>

<div>

<tr>

</tr>

</table>

</div>

</label>
<label style="position:absolute;left:128px;top:4em;">
<input type="radio" value="1" name="attr_tab" style="display:none;" />

<tr>

</tr>

</table>

<tr>

<td>

tab3 stuff goes here

</td>

</tr>

</table>

</div>

<div>

<tr>

</tr>

</table>

</div>

</label>

June 09 (11 years ago)

Pro

Sheet Author

API Scripter

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.

June 09 (11 years ago)

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 <center> 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!

June 09 (11 years ago)

Pro

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:

<label>

tab 1 selected

</div>

tab 1 not selected

</div>

</label>
<label>

<div>

tab 2 selected

</div>

tab 2 not selected

</div>

</label>

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.

June 09 (11 years ago)

Pro

This should work (and be a but cleaner)
http://jsfiddle.net/VJegX/

June 09 (11 years ago)

Edited June 09 (11 years ago)

Pro

Sheet Author

API Scripter

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: http://jsfiddle.net/2QxN9/

You can see that I used an inline style on the last tab to widen it and accommodate the extra long name.

June 09 (11 years ago)

Pro

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.

June 09 (11 years ago)

Edited June 09 (11 years ago)

Pro

Sheet Author

API Scripter

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.)

June 09 (11 years ago)

Pro

That did the trick - thanks!

June 09 (11 years ago)

My god, Brian you are some kind of wizard.

June 09 (11 years ago)

Pro

Sheet Author

API Scripter

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. =)

June 10 (11 years ago)

Edited June 10 (11 years ago)

DXWarlock

Sheet Author

API Scripter

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
http://i.imgur.com/RPOsAF0.jpg
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 :)

June 10 (11 years ago)

Pro

Sheet Author

API Scripter

William R. said:
pro bono work for a bit of cash

You know "pro bono" generally means "for free," right? =)

June 10 (11 years ago)

Edited June 10 (11 years ago)

DXWarlock

Sheet Author

API Scripter

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.

June 11 (11 years ago)