Animate hidden div horizontally when it uses jquery cookie

Question

I am using a new type of offcanvas technique with bootstrap 3 and jquery cookie. I am using this HTML mockup with following CSS and jquery.

CSS

    body {
        padding-top: 50px;
        overflow: hidden;
    }

    #wrapper {
        min-height: 100%;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0;
        display: inline-block;
    }

    #main-wrapper {
        height: 100%;
        overflow-y: auto;
        padding: 50px 0 0px 0;
        transition: all .5s linear;
        -moz-transition: all .5s linear;
        -webkit-transition: all .5s linear;
        -o-transition: all .5s linear;
    }

    .no-transition {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        -ms-transition: none !important;
        transition: none !important;
    }

    #main {
        position: relative;
        height: 100%;
        overflow-y: auto;
        padding: 0 15px;
    }

    #sidebar-wrapper {
        height: 100%;
        padding: 50px 0 0px 0;
        position: fixed;
        border-right: 1px solid gray;
    }

    #sidebar {
        position: relative;
        height: 100%;
        overflow-y: auto;
        padding: 10px 15px 0;
        overflow-x: hidden;
    }

    .page-header {
        margin-top: 10px;
    }

   /* Media conditions removed intentionally */

JQuery

    $(function () {
        var $menu = $('#sidebar-wrapper');
        var $content = $('#main-wrapper');
        if ($.cookie('offcanvas') == 'hide') {
            $content.addClass('no-transition');
            $menu.hide();
            $content.removeClass('col-md-10').addClass('col-md-12');
        }
        else if ($.cookie('offcanvas') == 'show') {
            $menu.show(500).animate({ left: 0 });
            //  $menu.show();
            $content.removeClass('no-transition');
            $content.removeClass('col-md-12').addClass('col-md-10');
        }
        $('.toggle-button').click(function () {
            $content.removeClass('no-transition');
            if ($menu.is(':visible') && $content.hasClass('col-md-10')) {
                // Slide out
                $menu.animate({
                    left: -($menu.outerWidth() + 10)
                }, function () {
                    $menu.hide(1000);
                });
                $content.removeClass('col-md-10').addClass('col-md-12');
                $.cookie('offcanvas', 'hide');
            }
            else {
                // Slide in
                $menu.show(500).animate({ left: 0 });
                $content.removeClass('col-md-12').addClass('col-md-10');
                $.cookie('offcanvas', 'show');
            }
        });
        $('.bs-tooltip').tooltip();
    });

Please see the fullscreen demo. Clicking on the Cog icon will show and hide the divs with animation, refresh the page will retain the visible or hidden status according to cookie.

All is working fine as expected, however, just collapse the left sidebar, refresh the page, and then click on the cog, the sidebar will not animate from left. Also, the animation will applied to the col-md-10 class, if cookie is hide upon page refresh.

How to fix these issues?

Thanks.

UPDATE

Here is the updated fiddle and fullscreen demo with fixed solution. anyone interested can use this mockup.

http://jsfiddle.net/ravimallya/Y7P7h/6/

http://fiddle.jshell.net/ravimallya/Y7P7h/6/show/

score 1 · Accepted Answer · answered Apr 06 '14 at 06:52

The problem is that when you refresh the page and your cookie 'offcanvas' value is 'hide', you are just hiding the side bar but not setting its css style 'left' value, so left defaults to 0. And when you click the icon to toggle the side bar, you are trying to animate left 0 which is already its value.

To fix the problem, you also need to set css style left value for the side bar (i.e. $menu) when your cookie 'offcanvas' value is 'hide' as follows:

...
if ($.cookie('offcanvas') == 'hide') {
    $content.addClass('no-transition');
    $menu.hide();
    $menu.css('left', -($menu.outerWidth() + 10));
    $content.removeClass('col-md-10').addClass('col-md-12');
}
...

BTW, how can sync animation? i mean the show/hide and replace class method should apply without any delay.. Now, it's not synching at all. — Ravimallya, Apr 06 '14 at 10:13

Animate hidden div horizontally when it uses jquery cookie

1 Answers1