Search code examples
javascripthtmlcssadminlte

Javascript, toggle-button adding style to element by class

I'm using AdminLTE template.

There is a toggle-sidebar button which do hide and show the sidebar by adding and removing .sidebar-collapse class in the body for each click.

Example:

  • by default, it will be <body class="skin-blue sidebar-mini">
  • when the button clicked once, it will be <body class="skin-blue sidebar-mini sidebar-collapse">
  • when the button clicked again, it will back to <body class="skin-blue sidebar-mini">

Now I want to change the style (margin-left) of <section> with class="content" for each toggle-sidebar clicked.

Example:

  • by default, it will be <body class="skin-blue sidebar-mini"> and <section class="content" style="margin-left:-200px;margin-top:-40px">
  • when the button clicked once, it will be <body class="skin-blue sidebar-mini sidebar-collapse"> and <section class="content" style="margin-left:-380px;margin-top:-40px">
  • when the button clicked again, it will back to <body class="skin-blue sidebar-mini">and <section class="content" style="margin-left:-200px;margin-top:-40px">

the code:

$.AdminLTE.pushMenu = {
    activate: function(a) {
        var b = $.AdminLTE.options.screenSizes;
        $(document).on("click", a, function(a) {
            a.preventDefault(), $(window).width() > b.sm - 1 ? $("body").hasClass("sidebar-collapse") ? $("body").removeClass("sidebar-collapse").trigger("expanded.pushMenu") : $("body").addClass("sidebar-collapse").trigger("collapsed.pushMenu") : $("body").hasClass("sidebar-open") ? $("body").removeClass("sidebar-open").removeClass("sidebar-collapse").trigger("collapsed.pushMenu") : $("body").addClass("sidebar-open").trigger("expanded.pushMenu")
        }), $(".content-wrapper").click(function() {
            $(window).width() <= b.sm - 1 && $("body").hasClass("sidebar-open") && $("body").removeClass("sidebar-open")
        }), ($.AdminLTE.options.sidebarExpandOnHover || $("body").hasClass("fixed") && $("body").hasClass("sidebar-mini")) && this.expandOnHover()
    },
    expandOnHover: function() {
        var a = this,
            b = $.AdminLTE.options.screenSizes.sm - 1;
        $(".main-sidebar").hover(function() {
            $("body").hasClass("sidebar-mini") && $("body").hasClass("sidebar-collapse") && $(window).width() > b && a.expand()
        }, function() {
            $("body").hasClass("sidebar-mini") && $("body").hasClass("sidebar-expanded-on-hover") && $(window).width() > b && a.collapse()
        })
    },
    expand: function() {
        $("body").removeClass("sidebar-collapse").addClass("sidebar-expanded-on-hover")
    },
    collapse: function() {
        $("body").hasClass("sidebar-expanded-on-hover") && $("body").removeClass("sidebar-expanded-on-hover").addClass("sidebar-collapse")
    }
}

Please tell me if my question is confusing. I honestly don't understand the code, all the code above is provided by AdminLTE

Solution

  • You should use css for your styling. That way you don't need to modify any of your javascript code.

    /* Sidebar open state */
.content {
   margin-left: -200px;
   margin-top: -40px;
}

/* Sidebar collapsed state */
.sidebar-collapse .content {
   margin-left: -380px;
}

    The code above is the answer to the original question. The following code is what you need to do what you actually want it to do.

    /* Sidebar open state */
.content {
   left: 400px;
   position: absolute;
}

/* Sidebar collapsed state */
.sidebar-collapse .content {
   left: 250px;
}

    There are other possible solutions, but the main reason that margin-left doesn't work is because you have items absolutely positioned inside the section. Since they are absolutely positioned, they won't respect margin/padding.