[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Understanding Trigger in Jquery

Posted on 2016-11-16
10
Medium Priority
?
169 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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

649 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