Tabs

1487049087

Edited 1487084424
Rin Vindor
Pro
Sheet Author
I'm clearly an idiot because no matter how much I study other people's work I'm still not getting this and no amount of tinkering over the past month has helped me. I'm trying to just build tabs, failing miserably at it and what is in the forum hasn't sadly alleviated the issue. HTML <input type="radio" name="attr_sheet_type" class="sheet-tab sheet-tab1" value="Primary" checked/><span class="sheet-tab sheet-tab1"></span> <input type="radio" name="attr_sheet_type" class="sheet-tab sheet-tab2" value="Gear and Notes" /><span></span> <input type="radio" name="attr_sheet_type" class="sheet-tab sheet-tab3" value="Backgrounds" /><span></span> <input type="radio" name="attr_sheet_type" class="sheet-tab sheet-tab4" value="Rotes" /><span></span> <input type="radio" name="attr_sheet_type" class="sheet-tab sheet-tab5" value="Experience" /><span></span> <div class="sheet-tab-content sheet-tab1"> --Content-- </div> <other div tags with their "sheet-tab-content sheet-tab#s> CSS /* ******** Start code for tabs ******* */ div.sheet-tab-content{ display: none; } input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, input.sheet-tab4:checked ~ div.sheet-tab4, input.sheet-tab5:checked ~ div.sheet-tab5{ display: block; } input.sheet-tab{ width: 150px; height: 20px; position: relative; margin: -1.5px; cursor: pointer; z-index: 1; } input.sheet-tab + span::before{ width: 16%; opacity:1; } input.sheet-tab::before{ content: attr(title); border: solid 1px #c8c8c8; border-bottom-color: black; text-align: center; display: inline-block; background: black; background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); width: 150px; height: 20px; font-size: 18px; } input.sheet-tab:checked::before{ background: #dcdcdc; background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); /* border-bottom-color: #fff; */ } input.sheet-tab:not(:first-child)::before { border-left: none; } input.sheet-tab2::before { background: #fee; background: -moz-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); background: -webkit-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); background: -ms-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); background: -o-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8); } input.sheet-tab2:checked::after { background: #dcdcdc; background: -moz-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); background: -webkit-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); background: -ms-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); background: -o-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec); border-bottom-color: #fcecec; } div.sheet-tab2 { background-color: #fcecec; } /* Tables */ div.sheet-table{ width: 100%; display: block; font-size: 1.25em; font-weight: bold; text-align: center; } /* Gear Tab */ div.sheet-gear{ width:48%; padding-left: 10px; text-align: center; } textarea.sheet-gear { height:650px; width:100%; } /* expanded backgrounds */ div.sheet-ebackname{ } div.sheet-ebackdesc{ width:100% } textarea.sheet-ebackdesc{ width:100%; height:105px; } div.sheet-ebacks{ display: inline; } input.sheet-ebacks { width: 37px; } input.sheet-ebacks:checked ~ div.sheet-ebacks{ display: none; } input.sheet-ebacks:checked + span::before { content: "Show"; color: #a00; -moz-box-shadow: 0 0 2px transparent; -webkit-box-shadow: 0 0 2px transparent; box-shadow: 0 0 2px transparent; } input.sheet-ebacks + span::before { width: 36px; content: "Hide"; position: relative; left: -22px; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } /*rotes tab*/ div.sheet-rotesph, input.sheet-rotesph{ width: 400px; } /* experience tab*/ div.sheet-XPdesc{ width: 70%; } div.sheet-XPspent{ width: 22%; right: 0px; } div.sheet-XPcomp{ width: 6%; } input.sheet-XPdesc{ width: 70%; } input.sheet-XPspent{ width: 21%; } input.sheet-XPcomp{ width: 6%; } input.sheet-XPcomp + span::before{ background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } input.sheet-Dice{ width: 16%; } button[type=roll].sheet-Dice::before { content: ""; } select.sheet-Dice{ width: 150px; }
1487064410
Finderski
Pro
Sheet Author
This is how I do it on my character sheet... HTML: <!-- Set up the Tabs --> <input type="radio" class="sheet-tab sheet-tab1" name="attr_core-tab" value="1" title="Basic Info" checked="checked"/>  <span class="sheet-tab sheet-tab1" style='line-height: 40px;'>BASIC INFO</span> <input type="radio" class="sheet-tab sheet-tab2" name="attr_core-tab" value="2" title="Edges & Hindrances" />  <span class="sheet-tab sheet-tab2" style='line-height: 20px;'>EDGES & HINDRANCES</span> <input type="radio" class="sheet-tab sheet-tab3" name="attr_core-tab" value="3" title="Skills" />  <span class="sheet-tab sheet-tab3" style='line-height: 40px;'>SKILLS</span> <input type="radio" class="sheet-tab sheet-tab4" name="attr_core-tab" value="4" title="Equipment" />  <span class="sheet-tab sheet-tab4" style='line-height: 40px;'>EQUIPMENT</span> <input type="checkbox" class="sheet-showVehicles" name="attr_vehicle" style="width: 15px; display: none;" /> <input type="radio" class="sheet-tab sheet-tab7" name="attr_core-tab" value="7" title="Vehicles" />  <span class="sheet-tab sheet-tab7" style='line-height: 40px;'>VEHICLES</span> <input type="checkbox" class="sheet-hideArcanum" name="attr_ArcanumTab" style="width: 15px; display: none;"> <input type="radio" class="sheet-tab sheet-tab5" name="attr_core-tab" value="5" title="Arcanum" />  <span class="sheet-tab sheet-tab5" style='line-height: 40px;'>ARCANUM</span> <input type="radio" class="sheet-tab sheet-tab6" name="attr_core-tab" value="6" title="Journal" />  <span class="sheet-tab sheet-tab6" style='line-height: 40px;'>JOURNAL</span> <input type="radio" class="sheet-tab sheet-tab99" name="attr_core-tab" value="99" title="All" /> <span class="sheet-tab sheet-tab99" style='line-height: 40px;'>ALL</span> <input type="radio" class="sheet-combat sheet-tab8" name="attr_core-tab" value="8" title="Combat Options" /> <span class="sheet-combat sheet-tab8" style='line-height: 40px;'>⚔</span> <!-- End Tab setup --> <div class="sheet-section-core"><!-- Core Tab --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-edges" style="width: 800px;"><!-- Begin Edges/Hindrances Tab --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-skills" style="width: 800px;"><!-- Begin Skills --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-gear" style="width: 800px;"><!-- Begin Equipment Tab --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-vehicles"><!-- Vehicles Tab --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-arcanum" style="width: 800px;"><!-- Begin Arcanum --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-journal" style="width: 800px;"><!-- Begin Journal --> <!--Content of Tab Goes Here--> </div> <div class="sheet-section-combat" style="width: 800px;"><!-- Begin Combat Options --> <!--Content of Tab Goes Here--> </div> CSS: /*----------- Tabs Setup -------------*/ div.sheet-core-content { display: none; width:840px;} .charsheet div[class^="sheet-section"], .charsheet div[class^="sheet-options"] { display: none; } .charsheet input.sheet-tab1:checked ~ div.sheet-section-core, .charsheet input.sheet-tab2:checked ~ div.sheet-section-edges, .charsheet input.sheet-tab3:checked ~ div.sheet-section-skills, .charsheet input.sheet-tab4:checked ~ div.sheet-section-gear, .charsheet input.sheet-tab5:checked ~ div.sheet-section-arcanum, .charsheet input.sheet-tab6:checked ~ div.sheet-section-journal, .charsheet input.sheet-tab7:checked ~ div.sheet-section-vehicles, .charsheet input.sheet-tab8:checked ~ div.sheet-section-combat, .charsheet input.sheet-attacks:checked ~ div.sheet-options-attack, .charsheet input.sheet-defend:checked ~ div.sheet-options-defend, .charsheet input.sheet-misc:checked ~ div.sheet-options-other, { display: block; } .charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { display: block; } .charsheet input.sheet-hideArcanum:checked + div.sheet-section-arcanum, .charsheet input.sheet-showVehicles:not(:checked) + div.sheet-section-vehicles { display: none; } .charsheet input.sheet-tab, .charsheet input.sheet-combat-options {     width: 87px;     height: 40px;     cursor: pointer; position: relative; opacity: 0; z-index: 9999; } .charsheet span.sheet-tab, .charsheet span.sheet-combat-options { text-align: center;     display: inline-block; font-size: 11px; background: #c7c3b0; color: black; font-weight: bold; border-radius: 4px; width: 87px;      height: 40px;      cursor: pointer; position: relative; vertical-align: middle; margin-left: -91px;  } .charsheet input.sheet-combat { width: 25px; height: 40px; cursor: pointer; position: relative; opacity: 0; z-index: 99; } .charsheet span.sheet-combat { width: 25px; height: 40px; font-size 16px; text-align: center; display: inline-block; cursor: pointer; position: relative; verticalalign: middle; margin-left: -29px; } .charsheet input.sheet-tab1:checked + span.sheet-tab1, .charsheet input.sheet-tab2:checked + span.sheet-tab2, .charsheet input.sheet-tab3:checked + span.sheet-tab3, .charsheet input.sheet-tab4:checked + span.sheet-tab4, .charsheet input.sheet-tab5:checked + span.sheet-tab5, .charsheet input.sheet-tab6:checked + span.sheet-tab6, .charsheet input.sheet-tab7:checked + span.sheet-tab7, .charsheet input.sheet-tab99:checked + span.sheet-tab99, .charsheet input.sheet-attacks:checked + span.sheet-attacks, .charsheet input.sheet-defend:checked + span.sheet-defend, .charsheet input.sheet-misc:checked + span.sheet-misc {     background: #dbc792;       color: #755b27;  border-radius: 4px; } .charsheet input.sheet-combat:checked + span.sheet-combat { border: black 1px dotted; border-radius: 4px;  } /*----------- End Tab Setup -----------*/ Hope this helps.
1487075322

Edited 1487075367
plexsoup
Pro
Marketplace Creator
Sheet Author
API Scripter
@ Rin Vindor These lines: "input.sheet-tab1:checked ~ div.sheet-tab1" are looking for inputs with the class name "sheet-tab1", etc. Your inputs don't have class names. So instead of this: <input type="radio" name="attr_sheet_type" value="Gear and Notes" /> try this: <input type="radio" class="sheet-tab sheet-tab1" name="attr_sheet_type" value="Gear and Notes" />
1487076890

Edited 1487076903
Kryx
Pro
Sheet Author
Sharing my experience: For the Shaped sheet I have largely moved away from tabs as much as possible due to my usage of edit mode (a state to edit the sheet in, and a state to click macros). Additionally while two people (play and GM) are using the same sheet I often find that tabs stop updating properly. It doesn't always happen, but I often have to close the sheet and reopen it or refresh to get tabs working if my player is using the sheet.
1487084344

Edited 1487084507
Rin Vindor
Pro
Sheet Author
@ plexsoup Sorry every time I copy things from my code, the damn forums don't accept it. I've now edited it to properly include that here. Currently I have 5 buttons on the top left of my sheet that all work in switching to another tab but they're just buttons I cannot for the life of me get them to switch to text like everyone else seems to be able to do.
1487091761
plexsoup
Pro
Marketplace Creator
Sheet Author
API Scripter
Seems like you're missing the title for each input. title="tab1 title" I added the title for tab1 and 2 here https://jsfiddle.net/3c5nx8do/1/
1487094077
Rin Vindor
Pro
Sheet Author
That unfortunately doesn't solve the issue at hand. https://gyazo.com/e108d8195f1ca9e3d3f14df640057cab The actual text not displaying is the issue I'm having.
1487094258
plexsoup
Pro
Marketplace Creator
Sheet Author
API Scripter
Can you share a jsfiddle link or a github gist?
1487094517
Rin Vindor
Pro
Sheet Author
Ye. Sure thing. https://jsfiddle.net/we8hop99/
1487094680
plexsoup
Pro
Marketplace Creator
Sheet Author
API Scripter
At first glance it looks like you copied multiple css tricks onto one set of inputs. I see it's doing the fill in all bubbles from the left trick.
1487095028
plexsoup
Pro
Marketplace Creator
Sheet Author
API Scripter
You'll need to go through and add class names and css selectors for all the 'fill all bubbles from the left', so they don't interfere with your tabs. eg: /* Styles unique to fake checkbox (unchecked) */ input[type="checkbox"] + span::before { into :  /* Styles unique to fake checkbox (unchecked) */ input.sheet-className[type="checkbox"] + span::before {
1487096472
plexsoup
Pro
Marketplace Creator
Sheet Author
API Scripter
Tabs are working, but you'll have to fix all your attribute radio inputs https://jsfiddle.net/ex7f91u8/1/
1487134883

Edited 1487138366
Rin Vindor
Pro
Sheet Author
Losing mah mind to this. Plus the sheet viewer keeps making me think I've bugged the code somewhere too. *fist shake*
1487139849
Rin Vindor
Pro
Sheet Author
So I've managed to fix all the "fill in the bubbles" (and I greatly appreciate your help guys I'd literally be still at this with no progress I'm sure). Right now I've got 2 minor issues left. 1.  https://gyazo.com/8f039d61c9e85cfdb26852d93ae898ce The first 2 options under Virtuals should be clickable and switch between another tag. 2.  https://gyazo.com/9ec051e53095bb511141f2ee8c4cb8ff How the hell do I straighten these? I've tried all sorts of things like changing the align, I've also tried text-align:center but nothing seems to work.
1487142811
plexsoup
Pro
Marketplace Creator
Sheet Author
API Scripter
Hi Rin. Can you link me to a gist or pastebin or jsfiddle again? It's a bit hard to diagnose just from a screencap.
1487171825
Rin Vindor
Pro
Sheet Author
Yeah sure thing! https://jsfiddle.net/we8hop99/1/
1487273592

Edited 1487273626
Rin Vindor
Pro
Sheet Author
Also having issues setting up this button anyone mind elaborating what I'm missing on this thing? I've tried several ways to get this to work to no avail. <button type="roll" name="weapon_roll" value="&{template:default} {{name=@{weapon}}} {{result=[[ (@{combatAttribute}+@{combatAbility}+?{Modifiers|0})d10!}>?{Difficulty|6}f1 ]]}}"></button>
1487276247
plexsoup
Pro
Marketplace Creator
Sheet Author
API Scripter
This is probably obvious, but you have inputs for attr_combatAttribute and attr_combatAbility somewhere on your sheet right?  
1487281270
Rin Vindor
Pro
Sheet Author
Yeah they're directly above it. <div> <table align="center" > <tr> <h3 align="center">Combat</h3> </tr> <tr> <th>Weapon</th> <th>Damage</th> <th>Range</th> <th>Rate</th> <th>Clip</th> <th>Conceal</th> <th>Attribute</th> <th>Ability</th> </tr> <fieldset align="center"> <tr> <td><input type="text" style="width:80px" name="attr_weapon" value="" /></td> <td><input type="text" style="width:80px" name="attr_damage" value="" /></td> <td><input type="text" style="width:80px" name="attr_range" value="" /></td> <td><input type="text" style="width:80px" name="attr_rate" value="" /></td> <td><input type="text" style="width:80px" name="attr_clip" value="" /></td> <td><input type="text" style="width:80px" name="attr_conceal" value="" /></td> <td> <select name="attr_combatAttribute" style="width:85px"> <option valule="@{Strength}">Strength</option> <option valule="@{Dexterity}">Dexterity</option> </select> </td> <td> <select name="attr_combatAbility" style="width:85px"> <option valule="@{Archery}">Archery</option> <option valule="@{Athletics}">Athletics</option> <option valule="@{Brawl}">Brawl</option> <option valule="@{Firearms}">Firearms</option> <option valule="@{Melee}">Melee</option> </select> </td> <td> <button type="roll" name="weapon_roll" value="&{template:default} {{name=@{weapon}}} {{result=[ (@{combatAttribute}+@{combatAbility}+?{Modifiers|0})d10!}>?{Difficulty|6}f1 ]}}"></button> </td> </tr> </fieldset> </table> <br> <br> <div align="center"> <label>Armor</label> <input type="text" placeholder="Name" /> <input type="text" placeholder="Amount" /> <input type="text" placeholder="Penalty" /> </div> <br> <div> <h3>Gear</h3> <textarea name="attr_gear"></textarea> </div> <div> <h3>Notes</h3> <textarea name="attr_othernotes"></textarea> </div> </div>
1487286743

Edited 1487286829
plexsoup
Pro
Marketplace Creator
Sheet Author
API Scripter
Is the problem that the roll doesn't work or the button doesn't show up on the page? BTW: The roll statement you just posted is different from the one you posted further up. (There should be double square brackets in the result.) When I have trouble making a button roll work, I take the inner text and post it into chat to see if the roll is the problem: Pasted into chat, this works fine. [[ (?{combatAttribute}+?{combatAbility}+?{Modifiers|0})d10!}>?{Difficulty|6}f1 ]] So therefore, your original roll should be fine as well: [[ (@{combatAttribute}+@{combatAbility}+?{Modifiers|0})d10!}>?{Difficulty|6}f1 ]] Another thing I try when I'm troubleshooting roll buttons, is to eliminate all the spaces. Might not matter, but sometimes I'm caught offguard when a space is interpreted the wrong way. Which leads to this: [[(@{combatAttribute}+@{combatAbility}+?{Modifiers|0})d10!}>?{Difficulty|6}f1]]
1487286923
Silvyre
Roll20 Mod Team
[[ (@{combatAttribute}+@{combatAbility}+?{Modifiers|0})d10! } >?{Difficulty|6}f1 ]] I notice an unmatched curly bracket
1487287083
Rin Vindor
Pro
Sheet Author
Yeah the lack of a double bracket was something I caught afterwards but even with said double brackets it doesn't work. If I try to use it via the button it literally doesn't print anything. No error, nothing at all. If I try to paste it into chat I get an error: TypeError: Cannot read property 'substring' of undefined
1487287513

Edited 1487287607
Rin Vindor
Pro
Sheet Author
Even after fixing the missing curly bracket it still doesn't work. Still gives the same error. [[{(@{combatAttribute}+@{combatAbility}+?{Modifiers|0})d10!}>?{Difficulty|6}f1]]
1487287606
plexsoup
Pro
Marketplace Creator
Sheet Author
API Scripter
Good catch, Silvyre! @Rin: Yeah, you can't paste it directly into chat, because chat doesn't know what character you're refering to. That's why I change the @s to ?s for that test.
1487287688

Edited 1487287810
Rin Vindor
Pro
Sheet Author
@plexsoup Yeah I know and when I change them to ? nothing gets posted in chat :| I properly type the Attribute and Ability names and nothing comes of it. The only way it works properly is if I just type in numbers when the prompts arise.
1487288033

Edited 1487288063
Silvyre
Roll20 Mod Team
I also see "value" misspelled as "valule" several times within the code posted earlier.
1487288373
Rin Vindor
Pro
Sheet Author
Well I feel retarded for that :| But of course even after fixing that  it still produces nothing when the button is rolled.
1487288780
Rin Vindor
Pro
Sheet Author
Welp good news is I got it posting rolls finally \o/ thanks to you glorious people (I cannot believe (I can actually) that it was a damn typo). Now just gotta hunt down the next pesky bug but I think I got this one :)
1487289082
Rin Vindor
Pro
Sheet Author
I do have one last question I haven't been able to really find a good answer on. Is there a way to crease the size of the character sheet's width when it first opened up?
1487302373

Edited 1487303542
Rin Vindor
Pro
Sheet Author
Solved that with a very quick change to the .charsheet width in css. I'm still stuck on two things at this point one, how to change some of the boxes to use X instead of O it was setup that way but with all the tinkering its been a pain to figure out what precisely controls what. https://jsfiddle.net/mz3t0rpd/
1487308953

Edited 1487309003
plexsoup
Pro
Marketplace Creator
Sheet Author
API Scripter
For those fill in bubbles, you can change the content to anything you want. /* Styles unique to fake dot (checked or left of checked) */ #not-tab[type="radio"] + span::before { content: "X"; width: 12px; height: 12px; font-size: 18px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
1487316019
Rin Vindor
Pro
Sheet Author
Well the problem I am having is getting the square checkbox with the X to function again.