MyBB Community Forums

Full Version: [Tutorial] jQuery collapsible sidebar
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13
need help to get latest posts/threads from a certain forum(s) into the side bar. How to add custom styling to the sidebar, so that its background colors and text font is different from forum default.
How we can make it compatible with 1.6. I like it so much. please tell me a demo in 1.6 too.
Works perfectly in 1.6
Demo (pt-BR) http://www.clubedosonic.com.br/forum/index.php
Window on the right "Classificados"
Site still in development.
Installed and changed for "right to left" forum.
http://forums.svus.ir/
How can I set it to expand as default? [Solved]

Where can I found scripts for the following items:
- Inserting latest threads in side bar,
- Inserting rss feeds from main website or some other websites in sidebar
- Inserting a google custom search box or inserting this plugin in a box in sidebar:
www.mybbextras.net/showthread.php?tid=1463

How can I this sidebar sliding, I mean when I scroll down it's position doesn't change and always be visible.
New Problem:
Footer comes under sliding box!!
http://forums.svus.ir
How can I fix this?!

Update. I solved by changing:
Change
{$footer}

to:

<div>
{$footer}
</div>
This is currently up and running on my website located; http://www.diabolicgaming.com/index.php

If you need help feel free to PM me, I'll be glad to help.
(2012-05-13, 08:24 PM)koz Wrote: [ -> ]This is currently up and running on my website located; http://www.diabolicgaming.com/index.php

If you need help feel free to PM me, I'll be glad to help.

Thanks. Footer problem solved and it doesn't need <div> tags. It was my fault in other place.

I'm also looking for sample codes for boxes that I mentioned in 2 previous posts. How to show RSS feeds, Latest threats and etc
Thank you for this. Really useful Big Grin
Thanks for this tutorial.


Hey guys i decided to try and learn jquery this is my first jquery i have ever done.Here is a quick change of code from the OP to allow you to have 2 collapsible sidebars on the pro_portal page

Here is my pro_portal template (global > pro_portal)
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
</head>
<body>
{$header}
<a class="buttons" style="float: right;"></a>
<a class="clickedbuttons" style="float: right;"></a>
<a class="buttons1" style="float: left;"></a>
<a class="clickedbuttons1" style="float: left;"></a>
<br />
<div class="sidebar" style="float: right;width: 255px;">
{$rightblocks}
</div>
<div class="sidebar1" style="float: left;width: 160px;">
{$leftblocks}
</div>
<div class="forums" style="overflow:hidden;">
{$centerblocks}
</div>
{$footer}
</body>
</html>

As you can see it has 2 sidebars 1 which is 160px (Left) and 1 which is 255px (Right). the most important bit of code here is the "overflow:hidden;" as without this everything with overlap and look horrible.

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;
}

.buttons1 {
    background: url(images/arrowleft.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}

.clickedbuttons1 {
    background: url(images/arrowright.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}

and here is the javascript

jQuery(function($) {

    $(".clickedbuttons1").hide();
    $(".clickedbuttons").hide();
	
	if($.cookie("sidebar1") == "collapsed") {
        $(".buttons1").hide();
        $(".clickedbuttons1").show();
        $(".sidebar1").hide();
    };
	if($.cookie("sidebar") == "collapsed") {
        $(".buttons").hide();
        $(".clickedbuttons").show();
        $(".sidebar").hide();
    };
	
	
    $(".buttons1").click(function() {
        $(".sidebar1").animate({height: "hide", opacity: 0}, 300);
        $(this).hide();
        $(".clickedbuttons1").show();
        $.cookie("sidebar1","collapsed", {expires: 365});
        return false;
    });
    $(".clickedbuttons1").click(function() {
        $(".sidebar1").animate({height: "show", opacity: 1}, 300);
        $(this).hide();
        $(".buttons1").show();
        $.cookie("sidebar1","expanded", {expires: 365});
        return false;
    });

    $(".buttons").click(function() {
        $(".sidebar").animate({height: "hide", opacity: 0}, 500);
        $(this).hide();
        $(".clickedbuttons").show();
        $.cookie("sidebar","collapsed", {expires: 365});
        return false;
    });
    $(".clickedbuttons").click(function() {
        $(".sidebar").animate({height: "show", opacity: 1}, 500);
        $(this).hide();
        $(".buttons").show();
        $.cookie("sidebar","expanded", {expires: 365});
        return false;
    });
});

this will add 2 collapsible sidebars to the pro_portal page (make sure pro portal is set to show both sidebars.)

Here is a screenshot: http://i.imgur.com/2ktJl.png - Demo: http://bit.ly/w5cloJ

Also i would like to explain that although i am unsure if my code is better or not or the same, my code doesnt have the glitch where when you press the hide/show button after each other really quick it moves the sidebar ontop of the forum or viceversa. not sure why (i only changed the code to make it work for what i wanted).
no one helped
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13