Using javascript tabs in frame5() roll option

Discuss macro implementations, ask for macro help (to share your creations, see User Creations, probably either Campaign Frameworks or Drop-in Resources).

Moderators: dorpond, trevor, Azhrei, giliath, jay, Mr.Ice

Post Reply
User avatar
Oriet
Cave Troll
Posts: 34
Joined: Mon Dec 05, 2011 10:58 am
Location: Somewhere that's not there, but not really here.
Contact:

Using javascript tabs in frame5() roll option

Post by Oriet »

I'm trying to figure out how to make javascript tabs within the frame5() roll option for use in character sheets. I've made several with pseudotabs like is show in Introduction to Dialogs and Frames, but as I like to have the pages all be editable to ease updating tokens I have to ensure each "page" is saved or changes are lost when going to a new pseudotab. I'd like it to behave more like tabs within the input() function.

Looking around I found https://www.w3schools.com/howto/howto_js_tabs.asp. I wasn't surprised when it didn't work just from copying and pasting, and the fist step I took was to put CSS into another macro (and call it with
<link rel="stylesheet" type="text/css" href="charSheetCSS@Lib:Macros"></link>
). Unfortunately, the only way I could get contents to display was by removing everything within the <script> tags, which means it doesn't use tabs at all.

I'll be able to alter the tab contents with updatable contents as needed later, but I would love some help getting javascript tabs to work. Or even just to know if it can't.
Kill them all, and let the Game Master grant the exp!

Image

User avatar
aliasmask
RPTools Team
Posts: 9023
Joined: Tue Nov 10, 2009 6:11 pm
Location: Bay Area

Re: Using javascript tabs in frame5() roll option

Post by aliasmask »

Can't use link (yet) for frame5 but you can put in css directly. You need to surround it with [r: " <your css in here> "] because the parser tries to interpret stuff in {} as code. Well, that's is one way of doing it.

User avatar
Oriet
Cave Troll
Posts: 34
Joined: Mon Dec 05, 2011 10:58 am
Location: Somewhere that's not there, but not really here.
Contact:

Re: Using javascript tabs in frame5() roll option

Post by Oriet »

I'll admit, I wondered if that would actually work, especially when it came to the <script> part of it. Tried it anyway and it does properly open with functioning tabs. Big thank-you!

For anyone curious (as I was), here's the sample I ended up working with. It doesn't do anything other than demonstrate that tabs work, but it'll work as a good starting point for making a character sheet.
Spoiler

Code: Select all

[frame5("Testing Tabs", "width=400; height=500;"): {
<html>
<head>
<style>
[r: "body {font-family: Arial;}"]
[r: ".tab {overflow: hidden;  border: 1px solid #ccc;  background-color: #f1f1f1;}"]
[r: ".tab button {background-color: inherit;  float: left;  border: none;  outline: none;  cursor: pointer;  padding: 14px 16px;  transition: 0.3s;  font-size: 17px;}"]
[r: ".tab button:hover {background-color: #ddd;}"]
[r: ".tab button.active {background-color: #ccc;}"]
[r: ".tabcontent {display: none;  padding: 6px 12px;  border: 1px solid #ccc;  border-top: none;}"]
</style>
</head>
<body>

<h2>Tabs</h2>
<p>Different pages for the character sheet:</p>

<div class="tab">
  <button class="tablinks" onclick="openPage(event, 'Main')" id="defaultOpen">Main</button>
  <button class="tablinks" onclick="openPage(event, 'Skills')">Skills</button>
  <button class="tablinks" onclick="openPage(event, 'Resources')">Resources</button>
</div>

<div id="Main" class="tabcontent">
  <h3>Main</h3>
  <p>Shows the main page of the character sheet.</p>
</div>

<div id="Skills" class="tabcontent">
  <h3>Skills</h3>
  <p>Shows the skills the character has.</p> 
</div>

<div id="Resources" class="tabcontent">
  <h3>Resources</h3>
  <p>Shows the various resources the character has at their disposal.</p>
</div>

<script>
[r: 'function openPage(evt, pageName) {  var i, tabcontent, tablinks;  tabcontent = document.getElementsByClassName("tabcontent");  for (i = 0; i < tabcontent.length; i++) {tabcontent[i].style.display = "none";}  tablinks = document.getElementsByClassName("tablinks");  for (i = 0; i < tablinks.length; i++) {tablinks[i].className = tablinks[i].className.replace(" active", "");}  document.getElementById(pageName).style.display = "block";  evt.currentTarget.className += " active";}']
[r: 'document.getElementById("defaultOpen").click();']
</script>
   
</body>
</html> 
}]
And a preview image: https://www.dropbox.com/s/xdcy9y54jeaax ... s.png?dl=0
Kill them all, and let the Game Master grant the exp!

Image

User avatar
bubblobill
Giant
Posts: 167
Joined: Sun Jan 24, 2010 3:07 pm

Re: Using javascript tabs in frame5() roll option

Post by bubblobill »

I created this to help me do a few web related things.
It includes JavaScript tabs with some examples.
It may assist you
lib_web.rptok
(158.75 KiB) Downloaded 50 times
Bubblobill on the forum.
@Reverend on the MapTool Discord Server

Responsible for less atrocities than most... I do accept responsibility for these though: SmartDoors, Simple d20 Framework - barebones, Drop-in: All 3.5 SRD Monsters, Drop in: Simple Character Editor, Battletech Framework

Post Reply

Return to “Macros”