We Keep Coding

jQuery remove class of parent of parent

I'm working on a little vertical accordion and I ran into a snag.
Upon clicking a div, that div opens up to fill the screen... I'm trying to reverse this upon clicking the "close button" div, but it's not working for me.
Here is my code... https://codepen.io/Finches/pen/mpyKrL
$(document).ready(function() {
$('.shutter').click(function() {
if (!$(this).hasClass('shutterExpanded')) {
$(this).addClass('shutterExpanded');
$('.wrapper').addClass('shutterOpen');
$(this).children(".shutterContent").fadeIn(400).addClass("show-content");
$(this).children(".shutterBG").addClass("bg-opacity");
}
});
$('.close-btn').click(function() {
$(this).parent().parent().removeClass("shutterExpanded");
$('.wrapper').removeClass('shutterOpen');
$(this).parent(".shutterContent").fadeOut(250).removeClass("show-content");
$(this).parent().siblings(".shutterBG").removeClass("bg-opacity");
});
});
Any help here?

Try following code. Actually it is happening for you clicking each time on ".shutter". Because when you clicking on close button it is also inside of ".shutter" div that why it is collapsing then again opening.
$(document).ready(function() {
$('.shutter').click(function() {
if (!$(this).hasClass('shutterExpanded')) {
$(this).addClass('shutterExpanded');
$('.wrapper').addClass('shutterOpen');
$(this).children(".shutterContent").fadeIn(400).addClass("show-content");
$(this).children(".shutterBG").addClass("bg-opacity");
}
});
$('.close-btn').click(function(e) {
e.stopPropagation(); // Key line to work perfectly
if ($(this).parent().parent().hasClass("shutterExpanded")) {
$(this).parent().parent().removeClass("shutterExpanded");
};
$('.wrapper').removeClass('shutterOpen');
$(this).parent(".shutterContent").fadeOut(250).removeClass("show-content");
$(this).parent().siblings(".shutterBG").removeClass("bg-opacity");
});
});

Animation in javascript works every other time

I get a dropdown-toggle (id="actions") with image (id=imgAction) in html. I added script in javascript
$(document).ready(function() {
var el = document.getElementById("actions");
if (el.addEventListener)
el.onmouseover = tadaAnimation;
function tadaAnimation() {
$(imgAction).toggleClass('animated tada');
}
});
and it works but every second time. Why it doesn't work every time I hover the dropdown-toggle.

Main problem area it that you are binding only mouseover event handler. You also need to attach mouseout event handler
Every time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter. So I would recommend you to use mouseenter instead of mouseover
As you are using jQuery bind event using it. I would suggest you to use .hover()
$(document).ready(function () {
function tadaAnimation() {
$("#imgAction").toggleClass('animated tada');
}
$("#actions").hover(tadaAnimation, tadaAnimation)
});

$(document).ready(function() {
var el = document.getElementById("actions");
if (el.addEventListener)
el.onmouseover = tadaAnimation;
el.onmouseout = tadaAnimation; // add this line, should works
function tadaAnimation() {
$(imgAction).toggleClass('animated tada');
} });

Basic Popup window not working properly

Having a small problem with a popup window I am trying to create.
When a button(anything with a certain ID) is clicked it should open(this seems to work) but then when it is open I want it so if you click on anything but the main popup window it should close.
But it does not seem to close when I click on the .overeverythingCover which has width: 100% and height: 100%;
http://jsfiddle.net/mnW7U/
$('#activatePopOver, .overeverythingCover').click(function() {
popUpOverEverything();
});
function popUpOverEverything(data) {
// if exists | remove it
if ($('.overeverythingCover').length) {
$('.overeverythingCover').empty();
$('.overeverythingCover').removeClass();
$('body').css('overflow', 'scroll');
console.log("hehe");
} else {
$('body').append('<div class="overeverythingCover"</div>');
$('.overeverythingCover').append('<div class="overEverything"</div>');
$('body').css('overflow', 'hidden');
$('.overEverything').html(data);
};
}
Thank you!

You can't use "click" handler to an element which not exist yet. You can use .live :
$(function() {
$('#activatePopOver, .overeverythingCover').live('click', function() {
popUpOverEverything();
});
function popUpOverEverything(data) {
if ($('.overeverythingCover').length > 0) {
$('.overeverythingCover').remove();
$('body').css('overflow', 'scroll');
} else {
$('body').append('<div class="overeverythingCover"</div>');
$('.overeverythingCover').append('<div class="overEverything"</div>');
$('body').css('overflow', 'hidden');
$('.overEverything').html(data);
// Just close when you click outside the popup
$('.overEverything').click(function(event){
event.stopPropagation();
});
};
}
});
See the Fiddle : http://jsfiddle.net/mnW7U/3/

use a delegate event listener such as:
$(document).on("click", '#activatePopOver, .overeverythingCover', function() {
popUpOverEverything();
});
Like The Wobbuffet mentioned, the issue is that the .overerverythingCover div isn't on the page at the time you're binding your event.
NOTE: This will only work with jQuery 1.7+
for older versions you can use .delegate()

The problem was that you are binding a click event to an element that not yet exists on the page.
I have updated your fiddle with a simple to understand example: http://jsfiddle.net/mnW7U/2/
I created a popDown() function that gets bound with the following function when the button is clicked:
$('.overeverythingCover').click(function() {
popDown();
});

The problem is this:
$('body').append('<div class="overeverythingCover"</div>');
It is being appended after the click event is added to it. Try adding it to the dom (none-js in the html) then messing with it's display property.

jQuery slideToggle breaking when you press a link inside a div

I have having a little trouble with the slideToggle when I have a link inside of the slideup panel. What I am trying to do is have the ability to press a button and a div will slide up and display related posts and once you press another or the related project button on the page it will close the toggle and reveal another effect that I am using (100% width and heigh popup). The script I am using works perfect but I am running into one problem. When I click a related post inside of the slideToggle it causes the div to slide down instead of going to the page that represents the link.
Here is my code below and an example http://jsfiddle.net/K8vBg/15/.
$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('#menu')
// bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
event.preventDefault();
event.stopPropagation();
// if the menu is visible slide it up
if (menu.is(":visible"))
{
menu.slideUp(1000);
}
// otherwise, slide the menu down
else
{
menu.slideDown(400);
}
});
$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
event.preventDefault();
if (menu.is(":visible"))
{
menu.slideUp(400);
}
});
})
If I change .projectHolder-small,#projectSpecs in the .not function to just read #menu then I am able to click the link inside of the panel but the panel will not slideDown when I click another button on the page. The popup from #project specs will just go over the panel instead of closing it.
Is there something I am missing in my script?
Thank you

Try changing the $(document).not().click() to:
$(document).click(function(event){
if(!$(event.target).closest('.projectHolder-small,#projectSpecs').length){
if (menu.is(":visible")){
menu.slideUp(400);
}
}
});
I am using closest() instead of the usual is(), so that even clicking on the children elements of '.projectHolder-small,#projectSpecs' the panel won't close.

I rewrote the script to the following and it works perfect
$(document).ready(function () {
var $frm = $('#menu').hide();
var $bts = $("#menu-trigger").on('click', function () {
var $this = $(this)
$bts.filter(".selected").not(this).removeClass('selected');
$this.toggleClass('selected');
if ($this.hasClass('selected') && $frm.is(':visible')) {
$frm.stop(true, true).slideUp(function () {
$(this).slideDown()
});
} else {
$frm.stop(true, true).slideToggle();
}
});
$bts.filter('.selected').click();
$("#projectSpecs, #menuButton").click(function () {
$bts.filter(".selected").removeClass('selected');
$frm.slideUp();
});
});

How can I write this function on mouse hover a div?

How can I write this function so that when the mouse is resting over the div .resting it will trigger the call. Here is the code:
$(document).bind('mousemove', function() {
resetActive()
});
I want it to call the resetActive when the mouse is resting over a desired div .resting. How can I write the code?

$('.resting').mouseenter(resetActive);
Or, to be clean and better practice,
$('.resting').on('mouseenter', resetActive);
// and later
$('.resting').off('mouseenter', resetActive);
And to get the event:
var resetActive = function(e) {
// do something...
}

$(".resting").mouseover(function() {
resetActive();
});