We Keep Coding

How to make a link on my footer trigger a pop up?

I would like to trigger a pop up form after clicking the 4th link on my footer.
This current method works with another button on my site but not with the link in my footer.
Why is this?
HTML:
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About Me</li>
<li>Contact</li>
</ul>
JS:
document.getElementById('contact-link-footer').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";
$('body').css('overflow','hidden')
});

You are using an id-selector but you have a class :)
'contact-link-footer' is at the moment the class of your link and not the id

You can try the next: Change document.getElementById(...) by document. getElementsByClassName(...)[0] , the zero is to get the first element of array of elements that have same class in the DOM
document.getElementsByClassName('contact-link-footer')[0].addEventListener('click', function() {
console.log('Click in Contact');
document.querySelector('.bg-modal').style.display = "flex";
$('body').css('overflow','hidden');
});

Stop propagation on specific element

I have a drop down menu within a header using Bootstrap data-toggle="dropdown". When you click the drop down button, a list should appear. When you click the header, the content should slide up and down.
The problem is, when I click the drop down button it also triggers the header. The usual answer here is e.stopPropagation but when I use that, it also stops the drop down menu from appearing.
How can I prevent the dropdown button from triggering the header?
HTML
<div id="top">
<div class="dropdown">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
Show List
</button>
<ul class="dropdown-menu">
<li>Some Item</li>
<li>Some Item</li>
<li>Some Item</li>
</ul>
</div>
</div>
<div id="content" class="collapse">
This is the actual content
</div>
JS
// CANNOT USE BOOTSTRAP DATA-TARGET !
$('#top').click(function() {
$('#content').collapse('toggle')
})
$('button').click(function(e) {
//e.stopPropagation();
})
I have prepared a fiddle that illustrates this issue.

You should instead filtering regarding event.target of click on #top element:
$('#top').click(function(e) {
if($(e.target).closest('button[data-toggle], .dropdown-menu').length) return;
$('#content').collapse('toggle')
})
-jsFiddle-

You can do this as well.
// CANNOT USE BOOTSTRAP DATA-TARGET !
$('#top').click(function(e) {
if(e.target.type != "button"){
$('#content').collapse('toggle')
}
})
$('button').click(function(e) {
//e.stopPropagation();
})

Another way to do it, use e.target to determine if the clicked element is #top:
$('#top').click(function(e) {
if(e.target.id=="top"){
$('#content').collapse('toggle')
}
})
$('button').click(function(e) {
//e.stopPropagation();
})

How to add class to next parent li?

I want to add a specific class to next parent element (li) of link. For example I have active class on 'Home" tab but same time I also need 'new-class' to 'About' li.
Here is my markup
This is working for static class but when active class on link added dynamically, This is not working.
I tried this but not able to make working
$('li a').click(function() {
if ($(this).hasClass('active')) {
$(this).parent().next().addClass('active');
}
else{
$(this).parent().next().removeClass('active');
}
});
<ul>
<li><a class="active" href="">Home</a></li>
<li class="new-class">About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>

I think this is what you want :
$('li a').click(function(e) {
e.preventDefault();
$(this).closest('ul').find('a.active').removeClass('active');
$(this).closest('ul').find('li.new-class').removeClass('new-class');
$(this).addClass('active');
$(this).parent().next().addClass('new-class');
});
.active{ color:red; }
.new-class a { color:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="active" href="">Home</a></li>
<li class="new-class">About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>

There is next() function
$(this).parent().next().addClass('active');
However this is not what you looking for. This adds a class to li. If you want to add the class to a inside that , you need
$(this).parent().next().find("a").addClass('active');

$(this).parent().next().addClass('active');
This will first get to the li of the anchor being clicked.
Then, it will select the next element in order which be the 2nd li in case the first li is clicked and then, we add the class to that element.

If I understand you correctly (on clicking a having class active add class new-class to subsequent li?), this should work:
$('.tab a').click(function() {
if ($(this).hasClass('active')) {
$(this).parent().next().addClass('new-class');
} else{
$(this).parent().next().removeClass('new-class');
}
});

After link's first click, make link unclickable, wait for transition end + 1s, then make link clickable again

I have a main menu.
The sub-menu opens when the link of any of the PARENT <li> that have children is clicked.
At this point, a class moves-out is added to the main menu and a CSS transition is started.
After the transition ends, the sub-menu is displayed.
The sub-menu contains the clicked <li> (if clicked again will take us back to the main menu) and it's children.
Here, my goal is to disable the click event on the parent <li> for 1 second,
then after this 1 second give it back the ability to be clicked so we can go back to the main menu.
An example of the navigation would be :
<ul class="main-nav">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>
<span>PARENT</span>
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
And so on...
</ul>
</li>
</ul> <!-- .main-nav -->
The only way that worked for me was to hide/show the PARENT when the main menu has the moves-out class added to it like so :
$('.subnav-trigger').on('click', function(event) {
event.preventDefault();
if ($('.main-nav').hasClass('moves-out')) {
var $this = $(this);
$this.hide();
setTimeout(function(){
$this.show();
}, 1000);
}
}
I've tried A LOT off things, this is the only one that is near to my goal.
Instead off $this.hide(), $this.off('click') is working
but inside the setTimeout what ever I do to regain the click doesn't work.
Any help would be greatly appreciated.
NOTE : I want this to prevent fast click/re-click. Don't forget the transition ;)
Thanks again in advance for any help.
SYA :)

Try setting pointer-events on the li tag and resetting it after 1 second.
$('.subnav-trigger').on('click', function(event) {
event.preventDefault();
var $this = $(this);
$this.parent().css("pointer-events","none");
if ($('.main-nav').hasClass('moves-out')) {
$this.hide();
setTimeout(function(){
$this.show();
$this.parent().css("pointer-events","auto");
}, 1000);
}
});

Here's a way using a recursive function that enabled the click handler, disables it on click, enables the transitionend event, adds your class that enables the transition, then re-enables the function. Enabled a 3s transition to slow it down for the example.
var $lis = $('li'),
clicker = function() {
$lis.on('click', function() {
$lis.off('click');
$(this).on('transitionend', function() {
clicker();
}).addClass('color');
});
}
clicker();
li {
transition: background 3s;
}
li.color {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>

More like a debounce problem, you might want to take a look at it if you have not used it before, it will help a lot in design you code.
For the following example, I added moves-out to ul for testing, you can check the console.log to see the result. To use in your app don't forgot to remove it (moves-out) from the <ul...>
<ul class="main-nav moves-out">
function debounce() {
if ($('.main-nav').hasClass('moves-out')) {
console.log("Clicked - click event Disabled..");
$(this).off('click');
setTimeout(function() {
$(".subnav-trigger").on('click', debounce);
console.log("click event enabled!");
}.bind(this), 1000);
}
};
$(".subnav-trigger").on('click', debounce);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="main-nav moves-out">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>
<span>PARENT</span>
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
And so on...
</ul>
</li>
</ul>
<!-- .main-nav -->

Updating class of list item - jQuery

Pretty simple problem but it's been bugging me for almost an hour now. Basically, I want to update list classes onClick, then remove the class again when another item is clicked.
<nav>
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li class="current-menu-item">
<a class="scroll" href="#top"><span>Home</span></a>
</li>
<li class="">
<a class="scroll" href="#featured_work_anchor"><span>Featured Work</span></a>
</li>
<li class="">
<a class="scroll" href="#about_contact_anchor"><span>About/Contact</span></a>
</li>
</ul>
</div>
</nav>
jQuery
$(document).ready(function() {
$('#menu-main-menu li').on('click', changeClass);
});
function changeClass() {
$('#menu-main-menu li').removeClass('current-menu-item');
$(this).addClass('current-menu-item');
}
JSFiddle, ready to go. I appreciate any help. Perhaps I'm approaching the problem wrong or maybe missing something silly ?

The only problem I could see is the removeClass() function, either don't pass any argument so that all the classes in the li are removed or pass the class names to be removed.
function changeClass() {
$('#menu-main-menu li').removeClass('current-menu-item');
$(this).addClass('current-menu-item');
}
Demo: Fiddle(Also in the fiddle you forgot to include jQuery)

You need to pass the element that is being set as current:
$(document).ready(function() {
$('#menu-main-menu li').on('click', function(){
changeClass($(this));
});
});
function changeClass(element) {
$('#menu-main-menu li').removeClass('current-menu-item');
element.addClass('current-menu-item');
}
updated fiddle: http://jsfiddle.net/mw5sgcLn/4/