We Keep Coding

Close push menu on scroll

How would I go about closing a push canvas menu when the use scrolls? or clicks off of it.
Below is the HTML and Jquery. Thanks in advance!
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pushmenu pushmenu-left">
<div class="menu-primary-container">
<ul id="menu-primary" class="menu">
<li>Home</li>
<li>Creative</li>
<li>Online</li>
<li>Print</li>
<li>The Studio</li>
<li>Our Work</li>
<li>Snippets</li>
<li>Blog</li>
<li>Get in touch</li>
</ul>
</div>
<div class="mobile-phone">01268 271 858</div>
</nav>

toggle your pushmenu classes on scroll.
window.addEventListener('scroll', function(e) {
$('.pushmenu-push').removeClass('pushmenu-push-toright');
$menuLeft.removeClass('pushmenu-open');
});
you might want to add timer to prevent the menu from scrolling if the user accidentally scrolls before choosing a menu item (could happen on touch devices).

Add and Remove Class to Element with JavaScript on mouseEnter

I'd like to be able to add and remove classes based on the users mouse moving over certain areas. Below is the navigation code as generate by WordPress:
<nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
<ul id="menu-new-blog-main-2" class="nav-bar clearfix">
<li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168">About Proforma</li>
<li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169">Proforma.com</li>
<li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170">Contact Us</li>
</ul>
</nav>
I've come up with the following JavaScript that targets the <li> in order to change the class of the link within the <li>:
<script>
$(document).ready(function(){
$('#site-navigation li').mouseenter(function(){
$(this).find('li.menu-item a').addClass('animated, bounceIn');
//$(this).find('.span').addClass('fadeInUp');
});
$('#site-navigation li'').mouseleave(function(){
$('#site-navigation li'').find('li.menu-item a').removeClass('animated, bounceIn');
//$('#site-navigation li').find('.span').removeClass('animated, fadeInUp');
});
});
</script>
I've checked the Console and it looks like the event isn't even firing for the code to work. Any help is greatly appreciated.

Check out this fiddle.
Here is the snippet. (I have added alert on enter and leave events for testing).
$(document).ready(function() {
$('#site-navigation li').mouseenter(function() {
alert("Enter " + $(this).text());
$(this).find('li.menu-item a').addClass('animated, bounceIn');
//$(this).find('.span').addClass('fadeInUp');
});
$('#site-navigation li').mouseleave(function() {
alert("Leave " + $(this).text());
$('#site-navigation li').find('li.menu-item a').removeClass('animated bounceIn');
//$('#site - navigation li ').find('.span ').removeClass('animated, fadeInUp ');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
<ul id="menu-new-blog-main-2" class="nav-bar clearfix">
<li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168">About Proforma
</li>
<li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169">Proforma.com
</li>
<li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170">Contact Us
</li>
</ul>
</nav>

When adding/removing classes with jQuery, they should be space separated, not comma separated. So:
$(this).find('li.menu-item a').addClass('animated bounceIn');
Also, you shouldn't nest your mouseleave inside your mouseenter functions. Also, you should use $.on instead.
Also, within your event handlers, you aren't accessing your elements correctly. $(this) refers to the element that has been entered or left. Since you've set the mouseenter handler on the <li> elements, $(this).find('li.menu-item a') finds nothing.
Try this:
// It's often best practice to cache jQuery objects
// so you're not looking up the elements multiple times.
var $listItems = $('#site-navigation li');
$listItems.on('mouseenter', function(){
$(this).find('a').addClass('animated bounceIn');
});
$listItems.on('mouseleave', function(){
$(this).find('a').removeClass('animated bounceIn');
});
All of this said, if you're simply trying to have an animation on hover, you can achieve that in CSS only with a single class on your <a> elements. The jQuery might be overkill, here.

$('#site-navigation li'')
should be either
$('#site-navigation li')
or
$("#site-navigation li")
(You have wrong quote marks)
and prevent using selector's repetition, do it like this:
var $el = $('#site-navigation li')
$el.mouseenter(function(){
$(this).find('li.menu-item a').addClass('animated bounceIn');
$(this).find('.span').addClass('fadeInUp');
});
$el.mouseleave(function() {
$(this).find('li.menu-item a').removeClass('animated bounceIn');
}
For further reading: http://www.sitepoint.com/efficient-jquery-selectors/
Good Luck

Multiple hidden menus that open and close using jQuery?

please see this fiddle http://jsfiddle.net/rabelais/tw6sdod9/
$(document).ready(function() {
$('li ul').slideUp(0);
$('.no-js li a').on("click", function() {
$('ul#inner-li ul').slideUp(400);
if ($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
$('#nav li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
$(document).ready(function() {
$('li ul#inner-li-texts').slideDown(0);
$('.no-js li a#texts').on("click", function() {
$('ul ul').slideUp(400);
if ($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="no-js">
<li class="caps">Works
<ul id="inner-li">
<li>blog
</li>
<li>Portraits
</li>
<li>Paintings
</li>
<li>Drawings
</li>
<li>Photography
</li>
</ul>
</li>
<li class="caps"><a id="texts" href="#">Texts</a>
<ul id="inner-li-texts">
<li><a class="current" href="#essay-one">Essay one</a>
</li>
<li>Essay two
</li>
<li>Essay three
</li>
</ul>
</li>
<li class="caps">News
</li>
<li class="caps">Biography
</li>
</ul>
On this fiddle there is a menu with two sub-menus hidden under the 'Works' and 'Text' links.
What I am trying to achieve is this:
On load I want the text sub menu open and the works menu closed.
When the users clicks on either link the sub menu to that link opens or closes.
$(document).ready(function () {
$('li ul').slideUp(0);
$('.no-js li a').on("click", function () {
$('ul#inner-li ul').slideUp(400);
if($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});

Updated the Jsfiddle
HTML
<ul class="no-js">
<li class="caps"><a class="alink" href="#">Works</a>
<ul class="cls" id="inner-li">
<li>blog</li>
<li>Portraits</li>
<li>Paintings</li>
<li>Drawings</li>
<li>Photography</li>
</ul></li>
<li class="caps"><a id="texts" class="alink" href="#">Texts</a>
<ul class="cls" id="inner-li-texts">
<li><a class="current" href="#essay-one">Essay one</a></li>
<li>Essay two</li>
<li>Essay three</li>
</ul>
</li>
<li class="caps"><a class="alink" href="../news.htm">News</a></li>
<li class="caps"><a class="alink" href="../biography.htm">Biography</a></li>
</ul>
Script
$(document).ready(function () {
$('ul.cls').slideUp(0);
$('a.alink').on("click", function () {
$(this).next("ul.cls").slideToggle(400);
});
});
Worked for me
Hope this helps.

Why were you adding a second click handler to #texts? There's one click handler here:
$('.no-js li a').on("click", function () {
//...
});
But then there's another one here:
$('.no-js li a#texts').on("click", function () {
//...
});
So while clicking on any other menu invokes only the first handler, clicking on #texts invokes both. It looks like you only want the first.

You add two times a click-listener for your menu.
I updated the FIDDLE
Just removed the duplicated code and added:
jQuery('#texts').click();

jQuery Dropdown Menu Doesn't Stay Down

I've created a dropdown menu in a site built on Wordpress. It works, but there's a problem; when the mouse hovers over the menu items, the dropdown menu keeps sliding up and down.
HTML
<nav>
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-20">Art Services
<ul class="sub-menu">
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93">Home</li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92">Business</li>
</ul>
</li>
</ul></div>
</nav>
jQuery
$(document).ready(function() {
$(".menu-item").hover(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).find(".sub-menu").slideDown('fast').show(); //Drop down the subnav on click
$(this).hover(function() {
}, function(){
$(this).find(".sub-menu").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover").css('display','block'); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
Thanks!

The ".sub-menu" list is nested inside the 'menu-item', right? So you don't need a to trigger another hover() event. You can trim it down to:
$(document).ready(function () {
$(".menu-item").hover(function () {
//HOVER IN
$(this).addClass("subhover");
$(this).find(".sub-menu").stop().slideDown('fast');
}, function () {
//HOVER OUT
$(this).removeClass("subhover");
$(this).find(".sub-menu").stop().slideUp('slow');
});
});
And add stop() to stop extra running animation when user hover's in and out.
See demo here: jsfiddle.net/AbkXM/

how to set active class to nav menu from twitter bootstrap

I'm new to the twitter bootstrap. Using there navigation menus . I'm trying to set active class to selected menu.
my menu is -
<div class="nav-collapse">
<ul class="nav">
<li id="home" class="active">Home</li>
<li>Project</li>
<li>Customer</li>
<li>Staff</li>
<li id="broker">Broker</li>
<li>Sale</li>
</ul>
</div>
I tried following thing after googling on this that i have to set active class on each page from menu like as--
<script>
$(document).ready(function () {
$('#home').addClass('active');
});
</script>
but problem for above is that i set home menu selected by default. Then it always get selected. Is there any other way to do this ? , or which i can generalize and keep my js in layout file itself?
After executing application my menu looks -
after clicking on other menu item i get following result-
And i added following scripts on Index view and Broker view ---
<script>
$(document).ready(function () {
$('#home').addClass('active');
});
</script>
<script>
$(document).ready(function () {
$('#broker').addClass('active');
});
</script>
respectively.

You can use this JavaScript\jQuery code:
// Sets active link in Bootstrap menu
// Add this code in a central place used\shared by all pages
// like your _Layout.cshtml in ASP.NET MVC for example
$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');
It'll set the <a>'s parent <li> and the <li>'s parent <ul> as active.
A simple solution that works!
Original source:
Bootstrap add active class to li

it is a workaround. try
<div class="nav-collapse">
<ul class="nav">
<li id="home" class="active">Home</li>
<li>Project</li>
<li>Customer</li>
<li>Staff</li>
<li id="demo">Broker</li>
<li id='sale'>Sale</li>
</ul>
</div>
and on each page js add
$(document).ready(function () {
$(".nav li").removeClass("active");//this will remove the active class from
//previously active menu item
$('#home').addClass('active');
//for demo
//$('#demo').addClass('active');
//for sale
//$('#sale').addClass('active');
});

I had the same problem... solved it by adding the code shown below to the Into "$(document).ready" part of my "functions.js" file which is included in every page footer. It's pretty simple. It gets the full current URL of the displayed page and compares it to the full anchor href URL. If they are the same, set anchor (li) parent as active. And do this only if anchor href value is not "#", then the bootstrap will solve it.
$(document).ready(function () {
$(function(){
var current_page_URL = location.href;
$( "a" ).each(function() {
if ($(this).attr("href") !== "#") {
var target_URL = $(this).prop("href");
if (target_URL == current_page_URL) {
$('nav a').parents('li, ul').removeClass('active');
$(this).parent('li').addClass('active');
return false;
}
}
}); }); });

For single-page sites where the menu items simply jump down to other sections of the page, this simple solution works for me:
$('.nav li').on('click', function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
});

You could add a diffrent class onto the BODY tag on each page e.g. on the homepage you could have this:
<body class="nav-1-on">
Then this css:
.nav-1-on .nav-1 a, .nav-2-on .nav-2 a, .nav-3-on .nav-3 a, .nav-4-on .nav-4 a {
// set your styles here
}
The NAV element:
<ul>
<li class="nav-1">Home</li>
<li class="nav-2">Services</li>
<li class="nav-3">About</li>
<li class="nav-4">Contact</li>
</ul>
#
Alternatively you could place a class on the BODY on each page and then grab that via jQuery and add the .active class to the correct nav item based on that tag.

<div class="nav-collapse">
<ul class="nav">
<li class="home">Home</li>
<li class="Project">Project</li>
<li class="Customer">Customer</li>
<li class="Staff">Staff</li>
<li class="Broker">Broker</li>
<li class="Sale">Sale</li>
</ul>
</div>
then for each page you add this:
//home
$(document).ready(function () {
$('.home').addClass('active');
});
//Project page
$(document).ready(function () {
$('.Project').addClass('active');
});
//Customer page
$(document).ready(function () {
$('.Customer').addClass('active');
});
//staff page
$(document).ready(function () {
$('.Staff').addClass('active');
});

<div class="nav-collapse">
<ul class="nav">
<li class="home">Home</li>
<li class="Project">Project</li>
<li class="Customer">Customer</li>
<li class="Staff">Staff</li>
<li class="Broker">Broker</li>
<li class="Sale">Sale</li>
</ul>
</div>
$('ul.nav>li.home>a').click(); // first. same to all the other options changing the li class name

For single page sites, the following is what I used. It not only sets the active element based on what's been clicked but it also checks for a hash value within the URL location on initial page load.
$(document).ready(function () {
var removeActive = function() {
$( "nav a" ).parents( "li, ul" ).removeClass("active");
};
$( ".nav li" ).click(function() {
removeActive();
$(this).addClass( "active" );
});
removeActive();
$( "a[href='" + location.hash + "']" ).parent( "li" ).addClass( "active" );
});

For those using Codeigniter, add this below your sidebar menu,
<script>
$(document).ready(function () {
$(".nav li").removeClass("active");
var currentUrl = "<?php echo current_url(); ?>";
$('a[href="' + currentUrl + '"]').parents('li,ul').addClass('active');
});
</script>

(function (window) {
bs3Utils = {}
bs3Utils.nav = {
activeTab: function (tabId) {
/// <summary>
/// 设置需要展现的tab
/// </summary>
/// <param name="tabId"></param>
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
}
}
window.bs3Utils = bs3Utils;
})(window);
example:
var _actvieTab = _type == '0' ? 'portlet_tab2_1' : 'portlet_tab2_2';
bs3Utils.nav.activeTab(_actvieTab);
<ul class="nav nav-tabs">
<li class="active">
箱-单灯节点
</li>
<li>
箱-灯组节点
</li>
</ul>

$( ".nav li" ).click(function() {
$('.nav li').removeClass('active');
$(this).addClass('active');
});
check this out.

I am using Flask Bootstrap.
My solution is a little bit simpler because my template already receives the option or choice as a parameter from Flask.
var choice = document.getElementById("{{ item_kind }}");
choice.className += "active";
First line, js code gets the element. So, you should identify each of the elements with a id. I'll show an example below.
Second line, you add the class active.
You can see html ids below.
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a id="speed" href="{{ url_for('list_gold_per_item',item_kind='speed',level='2') }}">
<h2>Speed</h2>
</a>
</li>
<li>
<a id="life" href="{{ url_for('list_gold_per_item',item_kind='life',level='3') }}">
<h2>Life</h2>
</a>
</li>
</ul>
</div>

I just added a custom class to the ul section named target-active
<ul class="nav navbar-nav target-active">
<li>HOME</li>
<li>FIND A TRUCK</li>
<li>OUR SERVICES</li>
<li>ABOUT US</li>
</ul>
If each li tags click get a new page from different place or same place, no need to add jquery removeClass function.
Add simple one line jquery code to each page to get your desired result
1st link page
$(function(){
$(".target-active").find("[href='/']").parent().addClass("active");
});
2nd link page
$(function(){
$(".target-active").find("[href=find-truck]").parent().addClass("active");
});
3rd link page
$(function(){
$(".target-active").find("[href=our-service]").parent().addClass("active");
});
4th link page
$(function(){
$(".target-active").find("[href=about-us]").parent().addClass("active");
});