Develop Reference

Remove class on body does not work with pagepiling.js

I've made a website using pagepiling.js, this script adds the class 'active' on the section which is in the viewport. Now I want add a class on my body when my section1 is active like this:
$(document).ready(function() {
if ($('#section1').hasClass("active") === true) {
$('body').toggleClass("one");
}
});
It is working well (the class is added on the body) but when I scroll my section1 does not have the class active because I am now on section2, the class on the body is not removed. How can I fix it? I also tried:
$(document).ready(function() {
if ($('#section1').hasClass('active')) {
$('body').addClass('one');
}
else {
$('body').removeClass('one');
}
});
But it is not working.

You have to put your condition inside scroll event because you should check every time the user scroll :
$('body').on('scroll', function() {
if ( $('#section1').hasClass("active") ){
$('body').toggleClass("one");
}
});
Hope this helps.

Now I want add a class on my body when my section1 is active
You actually don't need to.
PagePiling.js adds a class to the body element for you with the form pp-viewing-page2. You can check it in your DOM inspector in the demo page.
But if you still want to add a class, just use the callbacks the plugin provides, like this:
$('#pagepiling').pagepiling({
afterLoad: function(anchorLink, index){
if(index == 1){
$('body').addClass('one');
}else{
$('body').removeClass('one');
}
}
});

jquery - How to return default height toogle automaticly by clicking another place

Here, I have a working toogle code,so I have added some code that when click another place also return to default height(32px),but not working.
var toggled = false;
$('.dropdown-toggle').click(function() {
$('.changeHeight').css('height', toggled ? '32px' : '65px');
toggled = !toggled;
});
$(document).click( function(){ // if click another place will set default height
$('.changeHeight').css('height','32');
});

The element .dropdown-toggle is part of the document. Click on it will fire both event handlers. When it's clicked, you must prevent the documents event handler from being notified with stopPropagation(). Like this:
$('.dropdown-toggle').click(function(e) {
e.stopPropagation();
$('.changeHeight').css('height', toggled ? '32px' : '65px');
toggled = !toggled;
});

Are you missing "px"?
$(document).click( function(){ // if click another place will set default height
$('.changeHeight').css('height','32px');
});
You could also add a class on toggle, and remove it again. See more info on toggleClass in jQuery
$('.dropdown-toggle').click(function() {
$('.changeHeight').toggleClass("toggled");
});

Why does this click function not work after clicking a second item?

I'm having some issues figuring out why my click function isn't working.
I have a JSFiddle for it here: http://jsfiddle.net/adbakke/ve9oewvh/
My html breaks down like so (condensed for posting here):
<div class="projectDisplay"></div>
<div class="flex-grid project-list">
<div id="project1" class="project">
<div class="projectImg"><img></div>
<div class="projectDesc">
<h3>title</h3>
<p>Description</p>
<span>click to close</span>
</div>
</div>
Now my JQuery gets all that HTML under "project" like so:
$('.project').click(
function() {
var newGet = $(this).html();
Then there's a bunch of functions (that all work beautifully) to add this data to <div class="projectDisplay"></div>, and replace it all if there's already something there.
Then when I want to close the project by hitting <span> click to close</span>, it works fine when I click the first item, but if I click a second before closing it does not work.
Edit: Click one image, then (before hitting close), click a second image in the project list, and then attempt to click "close project".
My close function looks like so:
$('.closeMe').click(
function() {
$('.projectDisplay').fadeOut(500);
}
);
I have tried putting it both inside and outside the scope of my click function itself. Neither will allow me to have it close upon clicking a second time to open up a different project.
What am I missing?
Update:
Updated JSFiddle base so you can tell the different sections are different.

Instead of:
$('.closeMe').click(
Which will bind the click event for all .closeMe elements present in the DOM at that moment
use:
$(document).on('click', .closeMe,
Which will bind the click event to body and then delegate it to .closeMe, meaning that it will fire for .closeMe elements added dynamically even after the initial binding.
i.e
$(document).on('click', '.closeMe',
function() {
$('.projectDisplay').fadeOut(500);
}
);
Try it at http://jsfiddle.net/L4Lmf6zy/1/

You should delegate the click event on .clickMe because you are adding the button dynamically on every opening of a project.
Working example here http://jsfiddle.net/ve9oewvh/3/
So you should use
$(document).on('click', '.closeMe',
function() {
$('.projectDisplay').fadeOut(500);
}
);

The problem is you are removing all child nodes when you click on another project and you are not rebinding the click function. You need to rebind the click event with the new HTML.
$(document).ready( function () {
// Hide the Description, Close Button and Link to Site
$('.projectDesc a, .projectDesc p, .projectDesc span').hide();
// What happens when you click the project button
$('.project').click(
function() {
var newGet = $(this).html();
if ($('.projectDisplay').is(':empty')) {
// Add the description section if empty
$(newGet).hide().appendTo('.projectDisplay').fadeIn(500);
$('.projectDisplay .projectDesc a, .projectDisplay .projectDesc p, .projectDisplay .projectDesc span').fadeIn(250);
} else {
// If description is not empty, fade out, empty and add new project description
$('.projectDisplay').fadeOut(500, function (){
$('.projectDisplay').empty().append(newGet).fadeIn(250);
$('.projectDisplay .projectDesc a, .projectDisplay .projectDesc p, .projectDisplay .projectDesc span').fadeIn(250);
$('.closeMe').click(
function() {
$('.projectDisplay').fadeOut(500);
}
);
})
};
$('html, body').animate({
// scrollTop: $(".projectDisplay").position().top
scrollTop: $(".projectDisplay").offset().top - 200
}, 750);
$('.closeMe').click(
function() {
$('.projectDisplay').fadeOut(500);
}
);
});
});
// End of Project Click Function

two onClick() events happening simultaneously?

What I am expecting from my code is this:
When clicking a button, a menu of options appears at the pointer position. Any following click, whether on a menu item or elsewhere in the browser, should close the menu. Clicking on a menu item closes the menu, but not clicking anywhere else. When I uncomment $(document.body).one('click', function() {menu.remove()} the menu never appears in the first place, and I suspect that I somehow have it arranged so that the click to bring up the menu actually closes the menu as well. Here is the code:
render : function() {
this.$el.html(this.template(this.model.toJSON()));
var that = this;
if (this.model.attributes.memberType != 'OWNER') {
this.$('.memberTypeSelector').button({
icons : {
secondary : "ui-icon-triangle-1-s"
}
}).click(function(event) {
that.showPermissions(that.model, event, that);
});
...
},
showPermissions : function(member, event, view) {
var levels = ['ADMIN', 'CONTRIBUTOR', 'VIEWER'];
var menu = $('<ul>');
$.each(levels, function() {
if(member.attributes.memberType !== this) {
var item = $('<li>').appendTo(menu);
$('<a>').attr('href', '#').text(this).appendTo(item).click(function() {
menu.remove();
view.changePermission(member, this.text, view);
});
}
});
menu.menu().css({
position : 'absolute',
left : event.clientX,
top : event.clientY
});
$(document.body).append(menu);
/*$(document.body).one('click', function() {
menu.remove();
});*/
}
Thanks in advance for your help.

If you delay binding to the document by 10ms, that should be enough time for the event to propagate to the body so that it doesn't immediately close the menu, then the next click on the menu will result in the body click handler triggering.
setTimeout(function(){
$(document.body).one('click', function() {menu.remove();});
},10)
you can't use stop propagation or anything similar because that would also stop the 2nd click on the menu.

While delaying the second event binding will probably work 99.999% of the time, I can't help but feel that nagging 'what if' for the one time that something lags and it doesn't work.
This question provides a more satisfactory (at least to me) solution

jQuery text() change on toggle()?

I want to make a script that is changing toggle link text depending on others element visibility.
So while #form is visible I want the #form-container a text to be "Hide...", and while it's hidden I want the text to be "Show...".
I've tried this line - if($('#form').is(":visible")){ another way: if($('#form').is(":visible") == "true"){ - but it also doesn't work.
What's wrong? How to change text every time another item is toggled?
$('.toggle').click(
function()
{
$('#form').slideToggle();
if($('#form').is(":visible")){
$('#form-container a').text("Hide form container");
}
else {
$('#form-container a').text("Show form container");
}
});
Thanks.

It'll always be visible while animating, you can check the visibility in the .slideToggle() callback so it checks when it finishes animating, like this:
$('.toggle').click(function() {
$('#form').slideToggle(function() {
$('#form-container a').text(
$(this).is(':visible') ? "Hide form container" : "Show form container"
);
});
});

You can use toggle on the form element.
$("#form").slideToggle(
function () {
//Hide
},
function () {
//Show
}
);
source: http://api.jquery.com/toggle/