MyBB Source
Sliding JQuery sidebar for mybb! - Printable Version

+- MyBB Source (http://mybbsource.com)
+-- Forum: Customization (/forum-9.html)
+--- Forum: Tutorials (/forum-40.html)
+--- Thread: Sliding JQuery sidebar for mybb! (/thread-4150.html)

Pages: 1 2 3

Sliding JQuery sidebar for mybb! - euantor - 07-07-2010 06:22 PM

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 tot he open one. Lovely eh? You can always add more to it too 001_smile

[Image: sidebar.png]

RE: Sliding JQuery sidebar for mybb! - Mikers - 07-07-2010 07:36 PM

Good looking script, gent. Simple and beautiful. And jQuery. Can rarely go wrong with jQuery. Big Grin

Good tut, thanks for adding it. 001_smile

RE: Sliding JQuery sidebar for mybb! - euantor - 07-07-2010 10:03 PM

No problem 001_smile The button looks awful, but you guys can easily make your own to fit with your themes =P

RE: Sliding JQuery sidebar for mybb! - groovybluedog - 08-09-2010 10:45 AM

How can i make more bars on the sidebar that are empty, That i can place my own php and html codes in?

RE: Sliding JQuery sidebar for mybb! - Don+ - 08-21-2010 10:09 AM

Great guide. I might follow your points.

RE: Sliding JQuery sidebar for mybb! - euantor - 08-22-2010 05:00 AM

(08-09-2010 10:45 AM)groovybluedog Wrote:  How can i make more bars on the sidebar that are empty, That i can place my own php and html codes in?

Just add more divs with the content you want to add Big Grin

(08-21-2010 10:09 AM)Don+ Wrote:  Great guide. I might follow your points.

Thanks ^^

RE: Sliding JQuery sidebar for mybb! - iamthehero - 12-05-2010 05:21 AM

i will try this out Big Grin

RE: Sliding JQuery sidebar for mybb! - euantor - 12-05-2010 06:11 AM

Enjoy Tongue

RE: Sliding JQuery sidebar for mybb! - flamehosts - 12-06-2010 02:50 AM

Very nice TUT

RE: Sliding JQuery sidebar for mybb! - Ryan - 12-06-2010 04:45 AM

Excellent tutorial i must try this sometime