[Tutorial] jQuery collapsible sidebar

[magicm00n]

Everything seems to be working fine but its not saving cookies. For example I close the sidebar and when I refresh the page the sidebar opens.

Can someone help me please?

[dthiago]

Everything seems to be working fine but its not saving cookies. For example I close the sidebar and when I refresh the page the sidebar opens.

Can someone help me please?

2

[singleboy]

Plz tell me where I have to upload the jquery_cookie.js and sidebar.js files. i have no idea for this plugin

[Adriano]

Plz tell me where I have to upload the jquery_cookie.js and sidebar.js files. i have no idea for this plugin

Upload them to the jscripts folder.

[Kylin]

Prior to adding this, Quick Edit worked fine.

After adding it, it stopped working entirely. Anyone happen to know a fix for this?

Header include template is below:

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<link href='http://fonts.googleapis.com/css?family=Metamorphous' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.js?ver=1800"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.plugins.min.js?ver=1800"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1800"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/dropdownmenu.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1800"></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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.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">
/**
 * Modal Boxes JS
 *
 * @author Euan T. <[email protected]>
 * @version 1.0.0
 */

jQuery(document).ready(function($)
{
    // Make the jQuery modal login redirect you back to the page you're currently on //
    $('#loginModal input[name="url"]').attr("value", window.location);
    // /Login redirect //

    // Modal Boxes //
    $('a[name="modal"]').on('click', function(event)
    {
        event.preventDefault();
        
        var target = $(this).attr('rel');
        
        // Set up the shadowing
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width': maskWidth, 'height': maskHeight});
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow", 0.8);  
        
        // Position the actual modal
        var winH = $(window).height();
        var winW = $(window).width();
        $(target).css('top',  (winH / 10) - ($(target).height() / 10));
        $(target).css('left', (winW / 2) - ($(target).width() / 2));
        $(target).fadeIn(2000); 
    });
    
    $('.modalBox .closeModal').on('click', function(event)
    {
        event.preventDefault();
        $('#mask, .modalBox').hide();
    }); 
    
    $('#mask').on('click', function ()
    {
        $(this).hide();
        $('.modalBox').hide();
    }); 
    // /Modal Boxes //
});
</script>

{$stylesheets}{$highslide_script}
<link rel="stylesheet" href="{$mybb->settings['bburl']}/images/site_icons/avatarep.css" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/images/site_icons/tinybox.js"></script>

<script type="text/javascript">
<!--
      lang.unknown_error = "{$lang->unknown_error}";
    lang.select2_match = "{$lang->select2_match}";
    lang.select2_matches = "{$lang->select2_matches}";
    lang.select2_nomatches = "{$lang->select2_nomatches}";
    lang.select2_inputtooshort_single = "{$lang->select2_inputtooshort_single}";
    lang.select2_inputtooshort_plural = "{$lang->select2_inputtooshort_plural}";
    lang.select2_inputtoolong_single = "{$lang->select2_inputtoolong_single}";
    lang.select2_inputtoolong_plural = "{$lang->select2_inputtoolong_plural}";
    lang.select2_selectiontoobig_single = "{$lang->select2_selectiontoobig_single}";
    lang.select2_selectiontoobig_plural = "{$lang->select2_selectiontoobig_plural}";
    lang.select2_loadmore = "{$lang->select2_loadmore}";
    lang.select2_searching = "{$lang->select2_searching}";
    var cookieDomain = "{$mybb->settings['cookiedomain']}";
    var cookiePath = "{$mybb->settings['cookiepath']}";
    var cookiePrefix = "{$mybb->settings['cookieprefix']}";
    var deleteevent_confirm = "{$lang->deleteevent_confirm}";
    var removeattach_confirm = "{$lang->removeattach_confirm}";
    var loading_text = '{$lang->ajax_loading}';
    var saving_changes = '{$lang->saving_changes}';
    var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
    var my_post_key = "{$mybb->post_code}";
      var rootpath = "{$mybb->settings['bburl']}";
    var imagepath = "{$theme['imgdir']}";
    var yes_confirm = "{$lang->yes}";
    var no_confirm = "{$lang->no}";
    var MyBBEditor = null;
    var spinner_image = "{$theme['imgdir']}/spinner.gif";
    var spinner = "<img src='" + spinner_image +"' alt='' />";
// -->
</script>
{$newpmmsg}

[Leefish]

You have jquery in the header twice - remove this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Check in the sidebar files for jQuery no conflict as well

[Kylin]

Aha! All fixed. Removed above line and also removed line 1 on sidebar.js (no conflict line).

Thanks~

[Starnova]

Wow this is perfect ! Thank you Joshee! It works on 1.8.5 just beautifully

[melancholia]

I'm using the Enhanced Account Switcher (Version 2.0.8 / MyBB 1.8.5) and wanted to include this sidebar as well.. but when I'm including

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.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>

into my headerinclude Template, the Account Switcher isn't working anymore  

Is there a way to work to fix that?

[m0ckingbird]

Hi, nothing special but here is a small addition..

..to everyone who is using this and want the button(s) to be shown on the Index Page only. You can add the following small piece of code to your sidebar.js file:

 if($('.forums').length < 1) {
      $('.cont').hide();
 } 

Make sure that you also put a container around the two buttons, something like this:

<span class="cont"> 
    <a class="buttons" style="float: right;"></a>
    <a class="clickedbuttons" style="float: right;"></a>
</span>

PS: You could also check if "sidebar" or even both exists ofcourse.