Vipin Kumar
asked on
Understanding Trigger in Jquery
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.
Thanks in advance.
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');
}
}
};
Thanks in advance.
ASKER
@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.
Can you please elaborate on this trigger trigger('expanded.pushMenu
Thanks in advance.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@James,
I have searched all the files, there is no where I find that expanded is defined. That is why I am getting confused.
I have searched all the files, there is no where I find that expanded is defined. That is why I am getting confused.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
https://github.com/almasaeed2010/AdminLTE/issues/444
ASKER
@James,
Then you mean that this code is not being executed at all.
Then you mean that this code is not being executed at all.
Correct, that's what I mean.
ASKER
@James,
Just last question, the whole code is not executed i.e. $("body").removeClass('sid ebar-colla pse').trig ger('expan ded.pushMe nu'); or only the trigger is not executed.
Just last question, the whole code is not executed i.e. $("body").removeClass('sid
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.