Hey stackoverflow community!
I have a small issue regarding this JS logic to add a class name to my body tag to hide the side navigation menu upon window resizing. Let me try to explain the issue as clearly as I can. Currently I'm using a UI template by creativetime called Argon. The page when loaded on a full scaled width looks like this:
When I resize the window after the page has loaded it looks like this:
But when I refresh the page, the side navigation is no longer there as how it should be, which is like this:
After refreshing the page, resizing the window thereafter makes the side navigation to hide as it should. The sidenav just doesn't go hidden on first page load for some reason.
The JS for this is as follows:
var Layout = (function() {
function pinSidenav() {
$('.sidenav-toggler').addClass('active');
$('.sidenav-toggler').data('action', 'sidenav-unpin');
$('body').removeClass('g-sidenav-hidden').addClass('g-sidenav-show g-sidenav-pinned');
$('body').append('<div class="backdrop d-xl-none" data-action="sidenav-unpin" data-target='+$('#sidenav-main').data('target')+' />');
// Store the sidenav state in a cookie session
Cookies.set('sidenav-state', 'pinned');
}
function unpinSidenav() {
$('.sidenav-toggler').removeClass('active');
$('.sidenav-toggler').data('action', 'sidenav-pin');
$('body').removeClass('g-sidenav-pinned').addClass('g-sidenav-hidden');
$('body').find('.backdrop').remove();
// Store the sidenav state in a cookie session
Cookies.set('sidenav-state', 'unpinned');
}
// Set sidenav state from cookie
var $sidenavState = Cookies.get('sidenav-state') ? Cookies.get('sidenav-state') : 'pinned';
if($(window).width() > 1200) {
if($sidenavState == 'pinned') {
pinSidenav()
}
if(Cookies.get('sidenav-state') == 'unpinned') {
unpinSidenav()
}
$(window).resize(function() {
if( $('body').hasClass('g-sidenav-show') && !$('body').hasClass('g-sidenav-pinned')) {
$('body').removeClass('g-sidenav-show').addClass('g-sidenav-hidden');
}
})
}
if($(window).width() < 1200){
$('body').removeClass('g-sidenav-hide').addClass('g-sidenav-hidden');
$('body').removeClass('g-sidenav-show');
$(window).resize(function() {
if( $('body').hasClass('g-sidenav-show') && !$('body').hasClass('g-sidenav-pinned')) {
$('body').removeClass('g-sidenav-show').addClass('g-sidenav-hidden');
}
})
}
$("body").on("click", "[data-action]", function(e) {
e.preventDefault();
var $this = $(this);
var action = $this.data('action');
var target = $this.data('target');
// Manage actions
switch (action) {
case 'search-show':
target = $this.data('target');
$('body').removeClass('g-navbar-search-show').addClass('g-navbar-search-showing');
setTimeout(function() {
$('body').removeClass('g-navbar-search-showing').addClass('g-navbar-search-show');
}, 150);
setTimeout(function() {
$('body').addClass('g-navbar-search-shown');
}, 300)
break;
case 'search-close':
target = $this.data('target');
$('body').removeClass('g-navbar-search-shown');
setTimeout(function() {
$('body').removeClass('g-navbar-search-show').addClass('g-navbar-search-hiding');
}, 150);
setTimeout(function() {
$('body').removeClass('g-navbar-search-hiding').addClass('g-navbar-search-hidden');
}, 300);
setTimeout(function() {
$('body').removeClass('g-navbar-search-hidden');
}, 500);
break;
}
})
// Add sidenav modifier classes on mouse events
$('.sidenav').on('mouseenter', function() {
if(! $('body').hasClass('g-sidenav-pinned')) {
$('body').removeClass('g-sidenav-hide').removeClass('g-sidenav-hidden').addClass('g-sidenav-show');
}
})
$('.sidenav').on('mouseleave', function() {
if(! $('body').hasClass('g-sidenav-pinned')) {
$('body').removeClass('g-sidenav-show').addClass('g-sidenav-hide');
setTimeout(function() {
$('body').removeClass('g-sidenav-hide').addClass('g-sidenav-hidden');
}, 300);
}
})
// Make the body full screen size if it has not enough content inside
$(window).on('load resize', function() {
if($('body').height() < 800) {
$('body').css('min-height', '100vh');
$('#footer-main').addClass('footer-auto-bottom')
}
})
})();
Working JS Fiddle: https://jsfiddle.net/Vaulient/kthw39gs/6/
I have a responsive menu. When the menu reaches tablet/mobile width it turns into a mobile menu. In the menu are 2 special buttons. #toggleReg and #toggleLogin
When the menu dropdown is Open. #toggleReg and #toggleLogin are set to .show but when the menu dropdown is closed they are set to .hide ... simple enough.
But because this is part of a responsive menu. I need #toggleReg and #toggleLogin to always .show if the browser viewports width is above 768px;
How do I add a condition that will solve this problem for me. Since it is currently set to be hidden once reaching a width below 768px; via a media query and then told to display again if the mobile menu is "opened" via the js snippet below.
Here is my current code.
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$('#toggleReg').hide();
$('#toggleLogin').hide();
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
$('#toggleReg').show();
$('#toggleLogin').show();
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
I am working with cssmenumaker source file
Thanks for any help!
I think if you just handle the window size before your allow the click, you should be able to make sure the buttons show up. Then if the window is smaller, it will check for the button being pressed.
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
//Add this clause
if($(window).width() >= 768){
$('#toggleReg').show();
$('#toggleLogin').show();
} else {
$(this).find("#menu-button").on('click', function(){
$('#toggleReg').hide();
$('#toggleLogin').hide();
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
} else {
mainmenu.show().addClass('open');
$('#toggleReg').show();
$('#toggleLogin').show();
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
}
});
}
This won't work on window resize though - only when the window loads.
UPDATE
This is how I would normally write it:
function menuState() {
var winW = $(window).width();
if(winW >= 768) {
//Handle Large Menu
$('#toggleReg').show();
$('#toggleLogin').show();
} else {
//Handle Mobile Menu
$('#toggleReg').hide();
$('#toggleLogin').hide();
$(document).on('click', '#menu-button', function() {
var menuClass = $(this).attr('class').split(" ")[1];
if(menuClass == "menu-opened") {
$(this).removeClass('menu_opened');
$(this).next('ul').removeClass('open');
} else {
$(this).addClass('menu-opened');
var mainMenu = $(this).next('ul');
if(mainMenu.hasClass('open')) {
mainMenu.hide().removeClass('open');
} else {
mainMenu.show().addClass('open');
$('#toggleReg').show();
$('#toggleLogin').show();
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
}
});
}
}
$(document).ready(function(){
menuState();
});
$(window).resize(function(){
menuState();
});
You may be able to comment out the function and just plaster this in that javascript file.
I want to reload a js function (inside xyz.php) as the mobile orientation changes (on orientationchange() ).
In a "jquery-custom.js" I already have a function for orientationchange() that works:
$(window).on('orientationchange', function(e) {
$(".loader-packery").show().delay(1000).fadeOut(1);
});
This is the function inside "xyz.php" i want to reload:
function searchWidthMobile() {
if (is_mobile) {
var $mobile_search = $( ".mobile-header-inner .searchform" );
if($mobile_search.length){
$mobile_search.focusin(function() {
$(this).css({
'z-index':'2'
}).stop().animate({
'padding-left':'0px',
'padding-right':'0px'
}, 400);
});
if ($(document).width() > 380) {
$mobile_search.focusout(function() {
$(this).stop().animate({
'padding-left':'435px',
'padding-right':'77px'
},400);
setTimeout(function(){
$mobile_search.css({
'z-index':'0'
});
}, 400);
});
}
else {
$mobile_search.focusout(function() {
$(this).stop().animate({
'padding-left':'235px',
'padding-right':'77px'
},400);
setTimeout(function(){
$mobile_search.css({
'z-index':'0'
});
}, 400);
});
}
}
}
}
searchWidthMobile();
// $(window).resize(searchWidthMobile);
The function in xyz.php works. But as you can imagine, only on loading or reloading the site itself.
Any help would be appreciated :)
Just call the function when the device orientation changes:
$(window).on('orientationchange', function(e) {
$(".loader-packery").show().delay(1000).fadeOut(1);
searchWidthMobile();
});
I need to create a jquery based UI, in which I will have the below html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
div .content
{
border: 2px solid black;
background-color: White;
}
div.content::-webkit-scrollbar{
display:none;
}
#container::-webkit-scrollbar{
display:none;
}
</style>
</head>
<body>
<button type="button" id="btnPopup">
Show Popup</button>
<div id="container" style="display: none; border: 2px solid green; background-color: Blue;">
<h3>
DISTRIBUTION</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this: Using jQuery UI Resizable I'm trying to prevent resizing based on various
rules. The built-in containment feature doesn't seem to work properly with absolutely
positioned elements, and I would need something more flexible than that anyway.
Having something like this: Using jQuery UI Resizable I'm trying to prevent resizing
based on various rules. The built-in containment feature doesn't seem to work properly
with absolutely positioned elements, and I would need something more flexible than
that anyway. Having something like this: Using jQuery UI Resizable I'm trying to
prevent resizing based on various rules. The built-in containment feature doesn't
seem to work properly with absolutely positioned elements, and I would need something
more flexible than that anyway. Having something like this: Using jQuery UI Resizable
I'm trying to prevent resizing based on various rules. The built-in containment
feature doesn't seem to work properly with absolutely positioned elements, and I
would need something more flexible than that anyway. Having something like this:
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this: Using jQuery UI Resizable I'm trying to prevent resizing based on various
rules. The built-in containment feature doesn't seem to work properly with absolutely
positioned elements, and I would need something more flexible than that anyway.
Having something like this: Using jQuery UI Resizable I'm trying to prevent resizing
based on various rules. The built-in containment feature doesn't seem to work properly
with absolutely positioned elements, and I would need something more flexible than
that anyway. Having something like this:
</p>
</div>
<h3>
EXCEPTION</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
</div>
<h3>
ERROR</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
</div>
<h3>
MY NOTES</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
</div>
</div>
</body>
<script type="text/javascript">
$("#container").accordion({
collapsible: true,
heightStyle: "content",
beforeActivate: function (event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !
isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active', !isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancel the default action
}
});
$(document).ready(function () {
$(".content").css('max-height', $("#container").height() - 150);
});
$(document).delegate("#btnPopup", "click", function () {
$("#container").dialog({
title: "jQuery Modal Dialog Popup",
resizable: false,
width: 800,
maxHeight: 800
//minHeight: 250,
//minWidth: 500,
//resize: function (event, ui) {
// $(".content").css('max-height', ($("#container").height() - 250));
//}
});
return false;
});
// $(document).bind('wheel mousewheel', function (e) {
//
// if (e.originalEvent.wheelDelta > 0) {
//
// }
// else {
// k = h = 0;
// $("div.content").each(function () {
// if ($(this).is(":focus")) {
// h = k;
// }
// k++;
// });
// if ($('.content')[h] != undefined && h != (k - 1)) {
// if ($('#container').children('div.content').eq(h).scrollTop() + $('#container').children('div.content').eq(h).innerHeight() >=
//$('.content')[h].scrollHeight) {
//
// if (!($('div.content').eq(h + 1).prev('h3').hasClass('ui-state-active'))) {
// var totalDiv = $('div.content').length;
// var h3Height = $('h3').height();
//
// $("#container").accordion({ active: h + 1 });
// var f = $('h3.ui-state-active').length;
// //if (f != 1) {
// $('div.content').each(function () {
// if ($(this).css('display') == 'block')
// $(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
// });
// $('div.content').eq(h + 1).focus();
//
// }
// }
// }
//
// }
// });
(function ($) {
$.fn.hasScrollBar = function () {
return this.get(0).scrollHeight > this.height();
}
})(jQuery);
// $(function () {
// $(".content").bind('scroll', function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// })
$('div.content').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta / 120 > 0) {
// $(this).text('scrolling up !');
}
else {
// if ($('div.content').hasScrollBar()) {
// if ($('div.content').scrollTop() == ($('div.content p').height() - $('div.content').height())) {
// alert('end!');
// }
// }
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//alert('end reached');
$(this).next('h3').click();
$(this).prev('h3').click()
// $(this).next('div.content').attr('display', 'block');
$(this).blur();
$(this).next('div.content').focus();
}
}
});
// $('.content').bind('mousewheel', function (e) {
// if ($('div.content').hasScrollBar()) {
// $(this).delegate(".content", "scroll", function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// }
// else {
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
$(document).delegate("h3", "click", function () {
var totalDiv = $('div.content').length;
var h3Height = $('h3').height();
var f = $('h3.ui-state-active').length;
// if (!($(this).hasClass('ui-state-active'))) {
if (f != 1) {
$('div.content').each(function () {
if ($(this).css('display') == 'block')
$(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
});
}
});
</script>
</html>
The above html displays an accordion.
What I need to do us have a single scrollbar for the entire accordion content which will work like follows:
When 1st div scrolling is reached till end, second div will open up, on completion of second div scroll(if no scroll is present then too the same thing will happen), 3rd div will open up.
Now, this goes with scrolling downwards, the same should work when user scrolls upwards.
Please let me know the solution which has to be applied to implement the above type of functionality.
$("#container").accordion({
collapsible: true,
heightStyle: "content",
beforeActivate: function (event, ui) {
// The accordion believes a panel is being opened
var currHeader ;
var currContent;
if (ui.newHeader[0]) {
currHeader = ui.newHeader;
currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
currHeader = ui.oldHeader;
currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !
isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active', !isPanelSelected);
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancel the default action
}
});
$(document).ready(function () {
$(".content").css('max-height', $("#container").height() - 150);
});
$(document).delegate("#btnPopup", "click", function () {
$("#container").dialog({
title: "jQuery Modal Dialog Popup",
resizable: false,
width: 800,
maxHeight: 800
//minHeight: 250,
//minWidth: 500,
//resize: function (event, ui) {
// $(".content").css('max-height', ($("#container").height() - 250));
//}
});
return false;
});
// $(document).bind('wheel mousewheel', function (e) {
//
// if (e.originalEvent.wheelDelta > 0) {
//
// }
// else {
// k = h = 0;
// $("div.content").each(function () {
// if ($(this).is(":focus")) {
// h = k;
// }
// k++;
// });
// if ($('.content')[h] != undefined && h != (k - 1)) {
// if ($('#container').children('div.content').eq(h).scrollTop() + $('#container').children('div.content').eq(h).innerHeight() >=
//$('.content')[h].scrollHeight) {
//
// if (!($('div.content').eq(h + 1).prev('h3').hasClass('ui-state-active'))) {
// var totalDiv = $('div.content').length;
// var h3Height = $('h3').height();
//
// $("#container").accordion({ active: h + 1 });
// var f = $('h3.ui-state-active').length;
// //if (f != 1) {
// $('div.content').each(function () {
// if ($(this).css('display') == 'block')
// $(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
// });
// $('div.content').eq(h + 1).focus();
//
// }
// }
// }
//
// }
// });
(function ($) {
$.fn.hasScrollBar = function () {
return this.get(0).scrollHeight > this.height();
};
})(jQuery);
// $(function () {
// $(".content").bind('scroll', function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// })
$('div.content').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta == 120) {
// $(this).text('scrolling up !');
//alert("up scrolling");
try{
var x=$(this).prev('h3');
var y=x.prev('div.content');
$('.content').attr('display', 'none');
$(this).prev('div.content').focus();
if ( $(this).innerHeight() >= $(this)[0].scrollHeight) {
y.prev('h3').click();
x.click();
}
x.prev('div.content').attr('display', 'block');
}catch(err){alert(err.message);}
}
else {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//alert('end reached');
$(this).next('h3').click();
$(this).prev('h3').click();
// $(this).next('div.content').attr('display', 'block');
$(this).blur();
$(this).next('div.content').focus();
}
}
});
// $('.content').bind('mousewheel', function (e) {
// if ($('div.content').hasScrollBar()) {
// $(this).delegate(".content", "scroll", function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// }
// else {
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
$(document).delegate("h3", "click", function () {
var totalDiv = $('div.content').length;
var h3Height = $('h3').height();
var f = $('h3.ui-state-active').length;
// if (!($(this).hasClass('ui-state-active'))) {
if (f != 1) {
$('div.content').each(function () {
if ($(this).css('display') == 'block')
$(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
});
}
});
Here is the updated javascript which will also work when you scroll up i.e it will close the current pane and open the previous pane. Here is the working JSBIN demo http://jsbin.com/viwojelico/2/edit?html,js
I am developing a responsive website. There are two functions: nested functions are used in both, handling event $(document).click(). Both hide the same elements — .dropdown.slide-out. However, in the first case, the function refers to the selector .dropdown, and in the second case to the selector .slide-out. The first works only: where am I going wrong?
/*
|---------------------------------------
| Dropdowns
|---------------------------------------
*/
$(function () {
var label = $('.dropdown-toggle');
var allDropDowns = $('.dropdown-menu, .rmb-popup');
var el = $(this);
label.click(function () {
if (Modernizr.mq('only screen and (min-width: 768px)')) {
allDropDowns.hide();
$(this).parents('.dropdown').children('.dropdown-menu').toggle('fast');
label.removeClass('active');
$(this).addClass('active');
return false
}
});
// Conflict point #1. Hide .dropdown.slide-out-right
$(document).click(function () {
allDropDowns.hide();
label.removeClass('active');
});
allDropDowns.click(function (event) {
event.stopPropagation();
});
});
/*
|---------------------------------------
| Slide-outs
|---------------------------------------
*/
$(function () {
var soRight = $('.slide-out-right');
$('.btn-menu-secd').click(function () {
if (Modernizr.mq('only screen and (max-width: 767px)')) {
soRight.animate({
right: 0
}, 400)
}
return false
});
// Conflict point #2. Slide out .dropdown.slide-out-right
$(document).click(function () {
if (Modernizr.mq('only screen and (max-width: 767px)')) {
if (soRight.attr('style')) {
soRight.animate({
right: '-270px'
}, 400, function () {
soRight.removeAttr('style')
})
}
}
});
soRight.click(function (event) {
event.stopPropagation();
});
});
UPD: I was wrong. JQuery starts from 1.7 let to attach more than one or more handlers on 1 event. It will execute it in order of binding Documentation
FIDDLE
1:
$(function(){
var allDropDowns = $('.dropdown-menu');
$('.dropdown-toggle').click(function() {
allDropDowns.show();
return false;
});
$(document).click(function() {
allDropDowns.hide();
});
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
e.preventDefault();
});
});
2:
$(function() {
var slideOut = $('.slideout');
$('.btn-menu').click(function() {
slideOut.show();
return false;
});
$(document).click(function() {
slideOut.hide();
});
$('.slideout').click(function(e) {
e.stopPropagation();
e.preventDefault();
});
});