Adding tabbed sections to a webtrees “story”

If you use the “stories” module in webtrees, you will have noticed that long stories can require a lot of scrolling down the page to completely read them.

Some people are quite happy with that display style. But personally I prefer to break a long story into logical “pages”.

It is actually quite easy to do this within the stories module, providing you have some basic understanding of HTML code.

First you need to wrap your entire story in a single <div> element, with a unique id such as “story_tabs”:

<div id="story_tabs">
      Your story content
</div>

Next give your tabs some titles, using html <ul> and <li> tags. Note that you must also use the <a> and <span> tags shown here.

<div id="story_tabs">
     <ul>
        <li><a href="#sub1"><span>INSERT TAB TITLE 1 HERE </span></a></li>
        <li><a href="#sub2"><span>INSERT TAB TITLE 2 HERE </span></a></li>
        <li><a href="#sub3"><span>INSERT TAB TITLE 3 HERE</span></a></li>
    </ul>
    Your story content
</div>

Now add your story in three separate <div> elements, each with an id to match the “#sub…” references in the titles, like this:

<div id="story_tabs">
     <ul>
        <li><a href="#sub1"><span>INSERT TAB TITLE 1 HERE </span></a></li>
        <li><a href="#sub2"><span>INSERT TAB TITLE 2 HERE </span></a></li>
        <li><a href="#sub3"><span>INSERT TAB TITLE 3 HERE</span></a></li>
    </ul>
    <div id="sub1" style="padding: 1em;">
        INSERT STORY PART 1
   </div>
    <div id="sub2" style="padding: 1em;">
        INSERT STORY PART 2
   </div>
    <div id="sub3" style="padding: 1em;">
        INSERT STORY PART 3
   </div>
</div>

The last step is to activate the javascript libraries necessary to make the whole thing work, and to have the formatting as other tabs on your site. At the very end of the page add these three lines of javascript:

<script type="text/javascript" language="javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery-ui-1.10.3.js">
</script> <script>jQuery("#story_tabs").tabs();</script>

There is one problem to remember for the future. You will see that the final piece code refers to “1.10.2.js” and “1.10.3.js”. webtrees has added version-specific titles to javascript libraries. This is a good thing, as it allows the library to be cached, yet be automatically reset when a new version is added. But for us it means we will have to remember to go back to these story pages and amend those numbers at each upgrade. Can’t be helped I’m afraid. It’s for the greater good  😕

Simpl-addons and webtrees 1.4.0

Since the release of webtrees 1.4.0 I have been completing the conversion of all add-ons so they are fully compliant with the new code.

A couple of them would work with no changes, but it is an opportunity to make minor improvements or bug fixes, so ALL simpl_addons either have been or will shortly be upgraded.

If you are looking for an add-on that does not show an Updated for w1.4.0 label please check back later. I will get to all of them as soon as possible.

If you have any questions about any of the downloads, plese go to the Support link in the top menu. You will need to register, but once that is completed you can use the forum there to request any help you need.