We Keep Coding

Opening and closing navigation

I have a short JS code that should add and remove a class. The thing is, it adds a class but it never removes it. I can't find the problem. It should add and remove the class by clicking the same button.
$('.hamburger').on('click', function(){
if (!$(this).hasClass('opened')){
$(this).addClass('.opened');
$('.pop').css({'width' : '550px'});
$('.main').css({'margin-right' : '550px'});
}
else{
$(this).removeClass('opened');
$('.pop').css({'width' : '0'});
$('.main').css({'margin-right' : '0'});
}
});

try to use toggleClass method of Jquery it will add or remove class .
$('.hamburger').on('click', function(){
$(this).toggleClass("main");
});

You needn't add the dot to the class string you pass to $(this).addClass so instead it should be:
$(this).addClass('opened');

Remove the "." in $(this).addClass('.opened'); ==> $(this).addClass('opened');
For the style class, you can also use toggleClass (http://api.jquery.com/toggleclass/)

Its because you were adding '.opened' instead of opened.
maybe look at the toggle function to clean up your code. also there's no point refetching the element on each run.
hopefully, this gives you a good idea on how to clean up and reduce repeating yourself.
const pop = $('.pop'),
main = $('.main'),
ham = $('.hamburger');
ham.on('click', toggleHamburger);
function toggleHamburger() {
toggleMainStyles(!ham.hasClass('opened') ? '550px' : 0);
}
function toggleMainStyles(value = 0) {
pop.css({ width: value });
main.css({ marginRight: value });
ham.toggleClass('opened');
}
.hamburger {
color: blue;
}
.opened {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hamburger">ham</div>
<div class="main"></div>

Create Toggle Button Using jQuery

I want to use just ONE button to control Opening and Closing an Off-Canvas Menu. So I created a Button with OpenButton class which open menu, after clicking, I remove OpenButton class and add CloseButton class, These all work like a charm, But When I call Click Event on CloseButton It doesn't work, What is the problem ?
This is my code :
$('.OpenButton').click(function() {
$(this).addClass('CloseButton');
$(this).removeClass('OpenButton');
});
$('.CloseButton').click(function() {
alert('Close');
});

Since you're adding the class dynamically, you need to use event delegation to register the same with the event handler mechanism,
$(document).on('click', ".CloseButton", function() {
alert('Close');
});
Hope this helps!

That is because the click event is bound at runtime. Since .CloseButton does not exist when the code is executed, no click event will be bound to it. One solution is to use $(document).on('click', '.CloseButton', function() {...}) to do that, but that is considered resource intensive and unnecessarily heavyhanded.
I would recommend that you do not change the class of the button instead. If you want to modify the style or appearance of the button when it's open/close, you can do it by adding classes instead of swapping classes, for example:
$('.button').click(function() {
$(this).toggleClass('is-open');
});
In this case, you can you also store the state of the button in jQuery's data object. That will abstract reading the state of an object from the DOM based on it's class:
$(function() {
$('.button').click(function() {
// Store state
if ($(this).data('is-open')) {
$(this).data('is-open', false);
alert('closing!');
} else {
$(this).data('is-open', true);
alert('opening!');
}
// Toggle class
$(this).toggleClass('is-open');
$('.toggleTarget').toggleClass('is-hidden');
});
});
.is-hidden {
display: none;
}
.button {
background-color: steelblue;
color: #fff;
display: inline-block;
padding: 10px;
}
.button.is-open {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Toggle
<div class="toggleTarget is-hidden">I am content that is toggled.</div>

add and remove class on same button or element

I'm looking for a way to add and remove class on the same button. So far this is my work in progress. The concept is when I click on the menu button it shows the menu. When I tap on the menu button again. The menu hides
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').addClass('show');
});
});

To achieve this you can use .toggleClass() like so:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
JsFiddle example
toggleClass
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
For more information about this function check here
Hope this helps!

You should use $(this) and toggleClass
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$(this).toggleClass('show');
});
});
which will add the class back to the specific element that was clicked.
http://api.jquery.com/toggleclass/
http://www.learningjquery.com/2007/08/what-is-this

Try this:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});

DEMO
$('.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
Try this way

You can use .add() method with .toggleClass():
$(document).ready(function() {
$('button.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').add(this).toggleClass('show');
});
});
.portfolio-contact-form-wrap {
color:blue;
}
.show {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-portfolio">Button</button>
<div class="portfolio-contact-form-wrap">
<h1>contact form</h1>
</div>

Use toggleClass('show')
It will add the class on one click and remove the class on the second click.

<script>
$(document).ready(function () {
$('button.toggle-portfolio').on('click', function (e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
</script>

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: Function not executing

I'm trying to execute a function twice, and I can't figure out what I'm doing wrong. JSFiddle here: http://jsfiddle.net/g6PLu/3/
Javascript
function truncate() {
$(this).addClass('closed').children().slice(0,2).show().find('.truncate').show();
}
$('div').each(truncate);
$('.truncate').click(function() {
if ($(this).parent().hasClass('closed')) {
$(this).parent().removeClass('closed').addClass('open').children().show();
}
else if ($(this).parent().hasClass('open')) {
$(this).parent().removeClass('open').addClass('closed');
$('div').each(truncate);
$(this).show();
}
});
The problem is on line 15, where I call $('div').each(truncate); the second time. For some reason it doesn't seem to be executing. Any ideas?

I think you are overcomplicating a simple task. I'd take advantage of the classes to show/hide stuff with CSS (you're adding the classes but not using them!).
Check out this simpler version:
Relevant CSS
.closed p { display: none; }
.closed p:nth-child(2) { display: block; }
JS
$('div').addClass('closed');
$('.truncate').click(function() {
$(this).closest('div').toggleClass('closed');
});
http://jsfiddle.net/g6PLu/9/

When you call show, the <p> changes to <p style="display: block; "> that's why, you need to call hide or remove that style part
is this the spected behavior?
else if ($(this).parent().hasClass('open')) {
$(this).parent().removeClass('open').addClass('closed').children().hide();
$('div').each(truncate);
$(this).show();
}