Tabbed Content on Custom Page

[Maiden]

So I'm trying to recreate this but on a custom page for V5

Can anyone point me in the right direction?

Thanks

[LILITH]

You are trying to use the dynamically tabbed code? Am I right? You should be able to do it much the same way. Can you explain exactly what you mean please? Sorry if I am being daft. :3

[Maiden]

Hi LILITH

I'm not trying to use the dynamically tabbed code, or I could do if someone told me how to make it appear only on a single custom page rather than the whole forum.

The tabbed table here which I am trying to recreate was made by the old head Admin from a read only board and some coding that to me is like magic.

I'd like to have the new players guide as a custom page in V5 solariatest.freemessageboards.com/page/npg and have set it to be what people are taken to when they first register.

However that long wall of text (even if I coloumed it) is quite intimidating, so I'm keen to recreate something a bit like the link on my V4 or like the profile view on V5 where I can have the content in different tabs.

[Jordan]

Dec 14, 2012 1:37:55 GMT -8 Maiden said:

Hi LILITH

I'm not trying to use the dynamically tabbed code, or I could do if someone told me how to make it appear only on a single custom page rather than the whole forum.

The tabbed table here which I am trying to recreate was made by the old head Admin from a read only board and some coding that to me is like magic.

I'd like to have the new players guide as a custom page in V5 solariatest.freemessageboards.com/page/npg and have set it to be what people are taken to when they first register.

However that long wall of text (even if I coloumed it) is quite intimidating, so I'm keen to recreate something a bit like the link on my V4 or like the profile view on V5 where I can have the content in different tabs.

They are using my code which was created by a visual editor I created: xtriad.comxa.com/dtt/generator.html

However, that is for version 4.5 and not version 5. The plugin I created for version 5 doesn't work on custom pages since Proboards won't allow us to run plugins on custom pages...So, I'll need to know what you want your table to look like since it has to be done by hand until I find some motivation to update that visual editor.

For now just stick this in the HTML tab of your custom page.

<style type="text/css">

/* Background color of tabs */
table.list > thead > tr.dtt_tabs > th,
table.list > tbody > tr.dtt_tabs > td,
th.dtt_sidebar_title {

     /**
      * Look up @container_background_color_2 in
      * Admin > Themes > Colors And Styles > Style Sheet
      * for the recommended color.
      */

      /* background-color: #F8F8F8; */
}

/* Hover color of tabs */
.list .item.state-hover,
.list .board.item:hover {

     /**
      * Look up @container_background_color_1 in
      * Admin > Themes > Colors And Styles > Style Sheet
      * for the recommended color.
      */

      /* background-color: #FFFFFF; */
}

/* Tab selected color */
.list .item.state-selected {

     /**
      * Look up @container_background_color_1 in
      * Admin > Themes > Colors And Styles > Style Sheet
      * for the recommended color.
      */

      /* background: #FFFFFF; */
}

.dtt_sidebar_title {
      border-width: 0px 0px 1px 0px !important;
}

.dtt_tabs_content {
      border-width: 0px !important;
}

.dtt_sidebar_content {
      border-width: 0px !important;
}

div.dtt.container.boards {
      display: none;
}

</style>

<div class="dtt container boards">
      <div class="title-bar center">
            <h2>Getting Started at Solaria Weyr & Ketrin Hold</h2>
      </div>
      <div class="content cap-bottom">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                  <tr class="dtt_header_row">
                        <td valign="top">
                              <table class="list" role="grid">
                                    <thead>
                                          <tr class="dtt_tabs">
                                                <th class="board item clickable" onclick="dynamically_tabbed_table.toggleTab($(this));">Welcome</th>
                                                <th class="board item clickable" onclick="dynamically_tabbed_table.toggleTab($(this));">Getting Started</th>
                                                <th class="board item clickable" onclick="dynamically_tabbed_table.toggleTab($(this));">Your First Character</th>
                                                <th class="board item clickable" onclick="dynamically_tabbed_table.toggleTab($(this));">Candidates and Clutches</th>
                                                <th class="board item clickable" onclick="dynamically_tabbed_table.toggleTab($(this));">What Next?</th>
                                          </tr>
                                    </thead>
                              </table>
                        </td>
                  </tr>
                  <tr class="dtt_content_row">
                        <td valign="top">
                              <table class="list" role="grid">
                                    <tbody>
                                          <tr class="dtt_content">
                                                <td class="dtt_tabs_content">
                                                      <div style="display: none;">
                                                            Welcome to Solaria Weyr & Ketrin Hold! As with joining any established game, starting out here may seem daunting. We’re a friendly bunch of people though, and we’re always excited to meet and play with new people, so don’t be afraid!<br /><br />
                                                            This guide is designed to help you get started as easily as possible, and get you involved in the game with the least amount of stress.
                                                      </div>
                                                      <div style="display: none;">
                                                            First things first, say hello! People may have already greeted you in the cbox, but don’t hesitate to say hi even if they haven’t. Even if people are in the middle of some crazy chatter, don’t worry about interrupting – we love to talk to and include new players! While the cbox is good for quick chatting, you may also like to introduce yourself in more depth in the <a href="http://solariaweyr.proboards.com/index.cgi?board=chat&action=display&thread=103">introductions topic</a>. Posting a little introduction about yourself there often helps older members to get an idea of who you are – and spot shared interests!<br><br>
                                                            While introductions are flying around, it’s a good idea to have a read over our <a href="http://solariaweyr.proboards.com/index.cgi?board=info">information board</a>. You may have read through this before you joined, but if you haven’t, it is strongly advised that you do in order to avoid confusion later. Our theme can be very different from many games, so reading through our information will explain the ins and outs of what our version of Pern is like.<br><br>
                                                            There are a lot of topics and reading through them all at once is probably not advisable or appealing. As a start, it’s a good idea to read the <a href="http://solariaweyr.proboards.com/index.cgi?action=gotopost&board=info&thread=76&post=237">IC setting</a>, <a href="http://solariaweyr.proboards.com/index.cgi?board=info&action=display&thread=69">history</a> (the full length history is an epic, but a summarized version can be found below it), <a href="http://solariaweyr.proboards.com/index.cgi?board=info&action=display&thread=108">women’s rights topic</a>, and the <a href="http://solariaweyr.proboards.com/index.cgi?board=info&action=display&thread=64">rules</a>. With the last, most of the rules are to do with character limitations, which won’t really be relevant unless you have a larger number of characters. However, it’s not a bad thing to have a rough idea of our OOC rules.
                                                      </div>
                                                      <div style="display: none;">
                                                            The biggest question a lot of people have is what character they should make. There's no right or wrong answer to this, but the best advice that can be given is: make a character that you can really jump in with. A travelling trader or hunter who lives out in the wild may seem like an amazing idea, but finding reasons for them to be at the Hold or Weyr (where the vast majority of our played characters are) will get boring quickly. For a first character, make someone who at least lives at Solaria Weyr or Ketrin Hold. If they've lived there a while, or all their lives, that can provide useful role-play hooks in the form of pre-existing acquaintances, friends, relationships, and maybe even enemies. It may also be a good idea to check out the <a href="http://solariaweyr.proboards.com/index.cgi?board=characters&action=display&thread=75">current information</a>, to see which character types we currently really want (and also which types are currently not being accepted).<br><br>
                                                            Many people have found that weyrlings are a good place to start with a character. As they are part of a close-knit group, straight away there are pre-formed relationships, and vast possibilities to develop more with role-playing. In addition, there are also lessons twice a month that are a useful way to throw yourself straight into role-play. When considering a weyrling, it's best to pick a played clutch - these are clearly marked in the <a href="http://solariaweyr.proboards.com/index.cgi?board=info&action=display&thread=207">hatching records</a> and <a href="http://solariaweyr.proboards.com/index.cgi?board=npcs&action=display&thread=1950">NPC rider directory</a>. These are the clutches that tend to have a higher proportion of played characters in them, as well as having the aforementioned lessons.<br><br>
                                                            Riders, Weyr residents, and Hold residents are also good characters to start with, though may be trickier depending on the particular character. An older character, especially a rider, is likely to have many acquaintances. For riders, a good idea is to look in the <a href="http://solariaweyr.proboards.com/index.cgi?board=info&action=display&thread=207">hatching records</a> and see which clutches have played riders: if you were to make a rider from that clutch, they are likely to know these riders, and this can be useful for getting started with role-play. For all characters, looking in the <a href="http://solariaweyr.proboards.com/index.cgi?board=rprequest">requests board</a> and asking in the cbox is a good way to find people who are interested in a character their own character is related to or knows. Again, these character relationships make for good starting points for topics, making finding initial role-play easier.<br><br>
                                                            When you've decided what character type you're going to make, it's time to pop on over to the <a href="http://solariaweyr.proboards.com/index.cgi?board=characters">character board</a>. There, you'll find the <a href="http://solariaweyr.proboards.com/index.cgi?board=characters&action=display&thread=46">character submission form</a>, which has the form for character profiles, and lots of information regarding the form. Start a topic in the character board for your characters. Most people tend to have the first post as a list of their characters, though this isn't a necessity. You can post a work-in-progress character, but you may need to poke an admin when they're finished to let them know they're ready to be looked at. Once your character's ready, you just need to wait for an admin to look them over (see the 'What Next?' tab for more information).
                                                      </div>
                                                      <div style="display: none;">
                                                            Candidates are, of course, always a popular choice of character, and can be a good one: like weyrlings, a group of candidates will be close-knit, with a lot of different relationships forming between characters. However, we have a slightly different candidate system here compared to most games, so there are a few points worth covering.<br><br>
                                                            Firstly, candidates here do not hang around as candidates when there is no clutch on the sands. Between clutches, they will take on their old job at the Weyr (if they were already at the Weyr before being a candidate), take on a new job or practise their craft at the Weyr (if they came from outside the Weyr), or return to where they came from. Obviously the last option is not so attractive if your character ends up Standing for more than one clutch, so the second option is usually the best for characters who were Searched from outside the Weyr. This has been done several times in the past, and the characters usually become integrated into the Weyr regardless of whether or not they Impress.<br><br>
                                                            With that in mind, we strongly advise that, if you want your character to be a candidate, you write them to be a well-rounded individual. A character who is written with a sole focus on their becoming a rider will be more difficult to play if they don't Impress, and have time between hatchings. Due to the nature of how Impressions of played characters are dealt with here, the majority of characters do not Impress the first time they Stand. Writing a character for who they are, and not just a future dragon rider, will make playing them outside of clutches a great deal easier, and much more enjoyable.<br><br>
                                                            Now, played (PC) and non-played (NPC) clutches have been mentioned in the 'Making a Character' tab. What is the difference between these? A played clutch is one that has a Search Committee (SCo), a group of people who organise the whole thing from start to finish. The clutch's eggs have descriptions based on a theme, people send in candidate applications specifying what colour(s) they are interested in their characters Impressing, and the SCo discuss candidates and decide who to Impress, and to what. They also write dragons for the Impressing characters: previous clutches' dragons can be seen <a href="http://solariapedia.wikidot.com/dragon">here</a> on the Solariapedia. These clutches also have named NPC weyrlings. The advantage of a PC clutch is that there tends to be more candidate role-play, which is a great opportunity to explore and develop your character, as well as forge relationships with other characters. Impressing candidates also get a detailed dragon, and the weyrling group has regular played lessons. Not all PC candidates will Impress at a PC hatching - the number is usually around five per hatching. This is so that SCo can put more into each dragon they write, and also so that we do not exhaust our available candidates in one hatching. PC hatchings take place every April and November, though the whole process of getting together a SCo, Search and candidacy occurs several months beforehand. <br><br>
                                                            NPC clutches do not involve a SCo, and all the NPC Impressions are unnamed. It is possible to purchase an Impression for a played character from an NPC clutch at the <a href="http://solariaweyr.proboards.com/index.cgi?board=bling&action=display&thread=1116">basic shop</a>, but in this case the dragon will be written by yourself. Weyrling groups from NPC clutches also do not have regular played lessons. Characters who have been candidates at previous clutches at Solaria Weyr can be played as candidates for NPC clutches; announcements are made when an NPC clutch is on the sands to let people know that characters can now be played as candidates for the clutch. The schedule for NPC hatchings can be seen in the <a href="http://solariaweyr.proboards.com/index.cgi?board=info&action=display&thread=207">hatching records</a>.<br><br>
                                                            It's not the end of the world if a candidate doesn't Impress at a played clutch, and it certainly doesn't mean that SCo dislikes the player or the character: most characters don't Impress first time, and the time spent as a candidate, and as a worker between clutches, is valuable for character development. By the time the next clutch comes round, they'll be a more developed character, with many relationships formed in the Weyr and possibly even Hold. We've found here that spending time developing a character before they Impress makes them much easier to play as a rider; often, a character who has been written solely with the intention of Impressing can be difficult to play after they Impress, due to their not having a strong background.
                                                      </div>
                                                      <div style="display: none;">
                                                            So you've made your first character. Staff will give any feedback on your character in the form of constructive criticism; for newer players, this is usually mostly tweaks to fit in with our rather particular canon, but most people are also asked to expand on sections, particularly personalities and history. The more in-depth and well-rounded they are as a character, the better. We like to see characters whose personalities make sense and have depth, rather than two or three defining traits that make them come off as flat. In histories, we prefer a character whose history is laid out in a clear, easily read way, without contradictions, and that explains important events in the character's life and how that has moulded them as a person. Proof-reading characters, or running them through a spellchecker, is always advisable to pick up any accidental mistakes. We don't intend to offend when we offer character feedback; instead, we are striving to get the full picture of the character that you are writing.<br><br>
                                                            If an admin has not looked at your character within twenty four hours, feel free to poke one in the cbox, or send them a PM. We try to be on the ball, but sometimes characters can slip past our radar. Don't feel that you're hassling us by asking: we don't mind being prodded! Once your character's been approved, go and add them to the <a href="http://solariaweyr.proboards.com/index.cgi?board=threadfall&action=display&thread=2194">PC injure-ables list</a> for Threadfalls - what you state for them there will influence how badly they can be injured (if at all) during NPC and PC Threadfalls.<br><br>
                                                            Now it's time to role-play! You may have already discussed a first scene with somebody in the cbox or request board, but if not, don't worry! The 'open topics' section of the header table has topics that have not had any replies yet, which may be perfect for your first scene. In addition, there is also a section each for general Weyr and Hold topics, usually open things such as parties, clutchings and the like. Current weyrling lessons are also listed in the header table. If there are no topics that strike your fancy there, and you've had a look around and not spotted any topics you fancy, you may want to start a topic of your own. We have a large number of boards that offer the opportunity for a vast array of different scenes. Your topic will be added to the 'open topics' as soon as possible, and this has proved to be a good way to get it noticed by other players. Feel free also to mention the topic in the cbox, as people are often more than happy to jump in when they know the topic is there!
                                                      </div>
                                                </td>
                                          </tr>
                                    </tbody>
                              </table>
                        </td>
                  </tr>
            </table>
      </div>
</div>

<script type="text/javascript">

var dynamically_tabbed_table = {

      /** If the browser supports the HTML5 localStorage feature */
      hasLocalStorage: window.localStorage ? true : false,

      /** The local storage key that we will store the data by */
      localStorageKey: 'dtt-plugin',

     /**
      * Data stored by the script in the following format.
      * {
      * tab: 2, // The selected tab id starting from 0 (so this is the 3rd tab from the left)
      * hide: 0 // Hide the table content (not the title bar) if 1
      * }
      */
      jsonData: null,

      /** Proboards plugin data */
      plugin: null,

      /** Settings set by the user */
      settings: {},

      /** The currently selected tab */
      selected_tab: '',

      init: function() {
            if($('div.dtt.container.boards').size() > 0) {
                  this.loadPluginData();
                  this.loadJsonData();
                  this.configureTable();
            }
      },

      // Loads the Proboards plugin data
      loadPluginData: function() {
            this.plugin = proboards.plugin.get('dynamically_tabbed_table');
            this.settings = {

                  /** General table settings */
                  animate_table: true,
                  animation_speed: 'normal',

                  /** Tab data */
                  tabs: [1,2,3,4,5], // This is a temporary hack since plugin data isn't available
                  default_tab: 0
            };
      },

      // Finds any stored data for this script
      loadJsonData: function() {
            if(this.hasLocalStorage) {
                  var data = window.localStorage[this.localStorageKey];

                  if(data) {
                        this.jsonData = $.parseJSON(data);
                  }
                  else {
                        this.jsonData = {
                              tab: this.settings.default_tab,
                              hide: 0
                        };
                  }
            }
      },

      // Returns the data stored by the given key
      get: function(_key) {
            var result = null;

            if(this.jsonData) {
                  result = this.jsonData[_key];
            }

            return result;
      },

      // Called when a user clicks the table's title bar to hide or show the table content
      toggleTable: function(_table) {
            var contentToHide = _table.find('> div.content.cap-bottom');
            var hidden = contentToHide.is(":hidden");

            if(hidden) {
                  if(this.settings.animate_table) {
                        contentToHide.slideDown(this.settings.animation_speed);
                  }
                  else {
                        contentToHide.show();
                  }
            }
            else {
                  if(this.settings.animate_table) {
                        contentToHide.slideUp(this.settings.animation_speed);
                  }
                  else {
                        contentToHide.hide();
                  }
            }

            // Save the changes to localStorage
            this.jsonData.hide = !hidden;
            window.localStorage[this.localStorageKey] = JSON.stringify(this.jsonData);
      },

      toggleTab: function(_tab) {
            var table = $('div.dtt.container.boards');
            var new_tab_id = _tab.attr('class').match(/dtt_tab_title_(\d+)/i)[0].replace(/dtt_tab_title_/i, '');
            var old_tab_id = this.selected_tab;

            // Hide the current tab
            if(old_tab_id != '') {
                  table.find('th.dtt_tab_title_' + old_tab_id)
                        .removeClass('state-selected')
                        .css('border-width','0px 1px 1px 0px');
                  table.find('div.dtt_tab_content_' + old_tab_id).hide();
            }

            // Show the new tab
            table.find('th.dtt_tab_title_' + new_tab_id)
                  .addClass('state-selected')
                  .css('border-width','0px 1px 0px 0px');
            table.find('div.dtt_tab_content_' + new_tab_id).show();

            // Update settings
            this.selected_tab = new_tab_id;

            // Save the changes to localStorage
            this.jsonData.tab = this.selected_tab;
            window.localStorage[this.localStorageKey] = JSON.stringify(this.jsonData);
      },

      // Configures the table based on the plugin settings
      configureTable: function() {
            var self = this;

            /* TODO: Add support for more than one table */
            var table = $('div.dtt.container.boards');

            table.find('> div.title-bar')
                  .addClass('clickable')
                  .click(function() {
                        self.toggleTable(table);
            });

            var dtt_tab_row = table.find('tr.dtt_tabs');
            var dtt_tab_titles = dtt_tab_row.find('> th');

            var dtt_tabs_content = table.find('td.dtt_tabs_content');
            var dtt_tab_divs = dtt_tabs_content.find('> div');

            var tab_width = (100 / this.settings.tabs.length) + '%';
            var counter = 0;

            var default_tab_id = this.settings.default_tab;
            var default_tab = null;

            if(default_tab_id == null || default_tab_id >= this.settings.tabs.length || default_tab_id < 0) {
                  default_tab_id = this.settings.default_tab = 0;
            }

            // Check localStorage for the selected tab
            var selected_tab = this.get('tab');
            if(selected_tab != null && selected_tab < this.settings.tabs.length && selected_tab >= 0) {
                  default_tab_id = selected_tab;
            }

            // Hide the content if needed
            if(this.jsonData.hide) {
                  table.find('> div.content.cap-bottom').hide();
            }

            // Set the width and add listeners for each tab
            dtt_tab_titles.each(function() {

                  // Give the tab a classname of dtt_tab_title_#
                  $(this)
                        .addClass('dtt_tab_title_' + counter)
                        .css('width', tab_width)
                        // This isn't working for some reason
                        //.on('click', function() {
                        // self.toggleTab($(this));
                        //});

                  if(counter == default_tab_id) {
                        default_tab = $(this);
                  }

                  counter++;
            });

            counter = 0;

            // Give each tab's corresponding content div a classname of dtt_tab_content_#
            dtt_tab_divs.each(function() {
                  $(this).addClass('dtt_tab_content_' + counter);
                  counter++;
            });

            // Remove the border off the last tab
            dtt_tab_titles.last().addClass('last');

            // Toggle the default tab
            this.toggleTab(default_tab);

            // Display the table
            table.show();
      }
};

$(document).ready(function() {
      dynamically_tabbed_table.init();
});

</script>

[Maiden]

Amazing, thank you Jordan!

[Jordan]

Since you added another tab, you need to add the red so each tab has the same width.

// Loads the Proboards plugin data
loadPluginData: function() {
    this.plugin = proboards.plugin.get('dynamically_tabbed_table');
    this.settings = {

        /** General table settings */
        animate_table: true,
        animation_speed: 'normal',

        /** Tab data */
        tabs: [1,2,3,4,5,6], // This is a temporary hack since plugin data isn't available
        default_tab: 0
    };
},

Maiden

[Maiden]

Ahh cool thanks! I was just seeing if I could work out new tabs incase we did want to add things and just guessing at copy pasting while trying to work out vaguely what did what...

[Jordan]

The code is a little messy because I took it from the plugin version which pulls data from Proboards, but since this is on a custom page that data isn't available. I had to go through and take out some code that didn't work, and then modify some existing code to make it work on custom pages.

[Maiden]

Well I really appreciate it! Thanks so much Jordan!

[Joachim]

I know this is an old thread but I just wanted to say the following:

I was looking for a way to use dynamically tabbed tables on my custom pages (had not found this thread, ran a google search, found a few options, none that worked too well) and found your generator page, Jordan.

I filled in the details, copied and pasted into the html area of my custom page.. mucked around a plenty on the CSS/style so it better matched what I was looking for (since it otherwise took its colors from v4.5 set up that no longer works on v5) and it worked wonders, so despite that the generator is v4.5-based, it still can be made to work out just well on v5 custom pages.

So I'd like to thank you for the generator, even if it seems outdated, it still works. :)

[scratchmod]

I was searching for something like this for my custom page.

I was wondering and searching for a scroll bar to use on the custom page, or does it have to be in a side bar with CSS ! Ref forum here, the box on the left side. Love the layout of this forum btw.
solariaweyr.proboards.com/

My forum is currently this:http://modelerssocialclub.proboards.com/
I am not sure if I will keep the left and right side bars when I use the custom page as the main page.