We Keep Coding

Hide Menu After ScrollTop with JQuery/JS

I have a simple menu and when i click the "li" items the page automatically scrolls to that section. What I want to do is close my "dropMenu-nav" after scrolling finishes. I searched asked questions but I couldn't make it work. Here is my HTML :
<div class="dropMenu-nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>RESUME</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
And my JS code :
$(document).ready(function(){
let scrollNav = $('.scroll');
scrollNav.click(function(e){
e.preventDefault();
$('body, html').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
*$('.dropMenu-nav').animate({
opacity: 0;
}, 2000);*
});
$(window).scroll(function() {
let scrollBarLocation = $(this).scrollTop();
scrollLink.each(function(){
let sectionOffset = $(this.hash).offset().top;
if (sectionOffset <= scrollBarLocation){
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
}
});
})
});
Scrolling part works perfectly but i cant find a way to hide my menu after scrolling. I don't see any error on my console also and I don't know where I am doing wrong to be honest. I would appreciate any help, thanks in advance for all your help.

The trick is to do the menu collapsing logic in the complete callback of jQuery.animate:
$('body, html').animate({
scrollTop: $(this.hash).offset().top
}, {
duration: 1000,
complete: function() {
document.body.classList.remove('nav-is-open');
}
});

If you want to close the menu after scroll then you will want to evaluate that code after the scroll completes. See the complete parameter in the jQuery.animate docs.
$('html,body').animate({
scrollTop: scrollTop: $(this.hash).offset().top
}, 1000, function () {
$('body').removeClass('nav-is-open')
})

Button Click on Android Kit Kat only activates after many clicks in phonegap build app

I have recently built a phonegap app that has a menu that slides into view from the left and closes when you click a link on the actual menu.
I am using the jquery plugin fastclick to remove 300ms delay on touch devices. Below is the code that slides a menu in and out.
$('#showLeftPush').click(function (e) {
e.preventDefault();
if ($(this).hasClass('show')) {
$("#cbp-spmenu-s1").animate({
left: "-=130"
}, 300, function () {
// Animation complete.
console.log('menu closed');
});
$(this).removeClass('show').addClass('hide');
}
else {
$("#cbp-spmenu-s1").animate({
left: "0"
}, 300, function () {
// Animation complete.
console.log('menu open');
});
$(this).removeClass('hide').addClass('show');
}
console.log('menu clicked');
});
The code works fine on earlier versions of android before kit kat 4.4.1 . when i click the showLeft button, sometime the menu only opens after 10 or so click.
Is there something that i should know or am i missing something.
Please help, I have been sitting with this issue for 2 days now.

you can try using Tap Event instead of click on Android Kitkat.
$('#showLeftPush').on("tap", function (e) {
e.preventDefault();
if ($(this).hasClass('show')) {
$("#cbp-spmenu-s1").animate({
left: "-=130"
}, 300, function () {
// Animation complete.
console.log('menu closed');
});
$(this).removeClass('show').addClass('hide');
}
else {
$("#cbp-spmenu-s1").animate({
left: "0"
}, 300, function () {
// Animation complete.
console.log('menu open');
});
$(this).removeClass('hide').addClass('show');
}
console.log('menu clicked');
});
Hope this helps..

have you tried the simple Panel widget in jQuery mobile? giving a sample below
<div data-role="panel" id="mypanel" data-theme="b">
<h3 align="center">Menu</h3>
<ul id="list" data-role="listview" data-inset="true">
<li>Driving style</li>
<li>History</li>
<li>Policy</li>
<li>Contact us</li>
<li>Settings</li>
</ul>
</div>

Menu and Submenu not behaving as expected when hovering erratically

I have a horizontal menu (set out as a list) and when you hover over one of the list items it animates a dropmenu which is a child of the list item.
This works fine if you move the cursor over the menu at a "normal" speed. The problem I have is the behaviour of the menu if you erratically move the cursor over the menu. It leaves previously hovered elements shown still and I have to hover over and out of the dropMenu until they all return to their initial state (height:0).
My jquery for the menu is below:
$('#templateNav > ul > li').bind({
mouseenter: function() {
$(this).find(".dropMenu").clearQueue().animate({
height: 250
}, 200);
},
mouseleave: function() {
$(this).find(".dropMenu").clearQueue().height(0);
}
});
And here's an example of my menu code:
<div id='templateNav'>
<ul>
<li>Menu 1<span class='dropMenu'>...</span></li>
<li>Menu 2<span class='dropMenu'>...</span></li>
<li>Menu 3<span class='dropMenu'>...</span></li>
</ul>
</div>
Any ideas?

See this http://jsbin.com/ukuqik/1
$('#templateNav > ul > li').bind({
mouseenter: function() {
$(this).find(".dropMenu").stop(true,true).animate({
height: 250
}, 200);
},
mouseleave: function() {
$(this).find(".dropMenu").stop(true,true).animate({
height: 0
}, 200);
}
});
And a little better : http://jsbin.com/ukuqik/6

Here is a solution:
Use a variable, and set it when the Animation is done.. Something like:
var isAnimating = false;
mouseenter: function() {
isAnimating = true; // Here we start
$(this).find(".dropMenu").clearQueue().animate({
height: 250
}, 200, function (){isAnimating=false}); // Now we are done with animation
},
mouseleave: function() {
if(isAnimating == false) $(this).find(".dropMenu").clearQueue().height(0);
}
Or you may stop the animation when you Move mouse out using .stop().

open and close or return if already open nav

I have a nav which on a click i expand it, but if it's already expanded and we click on the item again it shouldn't do anything (return). I have this code but it is not working properly, currently if I click on the item it expands it but if i click again it closes the nav and if i click once again it expands it but it behaves funny. I basically only need to be able to click and open and do nothing if already opened as I will have a close button anyway.
p.s. "item" is a var i defined before in the code.
var item = $(".nav a");
<div class="nav">
Trigger
<div class="wrapSubContent">
<div class="wrapNavtoShowHide">
..content..
</div>
</div>
</div>
item.click(function(e) {
e.preventDefault();
$(".wrapSubContent").slideToggle("slow", "linear", function(){
$(".wrapNavtoShowHide").slideToggle("slow", "linear");
});
});
Anyone?

You should check if the div is hidden or not and then use slideDown.
var item = $(".nav a");
$(".wrapNavtoShowHide").hide();
item.click(function(e) {
e.preventDefault();
if ($(".wrapNavtoShowHide").is(":hidden")) {
$(".wrapNavtoShowHide").slideDown("slow", "linear");
}
});
Take a look at the jsfiddle example of this in action.

Check if the div is already openened, like this±
item.click(function(e) {
e.preventDefault();
if ( $(".wrapSubContent").is(":visible") ) {
return
}
$(".wrapSubContent").slideToggle("slow", "linear", function(){
$(".wrapNavtoShowHide").slideToggle("slow", "linear");
});
});
Or:
item.click(function(e) {
e.preventDefault();
if ( $(".wrapSubContent:visible").length > 0) {
return
}
$(".wrapSubContent").slideToggle("slow", "linear", function(){
$(".wrapNavtoShowHide").slideToggle("slow", "linear");
});
});

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?