Question

I have a function with a event listener that then prompts another function. Before the event listener the function worked perfectly fine. What’s suppose to happen is text is suppose to get loaded into their respective divs, and then when they finish there’s suppose to be an animation function that happens. The animation function causes the text loading to be skipped for some reason.

Here is the JS BIN set up http://jsbin.com/umohoj/11/edit

and here it is on url for the .load (even though they don’t work with the eventlistner)

http://www.klossal.com/b_test.html

here is a working example of just the loads with no animations:

http://www.klossal.com/b_testa.html

here is a working example of the animations with the loads as one function, instead of the animations waiting for the loads to finish, which is what I’d like to have happen because the loads need to finish for some of the calculations in the animations to work correctly.

http://www.klossal.com/b_testb.html

here is the code with the event listener that for some reason prevents the loads from working:

$(".name").click(function() {
  var id = $(this).attr('id');

  $('#photo_850').empty();

  $("<img>", { src: id + ".jpg" }).prependTo("#photo_850");

  $("#name_850").load(id +"_name.txt");

  $("#credentials_850").load(id +"_credentials.txt");

  $("#bio_850_text").load(id +"_bio.txt", function() {
    $("#bio_850_img").css({
    marginTop: ($("#bio_850_text").innerHeight() /2) -   
    ($("#bio_850_img").height() / 2)
    });                                                                     
  });

  $("#edu_850_text").load(id +"_edu.txt", function() {
    $("#edu_850_img").css({
    marginTop: ($("#edu_850_text").innerHeight() /2) -   
    ($("#edu_850_img").height() / 2)
    });                                                                     
  });

  $("#contact_850_text").load(id +"_contact.txt", function() {
    $("#contact_850_img").css({
    marginTop: ($("#contact_850_text").innerHeight() /2) -   
    ($("#contact_850_img").height() / 2)
    });                                                                     
  });






}, function() {




  $("#container_1").animate({
     height: 87 + $("#box_2_850").height() + $("#box_3_850").height() +     
$("#box_4_850").height()
  }, 300);

  $("#container_1_txt").animate({
     "margin-top": $("#container_1_txt").innerHeight() * -1
  }, 300);

    $("#box_1_850").delay(160).animate({
     marginTop: 15
  }, 300);

    $("#box_2_850").delay(330).animate({
     marginTop: 0
  }, 450);  

    $("#box_3_850").delay(450).animate({
     marginTop: 0
  }, 450);  

    $("#box_4_850").delay(570).animate({
     marginTop: 0
  }, 450); 










                 });

Answer 1

After extensive research 😉 I have a solution! Haha

$("#container_1").css({
  'height': $("#container_1_txt").innerHeight()
});

$("#box_1_850").css({
  'marginTop': $("#container_1_txt").innerHeight()
});

$("#box_2_850").css({
  'marginTop': $("#container_1").height()
});

$("#box_3_850").css({
  'marginTop': $("#container_1").height()
});

$("#box_4_850").css({
  'marginTop': $("#container_1").height()  
});


var x1, x2, x3; //Establish Loading Variables 

$(".name").on('click' , function() { 

  x1=0; //Reset the Loading Variables
  x2=0;
  x3=0;

  var id = $(this).attr('id');

  $('#photo_850').empty();

  $("<img>", { src: 'http://www.klossal.com/' + id + ".jpg" }).prependTo("#photo_850"); 

  $("#name_850").load(id +"_name.txt");

  $("#credentials_850").load(id +"_credentials.txt");



  $("#bio_850_text").load(id +"_bio.txt", function() {

    $("#bio_850_img").css({
    'marginTop': ($("#bio_850_text").innerHeight() /2) -   
    ($("#bio_850_img").height() / 2)
    });

    console.log('Loaded'); //Testing Purposes Only
    x1=1; // Loaded
    animate(); // Attempt Animation

  });

  $("#edu_850_text").load(id +"_edu.txt", function() {

    $("#edu_850_img").css({
    'marginTop': ($("#edu_850_text").innerHeight() /2) -   
    ($("#edu_850_img").height() / 2)
    });

    console.log('Loaded'); //Testing Purposes Only
    x2=1; // Loaded
    animate(); // Attempt Animation

  });

  $("#contact_850_text").load(id +"_contact.txt", function() {


    $("#contact_850_img").css({
    'marginTop': ($("#contact_850_text").innerHeight() /2) -   
    ($("#contact_850_img").height() / 2)
    });

    console.log('Loaded'); //Testing Purposes Only
    x3=1; // Loaded
    animate(); // Attempt Animation
  });






});




function animate() {

  if((x1===1) && (x2===1) && (x3===1)){ //Animate if all thre divs are loaded



  $("#container_1").animate({
     'height': 87 + $("#box_2_850").outerHeight() + $("#box_3_850").outerHeight() + $("#box_4_850").outerHeight()
  }, 300);

  $("#container_1_txt").animate({
     'margin-top': $("#container_1_txt").innerHeight() * -1
  }, 300);

    $("#box_1_850").delay(160).animate({
     'marginTop': 15
  }, 300);

    $("#box_2_850").delay(330).animate({
     'marginTop': 0
  }, 450);  

    $("#box_3_850").delay(450).animate({
     'marginTop': 0
  }, 450);  

    $("#box_4_850").delay(570).animate({
     'marginTop': 0
  }, 450); 

 }

}