MyBB Central
[TEMPLATE EDIT] jQuery sliding sidebar for MyBB! - Printable Version

+- MyBB Central (http://www.mybbcentral.com)
+-- Forum: Archives (http://www.mybbcentral.com/forum-33.html)
+--- Forum: Mybb 1.4x Series Topics (http://www.mybbcentral.com/forum-26.html)
+---- Forum: Mybb 1.4x Theme and Template Releases (http://www.mybbcentral.com/forum-5.html)
+---- Thread: [TEMPLATE EDIT] jQuery sliding sidebar for MyBB! (/thread-5265.html)

Pages: 1 2


[TEMPLATE EDIT] jQuery sliding sidebar for MyBB! - euantor - Jul 07, 2010

Wishing you could have a sliding JQuery sidebar for MyBB just like ion IPB3 or vB4? Well, now you can with this super simple template edit!

We're going to be editing the index template, but you're first going to need to upload these two image files to your /images/ folder for MyBB.

[Image: arrowright.png] [Image: arrowleft.png]

Now, open the Index template and replace the whole thing with the following (unless you have plugins installed which edit the index template - in which case you'll have to add their stuff to it afterwards or just make careful edits.

PHP Code:
<html>
<
head>
<
title>{$mybb->settings['bbname']}</title>
{
$headerinclude}
<
script type="text/javascript">
<!--
    
lang.no_new_posts "{$lang->no_new_posts}";
    
lang.click_mark_read "{$lang->click_mark_read}";
// -->
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<style type="text/css">
.buttons {
    background: url(images/arrowleft.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}

.clickedbuttons {
    background: url(images/arrowright.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}
</style>
</head>
<body>
{$header}
<div style="float: right;">
<a id="button" class="buttons"></a>
</div>
<table>
<tr>
<td width="100%;" valign="top">
{$forums}
</td>
    <script type="text/javascript">
jQuery.noConflict();
    jQuery(function() {
        //run the currently selected effect
        function runEffect(){
            //get effect type from 
            var selectedEffect = 'slide';
            
            //most effect types need no options passed by default
            var options = {};
            //check if it's scale or size - they need options explicitly set
            if(selectedEffect == 'scale'){  options = {percent: 0}; }
            else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
            
            //run the effect
            jQuery("#effect").toggle(selectedEffect,options,500);

        };
        
        //set effect from select menu value
        jQuery("#button").click(function() {
            jQuery(this).toggleClass("clickedbuttons")
            runEffect();
            return false;
        });

    });
    </script>
<td valign="top">
<div id="effect" class="ui-widget-content ui-corner-all">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" width="240">
<tr>
<td class="thead">
<strong>Search</strong>
</td>
</tr>
<tr>
<td class="trow1">
<form method="post" 
action="{$mybb->settings['bburl']}/search.php">

<input type="hidden" name="action" value="do_search" />

<input type="hidden" name="postthread" value="1" />

<input type="hidden" name="forums" value="all" />

<input type="hidden" name="showresults" value="threads" />

<input type="text" class="textbox" name="keywords" value="" />

<!-- start: gobutton -->

<input type="submit" class="button" value="Go" />

<!-- end: gobutton -->

</form>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>


{$boardstats}

<dl class="forum_legend smalltext">
    <dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
    <dd>{$lang->new_posts}</dd>

    <dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
    <dd>{$lang->no_new_posts}</dd>

    <dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
    <dd>{$lang->forum_locked}</dd>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html> 


Simple eh? You now have a sliding sidebar which is toggled with a small graphic button. There are no conflicts with prototype or anything, so enjoy!

Here's a quick screenshot of the closed sidebar next to the open one. Lovely eh? You can always add more to it too Smile

[Image: sidebar.png]


RE: [TEMPLATE EDIT] jQuery sliding sidebar for MyBB! - Elite Dash - Jul 07, 2010

Saw this on MyBB.com , great tutorial dude Big Grin


RE: [TEMPLATE EDIT] jQuery sliding sidebar for MyBB! - euantor - Jul 07, 2010

;D Posting it around for all lmao


RE: [TEMPLATE EDIT] jQuery sliding sidebar for MyBB! - 88power88 - Jul 07, 2010

What does it do in short i don't have real time to read it all?


RE: [TEMPLATE EDIT] jQuery sliding sidebar for MyBB! - euantor - Jul 07, 2010

Go to http://www.mypurebb.com/index.php and click the button next to the sidebar.


RE: [TEMPLATE EDIT] jQuery sliding sidebar for MyBB! - 88power88 - Jul 07, 2010

Oh shit thats cool! Smile
Might use this in future ty!


RE: [TEMPLATE EDIT] jQuery sliding sidebar for MyBB! - MasterZuFu - Jul 22, 2010

How do you do this with the my side boxes plugin?


RE: [TEMPLATE EDIT] jQuery sliding sidebar for MyBB! - euantor - Jul 23, 2010

Not sure as I don't have that plugin and my subscriber ran out D: You could always enclose the {$sideboxes} (or whatever labrocca named it) within the sliding div and it would work. If you give me a copy of your FORUMHOME template, I'll take a look :3


RE: [TEMPLATE EDIT] jQuery sliding sidebar for MyBB! - MasterZuFu - Jul 23, 2010

Yeah, I'll pm you the code


RE: [TEMPLATE EDIT] jQuery sliding sidebar for MyBB! - Gpizzle - Aug 14, 2010

were would i had this code?


<script type="text/javascript">
$.noConflict();
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();

});
});
</script>
<table border="0" width="100%" class="tborder" cellpadding="4" cellspacing="0" style="margin-bottom: 3px;">
<tr align="center">
<td class=" tab" title="News &amp; Feedback" style="cursor: pointer;" rel="cat_3">News &amp; Feedback</td>
<td class=" tab" title="PacketPunks VIP lounge" style="cursor: pointer;" rel="cat_54">VIP</td>
<td class=" tab" title="General Topics" style="cursor: pointer;" rel="cat_4">General</td>
<td class="tab" title="Hacking" style="cursor: pointer;" rel="cat_11">Hacking</td>
<td class=" tab" title="Programming" style="cursor: pointer;" rel="cat_9">Programming</td>
<td class=" tab" title="Graphics" style="cursor: pointer;" rel="cat_39">Graphics</td>
<td class=" tab" title="Gaming " style="cursor: pointer;" rel="cat_12">Gaming</td>
<td class=" tab" title="Computing" style="cursor: pointer;" rel="cat_8">Computing</td>
<td class=" tab" title="Market place" style="cursor: pointer;" rel="cat_60">Market</td>
</tr>
</table>
hmm its kind of broken man Sad the box dont slide