Forums / Cotonti / Extensions / Support / Autotab - create tabs on my pages where I want them

Reworking the autotoc extension

foxhound
#37581 2013-06-18 20:27

I am trying to make tabs to be added to my pages automatically. For this I am using the autotoc extension which I am trying to rework to do this.
I have no idea if what I am trying actually works but before I can find that out I have tix an error which I am not sure how to do.

Here is the html to create the tabs

XML/XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!-- *************** - Tabs Container - *************** -->  
<div class="tabs-1 newssel">
    <ul class="tabs-nav clearfix">
        <li><a href="#tab1">ALL</a></li>
        <li><a href="#tab2">ARMA 3</a>
            <ul>
                <li><a href="#tab2_1" title="Show only general Arma 3 news">General news</a></li>
                <li><a href="#tab2_2" title="Show only general Arma 3 news">Mods & Addons news</a></li>
                <li><a href="#tab2_3" title="Show only general Arma 3 news">Tools news</a></li>
            </ul>
        </li>
        <li><a href="#tab3">ARMA 2: OA / CO</a>
            <ul>
                <li><a href="index.php?c=news_arma2" title="Show only general Arma 3 news">General news</a></li>
            </ul>
        </li>
        <li><a href="#tab4">ARMA 2</a></li>
        <li><a href="#tab5">ARMA</a></li>
        <li><a href="#tab6">BI</a></li>
        <li><a href="#tab7">COMMUNITY</a></li>
        <li><a href="#tab8">WEBSITE</a></li>
    </ul><!--/ .tabs-nav -->
 
    <div class="tabs-container">
        <div class="tab-content" id="tab1">
            <div class="gamelist">
                {INDEX_NEWS}
            </div><!--/ .gamelist-->
        </div><!--/ #tab1-->
        <div class="tab-content" id="tab2">
            <div class="gamelist">
                {INDEX_NEWS_NEWS_ARMA3}
            </div><!--/ .gamelist-->
        </div><!--/ #tab2-->
        <div class="tab-content" id="tab2_1">
            <div class="gamelist">
                {INDEX_NEWS_NEWS_ARMA3_GENERAL}
            </div><!--/ .gamelist-->
        </div><!--/ #tab2_1-->
        <div class="tab-content" id="tab2_2">
            <div class="gamelist">
                {INDEX_NEWS_NEWS_ARMA3_MODS}
            </div><!--/ .gamelist-->
        </div><!--/ #tab2_2-->
        <div class="tab-content" id="tab2_3">
            <div class="gamelist">
                {INDEX_NEWS_NEWS_ARMA3_TOOLS}
            </div><!--/ .gamelist-->
        </div><!--/ #tab2_3-->
        <div class="tab-content" id="tab3">
            <div class="gamelist">
                {INDEX_NEWS_NEWS_ARMA2OA}
            </div><!--/ .gamelist-->
        </div><!--/ #tab3-->
        <div class="tab-content" id="tab4">
            <div class="gamelist">
                {INDEX_NEWS_NEWS_ARMA2}
            </div><!--/ .gamelist-->
        </div><!--/ #tab4-->
        <div class="tab-content" id="tab5">
            <div class="gamelist">
                {INDEX_NEWS_NEWS_ARMA}
            </div><!--/ .gamelist-->
        </div><!--/ #tab5-->
    </div><!--/ .tabs-container-->
</div><!--/ .tabs-1-->
<!-- *************** - END Tabs Container - *************** -->

In autotoc.page.tags.php I added the following:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function buildTOC(&$text, $chapters, $parents = '')
{
    global $chapters_elem;
    $i=0;
    $toc = '<div class="tabs-1"><ul class="tabs-nav clearfix">';
    foreach($chapters as $chapter_raw => $subchapters)
    {
        $chapter = strip_tags(trim($chapter_raw));
        $i++;
        $elem = $chapters_elem[$chapter_raw];
        $level = $parents.$i;
        $url = $_SERVER["REQUEST_URI"] . "#ch$level";
        $toc .= "<li><a href=\"$url\" title=\"$chapter\">$level. $chapter</a>";
        $text = str_replace("<$elem>$chapter_raw</$elem>", "<div class=\"tabs-container\"><div class=\"tab-content\" id=\"ch$level\"><div class=\"gamelist\"><$elem>$level. $chapter</$elem>", $text);
        if (count($subchapters) > 0)
        {
            $toc .= buildTOC($text, $subchapters, $level.'.');
        }
        $toc .= '</li>';
    }
    $toc .= '</ul>';
    return $toc;
}

I still need to close 3 divs and i think they should be closed after

PHP
1
$elem>$level. $chapter</$elem>", $text

 

So I tried:

PHP
1
<$elem>$level. $chapter</$elem>", $text , "</div></div></div>"

and some other combinations but none will work. So here I am again hoping someone can help me with this!

 

** Sighhhh..... I do so much hate this editor, I can not make a single proper post and I have no idea why its always completely screwed up.........fixing fixed ......

Added 2 days later:

Ok, I think I got most to work except one part.
I create the tabs with an h2 tag, if it sees that tag it creates a tab button linking to tab 1 (anchor) and increments with every new h2 tag (so every new h2 is a new tab with correct anhor).

But now where I am stuck.......
The text which should show when clicking on tab 1 is between a h3 tag. The text which should show when clicking tab 2 is betwee the next h3 tag.
And that is what I can not solve.....
I do not know how to change the plugin so it only shows that particular text when clicking a specific tab.

Right now the plugin shows all text when you open the page (and the tabs) and when you click a tab all text is gone.

I really would appreciate some help with this, if I could get this to work it might even be a nice addition to the download section? (I wont take any credit for it since it uses the autotoc plugin as base).


In the meantime I got all this to work with the bbcode editor, so unless I get some help I will just have to use bbcode.

<img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />
This post was edited by foxhound (2013-06-20 14:29, 12 years ago)