Question

I’m fading in an element with jquery:

$("#bookcase_container").fadeOut( function(){
  $("#bookcase_container").html("<canvas id='shelf_canvas'></canvas>").fadeIn();
});
loadCanvasEditor();

And then in the canvas editor I try to set the height of the canvas element like so:

function loadCanvasEditor(){
  document.getElementById("shelf_canvas").height = "900px";
}

But it I get an error stating that shelf_canvas is null. I’ve also tried using pure jquery, but then I get no results (no error messages or altered resolution):

$("#shelf_canvas").height(900);

I’ve also tried using .ready() and onload for shelf_canvas as well as $(document), but still no results. This code works fine if I don’t use the fadeOut/fadeIn. What could be going wrong?

Answer 1

The fadeOut animation you are using is an async operation. Therefore the HTML you are inserting into the DOM after the animation is finished is not accessible when you are trying to call your loadCanvasEditor function. If you incorporate this call into to the callback things should work as expected:

$("#bookcase_container").fadeOut( function(){

  $("#bookcase_container").html("<canvas id='shelf_canvas'></canvas>").fadeIn();
  loadCanvasEditor();

});

BONUS possibility: Use the promise-interface that jQuery-animations expose (useful in more complex cases with lots and lots of elements):

$("#bookcase_container").fadeOut( function(){

  $("#bookcase_container").html("<canvas id='shelf_canvas'></canvas>").fadeIn();

}).promise().done(function(){

   loadCanvasEditor();

});

See a demo fiddle for that approach.

Docs on both cases are available on the page for .fadeIn()