We Keep Coding

Only allow a function to be re-executable after it has already been executed (jquery)

If you go to the JSFiddle, and click "About" and then "Contact" in rapid succession, the drop-down options (which appear to the right of the parents) appear appended to each other although only one parent is selected - this is not desired. I'm trying to only allow a new selection to be made once the appear/disappear animation has been completed, avoiding any appending of the children's content.
$(function() {
function animate(e) {
e.stopPropagation();
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
if ($('.substitute .sub-child.active').length > 0) {
console.log("A");
$('.substitute .sub-child.active').hide(700, function() {
$(this).removeClass('active');
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
//$('#nav .nav-ul li').on('click', animate)
});
});
} else {
console.log("B");
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
//$('#nav .nav-ul li').on('click', animate)
});
}
}
$('#nav .nav-ul li').on('click', animate);
// close menu when clicking anywhere on the page
$(document).on("click", function() {
$("#nav li.detected").removeClass("detected");
$("#nav div.active").hide(700, function() { $(this).removeClass("active"); });
});
});
I tried adding this code after the opening of the function, but it only gave me the alert.
$('#nav .nav-ul li').click(function(){
var $this = $(this);
if(!$this.data('disabled')){
$this.data('disabled', true);
alert('next click enable only in 5 seconds');
setTimeout(function(){
$this.data('disabled', false);
}, 5000);
}
});

I would like the function where the mobile menu (Responsive Navigation) slides away or closes after a selection has been made

I would like the function where the mobile menu (Responsive Navigation) slides away or closes after a selection has been made
$("#btn_open_menu").click(function(e) {
e.preventDefault();
$("#header").toggleClass("active");
if ($("#header").hasClass('active')) {
$("#header .menu_closed").css('display', 'block');
} else {
$("#header .menu_closed").css('display', 'none');
}
return false;
});
//closed menu in responsive
$("#menu_closed").click(function(e) {
e.preventDefault();
$("#header").removeClass('active')
$("#header .menu_closed").css('display', 'none');
return false;
});

try
$(".link_menu").on("click",function(){
$("#header").removeClass("active");
});

Toggle dropdown when screen size < 1200

I write such function which on screen with width > 1200 have hover effect and show menu
$(window).resize(function(){
var width = $(window).innerWidth();
dropDown(width);
});
var dropDown = function(width){
if(width > 1200){
$(".dropdown").hover(function() {
$('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
}, function() {
$('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
}
);
}
};
The problem is when i refresh page on mobile size - all looks fine, but then change size of window > 1200px and then change size of window < 1200px my dropDown show when i hover, but i don't need it, it must open only when i click. Where is the problem? What i should do?
My html
<li class="dropdown">
DROPDOWN <b class="caret"></b>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</li>

You've not removed the hover handler when the window is less that 1200 wide, so the event handler still exists and works. The else part of the if statement below will fix that for you...
var openDropDown = function(el) {
var $el = $(el);
$('.dropdown-menu', $el).stop( true, true ).fadeIn("fast");
$el.toggleClass('open');
$('b', $el).toggleClass("caret caret-up");
};
var closeDropDown = function(el) {
var $el = $(el);
$('.dropdown-menu', $el).stop( true, true ).fadeOut("fast");
$el.toggleClass('open');
$('b', $el).toggleClass("caret caret-up");
};
var dropDown = function(width){
if(width > 1200){
$(".dropdown")
.off("click")
.hover(function() {
openDropDown(this);
}, function() {
closeDropDown(this);
});
}
else {
$(".dropdown")
.off("mouseenter mouseleave")
.on("click", function() {
if ($(this).hasClass("open")) {
closeDropDown(this);
}
else {
openDropDown(this);
}
});
}
};
I've also moved the code to open and close the dropdown into separate functions so that it can be reused. I then added a click handler to make the dropdown work when clicked when the window is < 1200 wide.

HTML Custom Made Menu Control issue

I am having a menu as shown in this fiddle:
http://jsfiddle.net/Gk_999/mtfhptwo/3
(function ($) {
$.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 () {
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function () {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function () {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function () {
if ($(window).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function ($) {
$(document).ready(function () {
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
});
})(jQuery);
Now, in jsFiddle, since the menu is responsive, is working fine.
However, if we run it on full screen, upon hover on the parent li list, its children appears compulsorily on the right as shown below.
The problem is that, if we have too many elements in the parent list, & if we hover on the elements at extreme right, its children appear compulsorily on right, & move out of the screen window, as a result, a horizontal scroll-bar appears.
So I want to get the children on the left, rather than right when they are moving out of the screen.
EDIT:
Check fullscreen output here : https://jsfiddle.net/Gk_999/mtfhptwo/3/embedded/result/
Any Help...???

This can only be done with JavaScript is my guess.
Update your ready function with the following mouseenter event. It will fire when somebody moves the mouse over an li with has-sub class.
(function ($) {
$(document).ready(function () {
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
$("li.has-sub").on("mouseenter", function(){
var element = this).find("ul");
//remove the class beforehand so it always defaults to the right.
$(element.removeClass("showleft");
//if the rendered menu and it's page offset are wider then the body
if (element.offsetWidth + element.offset().left > document.body.offsetWidth)
{
element.addClass("showleft");
}
});
});
Add this to the css:
.showleft {
left : -230px !important;
}
It works, look here:
http://jsfiddle.net/mtfhptwo/4/

First, do one thing, get the width of the document using java script and your sub div, set min width of generating div on hover of sub menu if it is greater than minimum height than animate your sub menu(sub div) to wherever you want or you can also give style using java script css property.

jQuery resize window on tab click

I'v placed a jquery slider in a Bootstrap tab but the tab does not function unless the window is resized. I'm guessing this is because it's being created in an empty container instead of being fired once the container exists.
I've tried triggering a window resize event upon clicking the tab:
$('#myTab a[href="#slider"]').click(function (e) {
e.preventDefault()
$(this).tab('show');
jQuery(window).trigger('resize');
$('.swiper-container').css('height','100%').css('width','100%');
})
But it didn't work.
JS Fiddle LINK

Call Swiper function once slider tab is displayed..
var isSliderActive = false;
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
if($(this).attr('href') == "#slider"){
if(isSliderActive === false){ //If slider is not active
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true
});
}
isSliderActive = true;
}
});
Updated jsFiddle

Expand and collscape div:
var open = false;
$('#SlideButton').click(function () {
if (open === false) {
$('#SlideContent').animate({ height: '650px' }, 600);
$('#SlideContent').css('display', 'block');
$(this).css('background-position', 'bottom left');
open = true;
}
else {
$('#SlideContent').animate({ height: '0' }, 600, function () {
$('#SlideContent').css('display', 'none');
});
$(this).css('background-position', 'top left');
open = false;
}
});