We Keep Coding

Bootsrap 4: Disable button until modal animation is done

I'm using a Bootstrap 4 modal to show a big navigation.
To open the navigation I'm using a toggle button with a CSS animation. The animation changes a hamburger menu icon to an X.
The problem is, that if you click to fast and the modal animation isn't ready, the button gets confused and shows the X even at an already closed menu/modal.
Is there any way to disable the button until the modal animation is ready?
Here's my code:
$('.menu').click(function(){
$('#burger').toggleClass('active');
});
I saw, that there is a way to listen to the modal animation:
$('#myModal').on('shown', function () {
// do something…
})
But I could not figure out how to implement it in my function.
Here's my actual code: https://codepen.io/cray_code/pen/JjjqRpN

You can just tie toggling of the burger to both show/hide modal events..
var toggleBurger = function () {
$('#burger').toggleClass('active-sandwich');
}
$('#nav-modal').on('show.bs.modal', toggleBurger)
$('#nav-modal').on('hide.bs.modal', toggleBurger)
Demo

Well you could write it like this
$(document).ready(function(){
var isShown = false;
$('#nav-modal').on('shown.bs.modal', function(){
isShown = false;
$("#burger").css("display", "block");
});
if(!isShown)
{
$('#burger').on('click', function(){
isShown = true;
$("#burger").css("display", "none");
});
}
$('#nav-modal').on('hidden.bs.modal', function () {
isShown = false;
$("#burger").css("display", "block");
});
Sorry if the code kind of messy, but I hope you could understand what I mean.
basically I only put some boolean to make sure its showing or not.
After that I validate it. If isshown is false then you can't click until isshown true.

jQuery :visible working but :hidden does not

I'm working on this website.
Here is the code for the menu trigger on the left sidebar:
jQuery(document).ready( function(){
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function(){
jQuery('#dimmer').fadeToggle(500);
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {direction: "left"}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if(jQuery(".nav-animate").is(":visible")) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
// The above part works perfectly, however the part below doesn't:
if(!jQuery(".nav-animate").is(':visible')) {
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
I tried using if(jQuery(".nav-animate").is(":hidden")) {//...}, and if(jQuery(".nav-animate").css('display') == 'none') {//...} but both doesn't work.
My guess, when you click to "CLOSE" it does the :visible or :hidden check, but the menu is still open at the time you click so it still doesn't have the display:none until the click event performs that. In that case, what can I do?
Thanks in advance for your time and suggestions.

animation related methods will affect the visibility check, so check the state before call to toggle
jQuery(document).ready(function () {
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function () {
jQuery('#dimmer').fadeToggle(500);
//negate since fadetoggle will toggle the state
var visible = !jQuery('.nav-animate').stop().is(':visible');
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {
direction: "left"
}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if (visible) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
} else {
// The above part works perfectly, however the part below doesn't:
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});

Just add condition else on one your block condition right.. It's mean will be run if first condition block not true.
if(!jQuery('.nav-animate').stop().is(':visible')) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
else{
// to do
}

Slide Effects for Tabs Part 2

Ok so my original question got answered and now my slide effect only happens when I click in anywhere in my div region..here is the code:
$(document).ready(function(){
$('#tabs').tabs();
$("#tabs").click(function() {
$(this).effect( "slide", "medium" );
});
});
Now I'm wondering what if somebody wants to copy text from one of my tab regions? Every single time they try to highlight, the tab will slide away. How do I make it so that the tab region only slides when the actualy tab ul is clicked?

Use combination of mousedown and mouseup:
Demo Fiddle
var down=0;
$(document).ready(function(){
$("#tabs").mousedown(function(event){
down=event.clientX+"||"+event.clientY;
});
$("#tabs").mouseup(function(event){
var up=event.clientX+"||"+event.clientY;
if(up==down)
$(this).slideUp("medium" );
});
});
Updated code which prevent slidedown on right-click copy text:
Demo Fiddle 2
var down="||";
$(document).ready(function(){
$("#tabs").mousedown(function(event){
switch(event.which){
case 1:/*Left mouse button pressed*/
down=event.clientX+"||"+event.clientY;
break;
default:/*middle or right mouse button pressed*/
down="||";
}
});
$("#tabs").mouseup(function(event){
var up=event.clientX+"||"+event.clientY;
if(up==down)
$(this).slideUp("medium" );
});
});

You can use the event capturing option on click method. By using that, you can get the element on which the mouse is clicked. And then you can use the target object as below,
$('#tabs').click(function(e){
if(e.target.nodeName == 'P') {
e.stopPropagation();
return;
}
$(this).effect( "slide", "medium" );
});
Hope it will help.

Best Practice Combining Toggle and Hover

I have some elements which have hover effects as well as should be selected when clicked. Currently when I add the stop() to the effect it causes the animation to stop in place when clicked. I tried using fadeToggle() for the same effect but could not wrap my head around how to get it to function properly. The id I am targeting are passed to the href of the clicked element.
Can someone give pointers on the best way to write this script?
$(function() {
$("#map-hovers > ul > li").hide();
$('area').click(function(e) {
e.preventDefault();
var $hoodClick = $($(this).attr('href'));
if ($hoodClick.hasClass('selected')) {
$($hoodClick).fadeOut().removeClass('selected');
} else {
$($hoodClick).fadeIn().addClass('selected');
}
}).hover(function() {
var $hoodHoverOver = $($(this).attr('href'));
$hoodHoverOver.fadeIn();
},
function() {
var $hoodHoverOut = $($(this).attr('href'));
if ($hoodHoverOut.hasClass('selected')) {
} else {
$hoodHoverOut.fadeOut();
}
})
});

Use .stop(true, true). It skips to the end of the animation & clears the animation queue. Read more about it in the API: http://api.jquery.com/stop/

JQuery drop down, remain down while hover over drop down

I setup a jquery dropdown menu that works perfect. It drops down when a user rolls over a link. The problem is that when the user rolls over the content area of the drop down menu, it slides back up. I need to set up the code so that the slidedown box remains in the down position while the user's cursor is still over it.
Here is my HTML:
<ul id="tabnav">
<li class="tab2">My Leases</li>
</ul>
<div id="leases">
<!-- slide down content here -->
</div>
JS Trigger:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").hover(function(){
$("#leases").slideToggle("medium");
$(this).toggleClass("active");
return false;
});
});
</script>
Any ideas?
EDIT: Here is a link to page in question: http://designvillain.com/testbed/600/601.html

I'm not sure if this is what you want, but I'll just drop it here. It waits 500ms before sliding up #leases, and only when appropriate
var isMousedOver;
var hideDropdown = function(a) {
setTimeout( function() {
if (isMousedOver) return;
$("#leases").slideUp("medium");
$(a).removeClass("active");
}, 500);
}
$(".btn-slide").hover(
function(){
$("#leases").stop(true,true).slideDown("medium");
isMousedOver = true;
$(".btn-slide").removeClass("active");
$(this).addClass("active");
var that = this;
$("#leases").data("mouseoutfn", function() { hideDropdown(that) });
},
function(){
isMousedOver = false;
hideDropdown(this);
}
);
$("#leases").hover(
function() {
isMousedOver = true;
},
function() {
isMousedOver = false;
$(this).data("mouseoutfn")();
}
);
Here's a demo: http://jsfiddle.net/mMRZc/

The .hover() binds two events, mouseenter and mouseleave.
I would instead go granular and use the mouseenter() on the .btn-slide and the mouseleave() on the .leases
$(function()
{
$(".btn-slide").mouseenter(function(){
$("#leases").slideToggle("medium");
$(this).toggleClass("active");
});
$("#leases").mouseleave(function(){
$(".btn-slide").toggleClass("active");
$(this).slideToggle("medium");
});
});
EDIT: Note, if the mouse never enters the #leases div, it will not get the mouseleave, and you may need to consider that.
EDIT2: fix my bad finger typing of funciton to function

I assume the div is hidden on page load and you want it to show when you hover over the link? Change toggle to down...
$(document).ready(function(){
$("#leases").hide();
$(".btn-slide").hover(function(){
$("#leases").slideDown("medium");
$(this).toggleClass("active");
return false;
});
});
Does it need to slide back up sometime?