Tabbed Boards

[Alanna 🥀🖤]

trinityblair-test.boards.net/
So I am attempting this for a request and this is what I have so far within the Board List layout template:

<script>
   $(document).ready(function() {
       if($(this).hasClass('inactive')){
           $('#tabs$[board.category_id] a').addClass('inactive');
           $(this).removeClass('inactive');
           $('.tabcontainer$[board.category_id]').hide();
           $(t).fadeIn('slow');
       }
       $('#tabs$[board.category_id] a:not(:first)').addClass('inactive');
       $('.tabcontainer$[board.category_id]:not(:first)').hide();
       $('#tabs$[board.category_id] a').click(function(){
           var t = $(this).attr('href');
           $('#tabs$[board.category_id] a').addClass('inactive');
           $(this).removeClass('inactive');
           $('.tabcontainer$[board.category_id]').hide();
           $(t).fadeIn('slow');
           return false;
       })
   });
</script>
<table width="100%">
   <tr>
       <td id="tabs$[board.category_id]">
           {foreach $[board]}
           <a href="$[board.content_id]">$[board.name]</a>
           {/foreach}
       </td>
       <td>
           {foreach $[board]}
           <div class="tabcontainer$[board.category_id]" id="$[board.content_id]">
               {if $[board.posts] > 0}
               {if $[board.last_thread]}
               $[board.last_thread.recent_link]<br />
               by $[board.last_thread.last_post.created_by]<br />
               <span class="date">$[board.last_thread.last_post.created_on]</span>
               {/if}
               {else}
               No posts have been made on this board.
               {/if}
           </div>
           {/foreach}
       </td>
   </tr>
</table>

<style>
   #tabs$[board.category_id] {
       width: 30%;
   }
   #tabs$[board.category_id] a {
       display: block;
       background: #e6e6e6;
       padding: 10px;
       text-align: left;
       text-transform: uppercase;
       font-size: 10px;
   }
   #tabs$[board.category_id] a.inactive{
       color: #666666;
       background-color: #f1f1f1;
   }
   #tabs$[board.category_id] a:hover, #tabs a.inactive:hover {
       color: #000000;
   }
   .tabcontainer$[board.category_id] {
       padding: 10px;
       background-color: #fff;
       text-align: left;
   }
</style>

It works up until you try to click on a different board tab. I believe I need to different the boards and within each category using the board and category id's, however I'm not sure how other than I already have. Ideas?

Brian , Scott , Tumbleweed , Craig

[Brian]

Most of this first section doesn't seem to do anything since $(this) is targeting the document in this case and is thus rendering the if statement false since the document itself can never have a class.

if($(this).hasClass('inactive')){
    $('#tabs$[board.category_id] a').addClass('inactive');
    $(this).removeClass('inactive');
    $('.tabcontainer$[board.category_id]').hide();
    $(t).fadeIn('slow');
}

In the section after that $(t) would be targeting $('board-123') which wouldn't match any elements since it would be looking for an HTML tag by that name. If you target $('#'+t) it should match the IDs of the divs containing your board information.

Lastly, $[board.category_id] always renders the same number unless placed inside of a {foreach $[board]} loop so each time this script is running it's outputting the same category number.



Here's a version I've got working on my test forum. This goes before the closing </head> tag in Themes > Layout Templates > Forum Wrapper (since the Javascript only needs to be run once and the CSS only needs to be added once per page).

SPOILER: Click to show

<script type="text/javascript">
    $(document).ready(function(){
        $('.container.boards .tabs a').on('click',function(){
            var t = $(this).attr('href');
            $(this).parents('.tabs').find('a').addClass('inactive');
            $(this).removeClass('inactive');
            $(this).parents('.boards').find('.tabcontainer').stop(true,true).hide();
            $('#'+t).fadeIn('slow');
            return false;
        });
    });
</script>

<style>
    .boards .tabs {
        width: 30%;
    }
    .boards .tabs a {
        display: block;
        background: #e6e6e6;
        padding: 10px;
        text-align: left;
        text-transform: uppercase;
        font-size: 10px;
    }
    .boards .tabs a.inactive{
        color: #666666;
        background-color: #f1f1f1;
    }
    .boards .tabs a:hover, .boards .tabs a.inactive:hover {
        color: #000000;
    }
    .boards .tabcontainer {
        padding: 10px;
        background-color: #fff;
        text-align: left;
    }
</style>

And this is all that makes up the contents of Themes > Layout Templates > Board > Board List:

SPOILER: Click to show

<table width="100%">
    <tr>
        <td class="tabs">
            {foreach $[board]}
             <a href="$[board.content_id]"{if $[board.index] != 0} class="inactive"{/if}>$[board.name]</a>
            {/foreach}
        </td>
        <td>
            {foreach $[board]}
                <div class="tabcontainer" id="$[board.content_id]"{if $[board.index] != 0} style="display: none;"{/if}>
                    {if $[board.posts] > 0}
                        {if $[board.last_thread]}
                            $[board.last_thread.recent_link]<br />
                            by $[board.last_thread.last_post.created_by]<br />
                            <span class="date">$[board.last_thread.last_post.created_on]</span>
                        {/if}
                    {else}
                     No posts have been made on this board.
                    {/if}
                </div>
            {/foreach}
        </td>
    </tr>
</table>

[Alanna 🥀🖤]

Once again I am reminded that I need to practice on JavaScript... can't wait till I get to that in college. (just started college for a Web-Design and Development bachelors)

Anyways, thank you! The script I had was a basic tabbed script found via online tutorials and tried my best to get it to work, but alas without any knowledge of how scripts really work- yeah.

[Brian]

I took a class for Javascript at community college a little after I got out of high school. It gave me the push I needed to finally comprehend everything I couldn't wrap my head around, so I can vouch for classes definitely being something that'll help you along immensely in the long run.

If there's anything you need to know about Javascript before then that you can't find online the users who frequent the Plugin Development board are also extremely helpful, and you get the added benefit of getting help from people who are familiar with not only the language but the software.