?
Solved

Understanding Trigger in Jquery

Posted on 2016-11-16
10
Medium Priority
?
139 Views
Last Modified: 2016-11-21
Hi,

I am using AdminLTE Dashboard Template to build my portal. In the Javascript file I came across the trigger function. Below is the part of the jquery code.

Kindly help me understand how the trigger function works in below code.

$.AdminLTE.pushMenu = {
    activate: function (toggleBtn) {
      //Get the screen sizes
      var screenSizes = $.AdminLTE.options.screenSizes;

      //Enable sidebar toggle
      $(document).on('click', toggleBtn, function (e) {
        e.preventDefault();

        //Enable sidebar push menu
        if ($(window).width() > (screenSizes.sm - 1)) {
          if ($("body").hasClass('sidebar-collapse')) {
            $("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu');
          } else {
            $("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
          }
        }
        //Handle sidebar push menu for small screens
        else {
          if ($("body").hasClass('sidebar-open')) {
            $("body").removeClass('sidebar-open').removeClass('sidebar-collapse').trigger('collapsed.pushMenu');
          } else {
            $("body").addClass('sidebar-open').trigger('expanded.pushMenu');
          }
        }
      });

      $(".content-wrapper").click(function () {
        //Enable hide menu when clicking on the content-wrapper on small screens
        if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
          $("body").removeClass('sidebar-open');
        }
      });

      //Enable expand on hover for sidebar mini
      if ($.AdminLTE.options.sidebarExpandOnHover
        || ($('body').hasClass('fixed')
        && $('body').hasClass('sidebar-mini'))) {
        this.expandOnHover();
      }
    },
    expandOnHover: function () {
      var _this = this;
      var screenWidth = $.AdminLTE.options.screenSizes.sm - 1;
      //Expand sidebar on hover
      $('.main-sidebar').hover(function () {
        if ($('body').hasClass('sidebar-mini')
          && $("body").hasClass('sidebar-collapse')
          && $(window).width() > screenWidth) {
          _this.expand();
        }
      }, function () {
        if ($('body').hasClass('sidebar-mini')
          && $('body').hasClass('sidebar-expanded-on-hover')
          && $(window).width() > screenWidth) {
          _this.collapse();
        }
      });
    },
    expand: function () {
      $("body").removeClass('sidebar-collapse').addClass('sidebar-expanded-on-hover');
    },
    collapse: function () {
      if ($('body').hasClass('sidebar-expanded-on-hover')) {
        $('body').removeClass('sidebar-expanded-on-hover').addClass('sidebar-collapse');
      }
    }
  };

Open in new window


Thanks in advance.
0
Comment
Question by:Vipin Kumar
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
10 Comments
 
LVL 9

Expert Comment

by:James Bilous
ID: 41890550
Triggered is a jQuery function that simply emulates an event taking place. These events are any that you can respond to using jQuery, such as "click", "keydown", or in your case "expanded" and "collapsed.

The code you have posted is using trigger to expand and collapse menus in response to the window being resized. This is because normally a window resize does not trigger these events. They are probably doing this to facilitate the responsiveness of the layout.
0
 
LVL 1

Author Comment

by:Vipin Kumar
ID: 41890555
@James,

Can you please elaborate on this trigger trigger('expanded.pushMenu'). I dont see any where in my code expanded written, what I see only is expand: function (). Then how does it understand expanded.

Thanks in advance.
0
 
LVL 9

Accepted Solution

by:
James Bilous earned 2000 total points
ID: 41890569
Vipin - "expanded" is a custom event that must be consumed elsewhere. It could be part of the core of the AdminLTE framework in some other file, but only something like ".on("expanded.pushMenu"..." will respond to this custom triggered event.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:Vipin Kumar
ID: 41890573
@James,

I have searched all the files, there is no where I find that expanded is defined. That is why I am getting confused.
0
 
LVL 9

Assisted Solution

by:James Bilous
James Bilous earned 2000 total points
ID: 41890578
Vipin - It could very well simply be a hook for people extending or customizing the framework to hook onto. One may, for example, want to update the menu when it is collapsed, or do some other sort of layout modifications.
0
 
LVL 9

Expert Comment

by:James Bilous
ID: 41890580
I found this pull request for a code change on AdminLTE. You can see them discussing "expanded.pushMenu" as an event they added so people can respond to the menu changing in their own code:

https://github.com/almasaeed2010/AdminLTE/issues/444
0
 
LVL 1

Author Comment

by:Vipin Kumar
ID: 41890608
@James,

Then you mean that this code is not being executed at all.
0
 
LVL 9

Expert Comment

by:James Bilous
ID: 41890630
Correct, that's what I mean.
0
 
LVL 1

Author Comment

by:Vipin Kumar
ID: 41890644
@James,

Just last question, the whole code is not executed i.e. $("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu'); or only the trigger is not executed.
0
 
LVL 9

Assisted Solution

by:James Bilous
James Bilous earned 2000 total points
ID: 41890650
All of the code is executed; the statements are simply chained together and will happen in sequence.
0

Featured Post

Setting up LaraDock for Laravel

Learn how to set up LaraDock in a Laravel project - LaraDock gives us an easy way to run a Laravel application using Docker in a single command.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question