We Keep Coding

Nav with JS (double open)

I have a problem with my JS code, this code active a div with megamenu but i can open 2 megamenu at the same time, i need when i have already clicked the current megamenu disappears for the second is active. You have an idea ?
$(function() {
var menuVisible = false;
$('.contentLink').click(function() {
var office = $(this).attr('data-office');
if (menuVisible) {
$('#_' + office).hide();
$(this).removeClass('on');
menuVisible = false;
return;
}
else
{
$('#_' + office).show();
$(this).addClass('on');
menuVisible = true;
}
});
});
<nav>
<ul class="menu-links">
<li><a data-office="events" class="contentLink">Events</a>
<div class="megamenu center" id="_events">
My mega menu events
</div>
</li>
<li><a data-office="articles" class="contentLink">Articles</a>
<div class="megamenu center" id="_articles">
My mega menu articles
</div>
</li>
</ul>
</nav>

Yes, add this line on your click() function to hide all megamenu before :
$('.megamenu').hide();
I've edit your code to simplify it :
$(function() {
$('.contentLink').click(function() {
$('.megamenu').hide();
menu = $(this).next();
if(menu.is(':visible')){
menu.hide();
}else{
menu.show();
}
});
});
Live example

Unexpected behavior with mouseup

When I click on the menu, the menu shows up, but when the pointer is moved away from the menu, it hides after 2-5 seconds.
I want the menu to toggle when clicked, and explicitly hide when I click anywhere else on the page, as seen on this demo.
this fiddle
My code is as follows:
$(document).ready(function() {
$(".MyAccount").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouseup textarea false
$(".submenu").mouseup(function() {
return false
});
$(".myaccount").mouseup(function() {
return false
});
//Textarea without editing.
$(document).mouseup(function() {
$(".submenu").hide();
$(".MyAccount").attr('id', '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MyAllMenu" style='margin: 50px'>
<div class="MyMenu">
<a class="MyAccount">
<span>My Settings</span>
</a>
<div class="submenu" style="display: none;">
<ul class="AllMenuList">
<li>
Dashboard
</li>
<li>
Profile
</li>
<li>
Settings
</li>
<li>
Send Feedback
</li>
<li>
Sign Out
</li>
</ul>
</div>
</div>
</div>

check on FIDDLE . onclick hide/show menu working now . i have added not(".myaccount",".submenu") to mouse up event of document.
$(document).ready(function() {
$(".MyAccount").click(function () {
var X = $(this).attr('id');
if (X == '1') {
$(".submenu").hide();
$(this).attr('id', '0');
}
else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Textarea without editing.
$(document).not(".myaccount",".submenu").mouseup(function () {
$(".submenu").hide();
$(".MyAccount").attr('id', '');
});
});

The problem was that i have a dictionary application that reads any text from the page on hover, and when disabling this feature, every thing works as it should be.
I didn't notice that because I tried on two computers and it happened that i was using this app on both of them.

I have a menu and I don't how to use proprely slideToggle, to slideDown and slideUp when i pressed another li from ul?

I have a function for main menu :
$('.main-menu-left > li > div').each(function(){
if( $(this).next('.sub-menu').length ){
$(this).on('click', function(e){
e.preventDefault();
$(this).parent('li').find('.sub-menu').slideDown('slow');
});
}
});
And a function for slide up menu:
$('body').on('click', function(){
if( $('.sub-menu').is(':visible') ){
$('.sub-menu').slideUp();
}
});
<ul id="menu-left" class="main-menu-left">
<li>
<div class="group-menu"><span>Browse</span><a id="first-li"><p class="menu-text"><i class="icon-small-arrow-gold"></i>Blinds</p></a></div>
<ul class="sub-menu">
<li><span>Explore</span><u>+</u>Wooden Blinds<b>(18 collections)</b>
<ul class="list-products">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<li><a class="title">Next day<p class="details">no Samples of Verticals Blinds</p></a></li>
<li><a class="title">Blackout<p class="details">96 Samples of Verticals Blinds</p></a></li>
<li><a class="title">Pattern<p class="details">120 Samples of Verticals Blinds</p></a></li>
<li><a class="title">Wipeable<p class="details">30 Samples of Verticals Blinds</p></a></li>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<p class="text-explore">&explore all <s>Vertical Blinds</s> </p>
</div>
</div>
</div>
</ul>
</li>
<li><span>Explore</span><u>+</u>Venetians Blinds<b>(20 collections)</b></li>
</ul>
</li>
<li class="hidden-md hidden-sm hidden-xs"><a><p class="menu-text"><i class="icon-small-arrow-gold"></i>Roman</p></a></li>
</ul>
This is html code, for my menu.
It's opening and closing simultaneously. And how can i do to close an li and open other on click ?

You need to bind as different functions so that you can unbind the body click and the fire the slide open, slide closed separately. This is how I would write it:
//Wrap it in a function to avoid conflict. Pass in menu as an object we will use inside
(function ($, menu, undefined) {
//this is the initialiser function
menu.init = function() {
//Store the subNavs as a jQuery array so we can loop them
var subNavs = $('.sub-menu');
//Check there are members in the array
if( subNavs.length > 0 ){
//for each member run the initialiser
$(subNavs).each(function(i, subNav) {
//Select the head of the sub-menu in the DOM. In this case it is a sibling
$(subNav).siblings('.group-menu').on('click', function(e){
//prevent the default action of the click and stop it propagating up to the body
e.preventDefault();
e.stopPropagation();
//test if this is an open menu or closed and send each one to a different handler
if ($(subNav).hasClass('open')) {
menu.clickOff($(subNav));
}
else {
menu.clickOn($(subNav));
}
});
});
}
};
menu.clickOn = function(el) {
//set the element as 'open'
el.addClass('open');
//bind the body click handler
$('body').on('click', menu.clickBody);
//Do the slide down!
el.slideDown('slow');
};
menu.clickOff = function(el) {
//set the element as not 'open'
el.removeClass('open');
$('body').unbind('click', menu.clickBody);
//Do the slide up!
el.slideUp('slow');
};
menu.clickBody = function(e) {
//check if the target is the open menu item itself or part of it
if ($(e.target).closest('.sub-menu.open').length == 0) {
//If not, pass it through to the close handler
menu.clickOff($('.sub-menu.open'));
}
};
//call the initialiser() on page load
menu.init();
}(jQuery, window.menu = window.menu || {}, ""));
You can view the fiddle of this here: http://fiddle.jshell.net/h6Xnb/2/
Hope it helps.

how to call a jQuery function by clicking all link tabs?

I have the following jQuery code:
<script>
var init = function() {
// Resize the canvases)
for (i = 1; i <= 9; i++) {
var s = "snowfall" + i
var canvas = document.getElementById(s);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Now the emitter
var emitter = Object.create(rectangleEmitter);
emitter.setCanvas(canvas);
emitter.setBlastZone(0, -10, canvas.width, 1);
emitter.particle = snow;
emitter.runAhead(60);
emitter.start(30);
}
$("canvas").delay(10000).animate({
opacity: '0',
});
};
</script>
<ul class="nav navbar-nav">
<li class="fst"><span class="icon-menu" /> Home
</li>
<li class="fst"><span class="icon-menu" /> About us
</li>
<li class="fst"><span class="icon-menu" /> Products
</li>
<li class="fst"><span class="icon-menu" /> Franchising
</li>
<li class="fst"><span class="icon-menu" /> News
</li>
</ul>
I want to use this jQuery code to all href tabs.
I tried to use the click function, in that case only the first tab works well, the rest don't work at all.
Can any one explain me?

$('.navbar-nav a').click(function(e) {
e.preventDefault();
var data = $(this).data('href');
// do whatever you need
});

Based off of #Petar Vasilev's answer
http://jsfiddle.net/dHR8V/2/
$('.navbar-nav a').click(function(e) {
e.preventDefault();
debugger;
window.location.href = "someurl";
// do whatever you need
});
When you click a link the handler captures the click event and is executed. You now have control of whatever happens when a link is clicked.

Apply to function to multiple elements

HTML:
<div class="container-fluid">
<div class="sidebar">
<ul class="pills">
<li id="l1"><a id="link1">Lesson 1</a></li> <hr>
<li id="l2"><a href="#" >Lesson 2</a></li> <hr>
<li id="l3"><a href="#" >Lesson 3</a></li> <hr>
</ul>
<div class="span16" id="target">
</div>
Javascript:
$('#l1').click(function(){
$('#target').fadeOut('fast', function(){
$('#target').load("lesson/lesson1.html", function(){
$('#target').fadeIn('slow');
});
});
});
I have 5 links within my webpage, I was wondering if there was anyway to make this one piece of code instead of copy + pasting it multiple times.

$('a.AjaxLink').click(function(){
var url = this.href;
$('#target').fadeOut('fast')
.load(url, function(){ $(this).stop(true, false).fadeIn('slow'); });
});
return false;
});
This code handles the click event for all <a>s with a class of AjaxLink.
In the click handler, it grabs the href, fades out your #target, and performs the AJAX load.
When the AJAX load finishes, it stops the animation (in case the AJAX was faster than the fade), then fades it back in.
Finally, it tells the browser not to take the default action (navigating to the page) by returning false.

Use class instead of id. Select elements using class.
Also you can use .each() method

You could do this with a new jQuery method. Given this HTML:
<a class="hello" href="#">Hello</a>
<a class="goodbye" href="#">Goodbye</a>
<div id="target"></div>
You'd use this code:
jQuery.fn.switchTarget = function( target, href ) {
var $target = $(target);
this.bind( 'click', function(e) {
e.preventDefault();
$target.fadeOut('fast', function() {
$target.load( href, function() {
$target.fadeIn('slow');
});
});
});
return this;
};
$('.hello').switchTarget( '#target', 'hello.html' );
$('.goodbye').switchTarget( '#target', 'goodbye.html' );