Thread Rating:
  • 15 Vote(s) - 3.93 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tutorial] jQuery collapsible sidebar
#1
There was another thread for something like this, but it wasn't very smooth, and didn't save cookies. So they told me they wanted to see my way. So I threw it together on localhost and now I'm posting it! Smile

It takes one extra edit, and two more files to save to your forum, but I would say it's worth it.

First off, you need to download the attached files and upload them to your forum. The two image go in your forum's images folder. The two javascript files go in your jscripts folder.

After you have downloaded and uploaded those files, you must go to your Admin CP, click the Templates & Style tab, then on the left click Templates, select your theme, expand the Index Templates, and finally, open up index. Replace it all with this.
<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>
<style type="text/css">
.buttons {
    background: url(images/arrowright.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}

.clickedbuttons {
    background: url(images/arrowleft.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}
</style>
</head>
<body>
{$header}
<a class="buttons" style="float: right;"></a>
<a class="clickedbuttons" style="float: right;"></a>
<br class="clear" />
<div class="sidebar" style="float: right;width: 19%;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>
Latest News
</strong></td>
</tr>
<tr>
<td class="trow1">
You can put some news stuff here
</td>
</tr>
</table>
</div>
<div class="forums" style="float: left;width: 80%;">
{$forums}
</div>
<br class="clear" />
{$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>

Save and close.

Now expand the Ungrouped Templates, and open headerinclude.

Find:
{$stylesheets}

Add before:
<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>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar.js"></script>

I'm pretty sure that's all you will need. If you have any problems let me know!


Attached Files Image(s)
       

.js   jquery.cookie.js (Size: 4.36 KB / Downloads: 1,541)
.js   sidebar.js (Size: 998 bytes / Downloads: 1,724)
Reply
#2
Oh god.

/geekgasm

AWESOME
Reply
#3
If you put it on your site please post a link and I will add it to the OP for a demo Smile
Reply
#4
Nice tutorial,but isn't this in the wrong section Toungue?
My Site - Support For My Themes
If you would like a Custom MyBB Theme PM me Smile.
Reply
#5
They go here and a mod will move into the right forum.
Coming soon..
Reply
#6
Nice tutorial.

They need a better way of submitting tutorials. Big Grin
100 Posts - $3.00
PM me for more information.
Reply
#7
Just added it to my site. :p

http://dark-design.tk Wink
Reply
#8
(07-08-2010, 01:22 AM)Winford F. Wrote: They need a better way of submitting tutorials. Big Grin

Can probably just stop this stage now, can't remember the last time a tutorial wasn't actually moved to the tutorial forum.
MyReactions - All Plugins

Can you still feel the butterflies?

Free never tasted like pudding.
Reply
#9
Thanks everyone, and @darkly I added your link to the OP as a demo Smile
Reply
#10
Nice Big Grin It certainly is much nicer and far more smooth than my method, so good job!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)