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 multiple click event in one click event

i used this below function...for each id i call one function..i call only one click function at a time so i need to use single click function for this..
.append($('<a>',{'class':'list-header','id':'call1','name':'name','value':'1'}).append('1'))
.append($('<a>',{'class':'list-header','id':'call2','name':'name','value':'2}).append('2'))
...
...
...
.append($('<a>',{'class':'list-header','id':'call7','name':'name','value':'7'}).append('7'))));
$('#call1').click(function(){
});
$('#call2').click(function(){
});
...
...
...
$('#call7').click(function(){
});
i have use seven function above..i will call only one function at a time. so i need to do it in a single function..
how to do it?

You can simply use the class for that, which you already have :
$(document).on('click', '.list-header', function(){
alert(this.id);
// Your code goes here
});
Also, you need to use on method here, since the links are dynamically added here.

you can try
$('#call1, #call2, #call3, #call4,#call5,#call6,#call7').
click(function(event){
if($(event.target).attr('id')=='call1'){
/* specific code for call1*/
} else if($(event.target).attr('id')=='call2'){
/* specific code for call2*/
------
});

Attach click event for all objects by class selection.
$(document).ready(function() {
$(".list-header").click(function(clkEvt) {
var ClickedAtag = $(clkEvt.target);
alert(ClickedAtag.id);
});
});
ClickedAtag is the element that clicked by the user. You can use this object to do any unique function for the clicked element.

Is it possible to bind a handler to a jQuery effect?

I would like to call function when slideUp or slideDown are performed on an element. Is this possible?
Something like:
$('#panel').on('slideUp', function() { open--; });
$('#panel').on('slideDown', function() { open++; });
Update: The problem is that there are a ton of slide calls (e.g.: $().slideUp()) all over the page, within ajax responses, hash link clicks, etc.. I was hoping to bind to the slide itself somehow rather than add code to each calling function.

You cannot bind to an event since there is no such.
But you can pass a handler that will be called after animation is finished
$('#panel').slideUp(function() { ... });
http://api.jquery.com/slideUp/

If you really want to do this, you can use custom events and your own little plugin, something like this:
$.fn.mySlideToggle = function() {
this.slideToggle();
this.trigger('mySlideToggle');
}
$('div').on('mySlideToggle', function(){ console.log('hey') });
$('button').on('click', function(){ $('div').mySlideToggle(); });
Here's a little demo (check console): http://jsbin.com/asejif/2/edit
In your case it is redundant though, since you can use the callback that the slide events provide, but it might be useful for other things...

javascript - for loop to make events

I'm using a script where I need to make multiple events to make a popup appear.
I tried this, but it doesnt work:
for (i=0;i<=storingen;i++)
{
$("#storing" + i).click(function(){ centerPopup(); loadPopup(); });
}
The output should be:
$("#storing0").click(function(){ centerPopup(); loadPopup(); });
$("#storing1").click(function(){ centerPopup(); loadPopup(); });
$("#storing2").click(function(){ centerPopup(); loadPopup(); });
$("#storing3").click(function(){ centerPopup(); loadPopup(); });
etc.
But the amount of divs with the id #storing(number here) is variable, so i wanted to make this, but it doesnt work...
I get the storingen variable from php:
<script type="text/javascript">aantalstoringen('.$aantalstoringen.')</script>
which i pick up in the js file like this:
function aantalstoringen(storingen){
storingen=storingen;
}
I did an alert(storingen), which traced the right number, so that is ok.
COuld it be that the for loop doesnt work because that isnt in the aantalstoringen function, but in another function:
$(document).ready(function() {
I used this tutorial to make the javascript:
http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/#popup1
and the script you get is this:
http://yensdesign.com/tutorials/popupjquery/popup.js

Use the [name^="value"] selector instead:
$('[id^="storing"]').click(function(){ ... });
Basically, it's saying "find all elements whose ID begins with 'storing'."
If you need it more explicit, you can test the id inside a each() to apply better filtering. e.g.
$('[id^="storing"]')
// make sure all IDs end in a number
.each(function(i,e){
if (/\d$/.test(e.id)) {
// now that we only have ids that begin with storing and end in
// a number, bind the click event
$(e).click(function(e){ ... });
}
});

You don't create dozens of event listeners that call the same handler. You create one listener on a higher level in the DOM and make it react only if the ID of the target matches the pattern.
This is why libs like jQuery are teaching kids bad manners... -.-

It could be any number of things. It would help if you showed us more of the code, like all of the aantalstoringen function.
The following should work:
function aantalstoringen(storingen) {
$(document).ready(function() {
for (i=0;i<=storingen;i++) {
$("#storing" + i).click(function(){ centerPopup(); loadPopup(); });
}
});
}
That said, this is a really bad way to do this. I would have each of your elements also include class="storing". Then you don't have to get the number of objects from the server:
$(document).ready(function() {
$(".storing").click(function(){ centerPopup(); loadPopup(); });
});

First you give a class name to the div like class="popupDiv". Then you try something like this
$('.popupDiv').live('click', function(){
// var id = $(this).attr('id'); By doing so you will get the current id of the div too.
centerPopup();
loadPopup();
});

As Brad correctly said, you don't have to know the amount of such elements, you can just iterate over all element having id starting with something.
So your code would be:
$(document).ready(function() {
$('[id^="storing"]').click(function() {
centerPopup();
loadPopup();
});
});

jquery that just waits

I normally set up my javascript code to have a function. But due to the fact that the application generates most of the HTML and javascript calls from a VB6 application I would like to create a jQuery function that is more like a listener. So for example if I have a td tag that has the class 'gridheader1' I would like the jQuery to wait for it to be clicked.
I'm assuming that I would use the bind... But I'm getting javascript errors with it... If you can offer suggestions on where my code is wrong that would be great.
$('.gridheader1').bind('click', function()
{
alert('hi I got clicked');
});
Again this just has to sit out there on the main .js file. It isn't attached to any functions. Please let me know.
Thanks

you want
$('.gridheader1').bind('click', function(){
alert('hi I got clicked');
});
note the dot at the start of selector - it means class

// static tags
$(function(){ // DOM ready
$('.gridheader1').click(function()
{
alert('gridheader1 clicked');
});
});
// or if the tag is loaded via ajax use 'live'...
$(function(){ // DOM Ready
$('.gridheader1').live('click', function()
{
alert('gridheader1 clicked');
});
});
// or if you already have a function defined that you want to call, you can pass in the function instead of using an anonymous function.
function alertAboutStuff(){
alert('gridheader1 clicked');
}
$(function(){
$('.gridheader1').click(alertAboutStuff);
// $('.gridheader1').live('click', alertAboutStuff); // for tags loaded via ajax
});