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


RE: [Tutorial] jQuery collapsible sidebar - magicm00n - 2013-08-05

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?


RE: [Tutorial] jQuery collapsible sidebar - dthiago - 2013-10-25

(2013-08-05, 06:17 PM)magicm00n Wrote: 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


RE: [Tutorial] jQuery collapsible sidebar - singleboy - 2014-11-05

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


RE: [Tutorial] jQuery collapsible sidebar - Adriano - 2014-11-05

(2014-11-05, 03:31 PM)singleboy Wrote: 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.


RE: [Tutorial] jQuery collapsible sidebar - Kylin - 2015-01-04

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}



RE: [Tutorial] jQuery collapsible sidebar - Leefish - 2015-01-04

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


RE: [Tutorial] jQuery collapsible sidebar - Kylin - 2015-01-04

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

Thanks~


RE: [Tutorial] jQuery collapsible sidebar - Starnova - 2015-07-24

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


RE: [Tutorial] jQuery collapsible sidebar - melancholia - 2015-08-30

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  Sad

Is there a way to work to fix that?


RE: [Tutorial] jQuery collapsible sidebar - m0ckingbird - 2016-01-23

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.

Smile