We Keep Coding

How to remove class after it been added

So I need a little bit of help. I'm playing around with addClass and removeClass and I can't seem to remove a class after it's set. What I basically want is:
When someone clicks an h3, it adds to its parent div class
When someone clicks a div with added class, class needs to be removed
First step I got out of way and it's working
$(function(){
$('div h3.itemTitle').on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
Now when I define:
$(function(){
$('div.active').on('click', function(){
$(this).removeClass('active');
});
});
It does nothing, as if it doesn't see classes. It sets only those set in onload...
Help, anyone?

The child element "h3.itemTitle" already had a click event listener on it and the parent can't actually capture the click event.
Your $('div.active').on('click', ...) never actually fires because you click the h3 not the div.
I recommend this approach: http://jsfiddle.net/c3Q6Q/
$('div h3.itemTitle').on('click', function () {
// saves time not to write $(this).parent() everything so i store in a _parent var
var _parent = $(this).parent();
if (_parent.hasClass('active')) {
_parent.removeClass('active');
} else {
_parent.addClass('active').siblings().removeClass('active');
}
});

Try
$('body').on('click','div.active', function(){$(this).removeClass('active');});
Instead of
$('div.active').on('click', function(){$(this).removeClass('active');});

I would go with this way:
$('div').on('click', function(e){
var el = e.target;
if($(el).is('h3') && $(el).hasClass('itemTitle')){
$(this).parent().addClass('active').siblings().removeClass('active');
}else if($(el).is('div') && $(el).hasClass('active')){
$(this).removeClass('active');
}
});

Not sure why every is talking about elements generated outside of the initial DOM load.
Here's a JSFiddle showing that it works: http://jsfiddle.net/H25bT/
Code:
$(document).ready(function() {
$('.itemTitle').on('click', function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
/* $('.parent').on('click', function() {
$(this).removeClass('active');
}); */
$('.clicky').on('click', function() {
$(this).parent().removeClass('active');
});
});
The reason it's not working for you is that if you put the removeClass click event on the parent div itself, clicking on the child text causes a conflict with which click handler to use, and it won't work out. Code works fine if you don't assign the click to the parent div itself.

Javascript Multiple menu. If i click on one ul i want the other to close. (toogle). It keeps being open, how to fix?

Hopefully you can help me out with my problem.
Been annoying be for quite some time now.
Trying to make my menu work.
When i click on a block i want it to open, and close the other tab "if" another one is open.
Best regards jfb
HERE IS JSFIDDLE
http://jsfiddle.net/3ZWZu/
INCLUDES HTML, CSS, JS(jQuery)
$(document).ready(function() {
$('.ac-menu .topLevel').click(function(e) {
e.preventDefault();
if($('.ac-menu .topLevel ul').hasClass('open') === true){
$('.ac-menu .topLevel ul').removeClass('open');
$('.ac-menu .topLevel ul').addClass('closed');
$('.ac-menu .topLevel ul').slideUp(300);
}
if($(this).next('ul').hasClass('closed') === true){
$(this).next('ul').removeClass('closed');
$(this).next('ul').slideDown(300);
$(this).next('ul').addClass('open');
}
});
});

Presuming you use JQuery, try this one:
$(document).ready(function() {
$('.ac-menu .topLevel').click(function(e) {
e.preventDefault();
$('.ac-menu ul.open').removeClass('open').addClass('closed').slideUp(300);
$(this).next('ul.closed').removeClass('closed').slideDown(300).addClass('open');
});
});
Basically the idea behind this is that with ul.open or ul.closed selector you will only select the uls which have that specific class set. If there are none - then JQuery will return an empty set and will not apply those operations to anything - that is the way JQuery works. Furthermore, it allows you to chain your commands, like shown in my example.

I think you need that jsfiddle
i add topLevel class to li instead of a href
$(document).ready(function() {
$('.ac-menu li.topLevel').click(function(e) {
e.preventDefault();
var isClosed = $(this).find('ul').hasClass('closed');
$('.ac-menu li.topLevel ul').removeClass('open').addClass('closed').slideUp(300);
if( isClosed){
$(this).find('ul').addClass('open').removeClass('closed').slideDown(300);
}
});
});

Hide div with javascript when no link

I have a website into modx cms, I'm trying to remove or hide a div when into that div there is no tag.
How can I do this?
I tried this but no luck:
jQuery(function($) {
if ($(".pages a")) {$(".pages").remove();}
});
< div class="pages">[+previous+] [+pages+] [+next+]< /div>

If you are trying to check if the <a> tag exists inside the div then you could try:
if($(".pages a").length == 0) {
// links don't exist
$(".pages").remove();
} else {
// links exist
}

another shorter answer would be
$('.pages:not(:has(>a))').css("display", "none");
click to see...
reference jQuery.not()

I'm not sure if this is what you want:
$(function($) {
$(".pages").each(function(){
if(!$(this).find('a').length)
$(this).remove();
});
});

Hide it this way, so that you can show them up when there are links:
if ($(".pages a").length == 0) {
$(".pages").hide();
}
And when the links are there, or you making an AJAX call, do this:
$(".pages").show();

jquery selector help. Everything but the specified selector

I have the following function to open an overlay menu:
$('.context-switch').click(function() {
$(".context-switch-menu").toggle();
});
To hide the menu, I would like the user to be able to click on any area outside ".context-switch-menu"
I am trying with :not() but with no success..

$('body').click(function(e) {
if ($(e.target).hasClass('context-switch')) {
return;
}
$(".context-switch-menu").hide();
});
$('.context-switch').click(function() {
$(".context-switch-menu").toggle();
return false;
});

The reason this can be difficult is because of event bubbling.
You can try something like this:
$('.context-switch').click(function(e) {
e.stopPropagation();
$(".context-switch-menu").toggle();
});
$(".context-switch-menu").click(function(e){
e.stopPropagation();
});
$("body").click(function(e){
$(".context-switch-menu").hide();
});
The e.stopPropagation() prevents the click event from bubbling to the body handlers. Without it, any click to .context-switch or .context-switch-menu would also trigger the body event handler, which you don't want, as it would nullify the effect of the .context-switch click half the time. (ie, if the state is hidden, and then you click to show, the event would bubble and trigger the body handler that would then hide the .context-switch-menu again.)

Without testing, would something like this work?:
$('.context-switch').click(function() {
$(".context-switch-menu").show();
});
$(document).click(function() {
$(".context-switch-menu").hide();
});
Instead of using document, 'html' or 'body' may work as well.

$(document).on('click', function(e) {
if (e.target.className !='context-switch-menu') {
$(".context-switch-menu").hide();
}
});

Just an idea here, based on what what others have suggested in the past:
$(document).click(function(e){
//this should give you the clicked element's id attribute
var elem = $(e.target).attr('classname');
if(elem !== 'context-switch-menu'){
$('.context-switch-menu').slideUp('slow');
//or however you want to hide it
}
});

try this, we don't want to call a function when you clicked on the element itself, and not when we click inside the element. That's why we need 2 checks.
You want to use e.target which is the element you clicked.
$("html").click(function(e){
if( !$(e.target).is(".context-switch-menu") &&
$(e.target).closest(".context-switch-menu").length == 0
)
{
alert("CLICKED OUTSIDE");
}
});
Live fiddle: http://jsfiddle.net/Xc25K/1/

jquery conditional logic for currentpage

I'm using jQuery for a vertical site navigation menu, all links within site. I have the basic functionality working, but am at a loss as to the correct if-else to accomplish the following:
As the code stands, the submenu items are always initially hidden, but I want them to start shown if the user-selected li or one of its child lis is assigned the class currentpage.
The code as it stands is:
(function(){
$('li:has(ul)')
.click(function(event){
if (this == event.target || $(event.target).parent()[0] == this) {
if ($(this).children('ul').is(':hidden')) {
$(this)
.css('list-style-image','url(minus.gif)')
.children('ul').slideDown();
}
else {
$(this)
.css('list-style-image','url(plus.gif)')
.children('ul').slideUp();
}
}
})
.css({
cursor:'pointer',
'list-style-image':'url(plus.gif)'
})
.children('ul').hide();
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image':'none'
});
});
Hopefully someone can put me on the right track.
Bob McLeod

I want them to start shown if the user-selected li or one of its child lis is assigned the class currentpage.
How about afterwards doing:
$('.currentpage').parents('ul').show();

I would make a showMenuItem() function and call it in both places where you want to show a menu item.
$(function() { $('.currentpage').each(function() {
if ($(this).parents().filter('ul').is(":hidden")) {
showMenuItem($(this).parents().filter('ul'));
} else {
showMenuItem(this);
}
}});