MyBB Community Forums
[Tutorial] jQuery collapsible sidebar - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [Tutorial] jQuery collapsible sidebar (/thread-73062.html)

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13


[Tutorial] jQuery collapsible sidebar - Joshee - 2010-07-07

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!



RE: [Tutorial] jQuery collapsible sidebar - faviouz - 2010-07-07

Oh god.

/geekgasm

AWESOME


RE: [Tutorial] jQuery collapsible sidebar - Joshee - 2010-07-07

If you put it on your site please post a link and I will add it to the OP for a demo Smile


RE: [Tutorial] jQuery collapsible sidebar - NBKTwitch - 2010-07-08

Nice tutorial,but isn't this in the wrong section Toungue?


RE: [Tutorial] jQuery collapsible sidebar - JonathanP - 2010-07-08

They go here and a mod will move into the right forum.


RE: [Tutorial] jQuery collapsible sidebar - Winford F. - 2010-07-08

Nice tutorial.

They need a better way of submitting tutorials. Big Grin


RE: [Tutorial] jQuery collapsible sidebar - darkly - 2010-07-08

Just added it to my site. :p

http://dark-design.tk Wink


RE: [Tutorial] jQuery collapsible sidebar - Matt - 2010-07-08

(2010-07-08, 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.


RE: [Tutorial] jQuery collapsible sidebar - Joshee - 2010-07-08

Thanks everyone, and @darkly I added your link to the OP as a demo Smile


RE: [Tutorial] jQuery collapsible sidebar - Euan T - 2010-07-08

Nice Big Grin It certainly is much nicer and far more smooth than my method, so good job!