We Keep Coding

I want to execute one code after finish another code

I have write a jQuery CLICK event, in that event there are two codes which will be executed after click the event but I want to finish the first code execution first then after finish it start execution of the second code. But now they both are executing at the same time when the CLICK event is triggered.
The first code is about slideUp, so I want to complete the slideUp first then start the execution of second code. Here is the Fiddle
I have attached the code and image both here, please check and help me if you can.
$(".team-item-area").on('click', function(){
$(this).siblings().find('.team-item-right-para').slideUp();
$(this).find(".team-item-right-para").slideToggle(function(){
var check = $(this).is(":visible");
if(check == true)
{
$(this).parents('.team-item-area').siblings().find('img').hide();
$(this).parents('.team-item-area').find("img").fadeIn();
} else {
$(this).parents('.team-item-area').find("img").show();
$(this).parents('.team-item-area').siblings().find('img').fadeIn();
}
});
})[enter image description here][1]

According to the documentation the slideup function has a second argument that is the function that will be called once the animation is complete. The first argument is the duration of the slide. You can set as you want (400 is the default)
$(this).siblings().find('.team-item-right-para').slideUp(400, function {
... code to execute after the slide is complete...
});

Use slideToggle method inside this you can right anything after completing
http://api.jquery.com/slidetoggle/

Either use the solution #BenM mentioned or use somethin like this:
$(this).find(first operation)
.delay(1)
.queue(function (next) {
$(this).find(second operation);
next();
});

jQuery callback function accumulating

I wrote some code for a custom confirm box that calls a function when confirm button (yes-button) is pressed and passes another function as a parameter and I bind it to 2 different button clicks with different functions as a parameter. For example:
$('#button1').click(function() {
callFunction(function() { alert("test"); });
});
$('#button2').click(function() {
callFunction(function() { alert("test2"); });
});
function callFunction(callback) {
//code to display custom confirm box
console.log(callback);
$('.confirm-box .yes-button').click(function() {
callback();
});
}
Everything happens as expected, confirm box appears and on confirm button click I get a callback function executed and it alerts "test" (or "test2" depending on which button called the confirm box). The problem arises when I click button1 that sends a function that alerts "test", then instead of confirming I cancel that (nothing happens as expected), and then click button2 that passes alert("test2") as a callback function. Now once I press the yes-button instead of alerting just "test2", I get both "test2" and "test" alerts even though that console.log I wrote logs just the function that alerts "test2" at the time of that button2 click. It seems like these callback functions get stacked somewhere, but I don't understand where and why.

The .click() function can add more than one handler to an element, and I think that's what's happening here. Try this:
// ...
$('.confirm-box .yes-button').unbind('click').click(function() {
callback();
});
This removes any previous click handler before applying the new one.

When you execute the code:
$('.confirm-box .yes-button').click(function() {
callback();
});
you are binding an event handler to the .yes-button element. If you run that code twice, it will have two events bound to it. And so on.
One solution is to use .one instead, so that the event handler will be removed after the first time it is fired:
$('.confirm-box .yes-button').one("click", function() {
callback();
});
This of course has issues if there are two confirm boxes open simultaneously or if there are two .yes-button elements, but for a simple use case it works fine.

What is happening is that each time a button is clicked the callFunction method is executing. It runs through that code block and applies an event listener to the $('.confirm-box .yes-button') button. So clicking your button N times will apply the click listener N times as well. One solution is to store the function in a variable.
Not sure what the end goal is, but this is one solution.
Another solution would be to remove buttons event listeners each time.
var functionToCallOnYes = function() {};
$('#button1').click(function() {
functionToCallOnYes = function() {
alert("test");
};
});
$('#button2').click(function() {
functionToCallOnYes = function() {
alert("test2");
};
});
$('.confirm-box .yes-button').click(function() {
console.log(functionToCallOnYes);
functionToCallOnYes();
});

You can do it by setting an identity by classes,
var button = $('.confirm-box .yes-button');
$('#button1').click(function() {
button.removeClass("b").addClass("a");
});
$('#button2').click(function() {
button.removeClass("a").addClass("b");
});
button.click(function() {
if($(this).hasClass("a")){
callBackForButton1();
} else {
callBackForButton2();
}
});
It is a bad practice to stack up the event handler for a single element.

Yes, extra callbacks are getting stacked up. In $('button1').click(f), the function f will be called with no parameters every time button1 is clicked. In this case, f is callFunction-- a function that itself attaches a new handler to any .confirm-box .yes-button element each time it's invoked. So on the Nth click, you should have N-1 alerts.
To make things like this easier, you can refer to functions by name in JavaScript. So if you had function test() { console.log("test"); };, you could write $(".confirm-box").click(test) just once and every click on a .confirm-box from then on would print test to the console.
Usually if you have callbacks whose sole purpose is to call a callback, you can just remove that callback.

Run a function when a div is scrolled and also on page load?

I have a function that runs when you scroll a div
this.$something.scroll(function () {
// Do soemthing
});
How can I run a function when you scroll a div and also on page load? Ive done it with the following but there must be a cleaner way to write it?
this.$something.scroll(function () {
myFunc();
});
$(document).ready(function () {
myFunc();
});

You can pass the function name as the callback to the event handlers. When the event is triggered the callback function is called with the event object as parameter.
this.$something.scroll(myFunc);
// ^^^^^^
$(document).ready(myFunc);

How can you execute a javascript function after another one is completed?

I want that a javascript function executes after another one is completed. This is my code:
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
window.addLoadEvent = function() {
$('#popuprel1').show();
}

You want to use the callback for fadeOut. It calls the second function once the initial animation is complete.
See http://api.jquery.com/fadeOut/
Basically - you want to do something like this:
$(window).load(function(){
$('#dvLoading').fadeOut(2000, function() {
$('#popuprel1').show();
});
});

It's because the second onload replaces the first one. Follow this.
For multiple events on onload, use addLoadEvent

jquery ajax call and hide function

I have the following script that works ok on the first page load. I am then calling a page again and the hide function does not work, and certain formatting is lost..
Any ideas. Is there a way using jquery live or delegate for instance.
$(document).ready( function() {
// Hide all subfolders at startup
$(".php-file-tree").find("UL").hide();
// Expand/collapse on click
$(".pft-directory A").click( function() {
$(this).parent().find("UL:first").slideToggle("medium");
if( $(this).parent().attr('className') == "pft-directory" ) return false;
});
});
How do I execute find("UL").hide(); again on ajax call.

In the ajax success handler just execute the below line
$(".php-file-tree").find("UL").hide();