[Docs] Making a Tabbed Sidebar Posts Box

NOTE: This tutorial uses deprecated code. Please read and try "Making Custom Widgets" instead. After that, you might be able to get some hints below about how to put them under tabs.

Creating a custom box with tabs

This is where the fun really begins! First, let's take a look at what we're going to make:



That box shows on all pages and when the tabs are clicked, the posts change to match the name of the tab. Here's how to do it:

Getting set up

Disclaimer: I'm a bit crap with CSS and JavaScript. If you can help improve this tutorial please reply with your proposed changes.

1. Go to Admin->Sidebar Widgets and disable the Sidebar Posts Top andSidebar Posts Latest widgets. We'll put them in our custom box instead.

2. Make a Text Widget containing this code (check the PHP box):

PHP:

$this->hotaru->displayTemplate('widget_name');

3. In your themes folder (/content/themes/YOUR_THEME/), create an empty widget_name.php file and copy the code below into it.

[/PHP]

Code:

<?php
/**
 * Template for Widget Name sidebar posts tabbed box
 */
 
$sbp = new SidebarPosts('sidebar_posts', $hotaru);  // provides access to SidebarPosts functions

$top_posts = $sbp->getSidebarPosts('top'); // array of top stories
$new_posts =  $sbp->getSidebarPosts('new'); // array of latest stories

$top_title = $hotaru->lang['sidebar_posts_top_posts'];  // "Top Stories"
$new_title = $hotaru->lang['sidebar_posts_latest_posts']; // "Latest Stories"

?>

<div class='sidebar_widget_body'>
   
    <!-- LEFT TAB -->
    <div class="panel_header" id="stories_top_header" <?php if ($hotaru->title == 'latest') { echo 'style=""'; } else { echo 'style="display:none;"'; } ?>>
        <?php echo $top_title; ?>
    </div>
    
    <div class="panel_header_off" id="stories_top_header_off" <?php if ($hotaru->title == 'latest') { echo 'style="display:none;"'; } else { echo 'style=""'; } ?>>
        <a id='stories_top_off' href="#"><?php echo $top_title; ?></a>
    </div>
    
    <div class="panel_spacer">&nbsp;</div>

    <!-- RIGHT TAB -->    
    <div class="panel_header" id="stories_new_header" <?php if ($hotaru->title == 'latest') { echo 'style="display:none;"'; } else { echo 'style=""'; } ?>>
        <?php echo $new_title; ?>
    </div>
    
    <div class="panel_header_off" id="stories_new_header_off" <?php if ($hotaru->title == 'latest') { echo 'style=""'; } else { echo 'style="display:none;"'; } ?>>
        <a id='stories_new_off' href="#"><?php echo $new_title; ?></a>
    </div>
    
    <div class='panel_clear'></div>
    
    <!-- BOX CONTENT -->
    <div class="panel_content" id="stories_new" <?php if ($hotaru->title == 'latest') { echo 'style="display:none;"'; } else { echo 'style=""'; } ?>>
        <ul class='sidebar_posts_items'>
            <?php echo $sbp->getSidebarPostItems($new_posts, 'new'); ?>
        </ul>
    </div>
    
    <div class="panel_content" id="stories_top" <?php if ($hotaru->title == 'latest') { echo 'style=""'; } else { echo 'style="display:none;"'; } ?>>
        <ul class='sidebar_posts_items'>
            <?php echo $sbp->getSidebarPostItems($top_posts, 'top'); ?>
        </ul>
    </div>
</div>

The CSS

Add the following to your main style.css file in /content/themes/YOUR_THEME/css/

Code:

/* SIDEBAR BOX */

.panel_header {
    padding: 0.4em 0 0.4em 0;
    float: left;
    width: 134px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    background-color: #F8F8F8;
}

.panel_header_off {
    float: left;
    width: 134px;
    background-color: #E5E5E5;
}

.panel_header_off a {
    display: block;
    padding: 0.4em 0 0.4em 0;
    text-align: center;
    font-size: 1.1em;
}

.panel_header_off a:hover {
    background-color: #E5E5E5;
    color: #F1A02A;
}

.panel_spacer {
    background-color: #FFFFFF;
    width: 6px;
    float: left;
}

.panel_clear { clear: both; width: 274px; margin: 0; padding: 0; height: 1px; overflow: hidden; background-color: #F8F8F8; }

.panel_content {
    background-color: #F8F8F8;
    width: 274px;
}

.panel_content ul { padding: 0.4em; }

The jQuery

If you don't already have one, create a new folder called javascript in /content/themes/YOUR_THEME/

With a text editor, make new file and save it as myjquery.js (or other name of your choice). Open that file and paste the following into it:

Code:

$(document).ready(function(){
        
    // Switch sidebar stories box
    $("#stories_new_off").click(function () {
    
        // disable top tab
        var target_top_tab_off = $(this).parents('div.sidebar_widget_body').children('div#stories_top_header');
        var target_top_tab_on = $(this).parents('div.sidebar_widget_body').children('div#stories_top_header_off');
                target_top_tab_off.hide();
                target_top_tab_on.show();
                
                // enable latest tab
        var target_latest_tab_on = $(this).parents('div.sidebar_widget_body').children('div#stories_new_header');
        var target_latest_tab_off = $(this).parents('div.sidebar_widget_body').children('div#stories_new_header_off');
                target_latest_tab_off.hide();
                target_latest_tab_on.show();
                
                // switch content
        var target_content_show = $(this).parents('div.sidebar_widget_body').children('div#stories_new');
        var target_content_hide = $(this).parents('div.sidebar_widget_body').children('div#stories_top');
                target_content_hide.hide();
                target_content_show.show();

                return false;
        }); 
        
    // Switch sidebar stories box
    $("#stories_top_off").click(function () {
    
        // disable latest tab
        var target_latest_tab_on = $(this).parents('div.sidebar_widget_body').children('div#stories_new_header');
        var target_latest_tab_off = $(this).parents('div.sidebar_widget_body').children('div#stories_new_header_off');
                target_latest_tab_on.hide();
                target_latest_tab_off.show();
                
                // enable top tab
        var target_top_tab_off = $(this).parents('div.sidebar_widget_body').children('div#stories_top_header_off');
        var target_top_tab_on = $(this).parents('div.sidebar_widget_body').children('div#stories_top_header');
                target_top_tab_off.hide();
                target_top_tab_on.show();
        
        // switch content
        var target_content_show = $(this).parents('div.sidebar_widget_body').children('div#stories_top');
        var target_content_hide = $(this).parents('div.sidebar_widget_body').children('div#stories_new');
                target_content_hide.hide();
                target_content_show.show();
                
                return false;
        });   
});

Including the JavaScript

Finally, we need to include that JavaScript file we just made, so open /content/themes/YOUR_THEME/header.php and find:

Code:

    <script language="JavaScript" src="<?php echo BASEURL . 'libs/extensions/jQuery/jquery.min.js'; ?>"></script>
    <script language="JavaScript" src="<?php echo BASEURL . 'libs/extensions/jQuery/jquery-ui.min.js'; ?>"></script>
    <script language="JavaScript" src="<?php echo BASEURL . 'javascript/hotaru_ajax.js'; ?>"></script>
    <script language="JavaScript" src="<?php echo BASEURL . 'javascript/hotaru_jquery.js'; ?>"></script>

Below that, add the following, changing "mytheme.js" if necessary:

Code:

    <script language="JavaScript" src="<?php echo BASEURL . 'content/themes/' . THEME . 'javascript/mytheme.js'; ?>"></script>

Save and close.

Before looking at your site. It's a good idea to go to Admin->Maintenance and clear the HTML and css/js caches. Then visit your homepage and do a hard refresh (usually CTRL+F5) to reload the css and JavaScript files. This is what you should see if you've enabled votes the Admin -> Vote Simple settings page.