can't get event listener working

Question

I have an event listener that I'm trying to get working and can't seem to get it to run. I have a onclick set up that switches the classes of a div prompting a webkit transition. When that transition ends I want jquery to load an external page into the div but it doesn't ever load it. This is the js I have set up

<script type="text/javascript">
function fullscreen_slider_load() {
var fullscreen = document.getElementById("fullscreen");

function fullscreen_done1() {
    console.log("done called");
    fullscreen.removeEventListener("webkitTransitionEnd", fullscreen_done1);
    fullscreen.addEventListener("webkitTransitionEnd", fullscreen_done2);
    $(function fullscreen_load() {
    $('#fullscreen')
       .html('<img src="http://www.klossal.com/loader.gif"/>')
       .load('http://www.klossal.com/portfolio/space_fullscreen.html');
});


function fullscreen_done2() {
    fullscreen.removeEventListener("webkitTransitionEnd", fullscreen_done2);

};
</script>

I'm not sure why it's not loading, but any help I can get on this would be greatly appreciated.

Answer 1

This part of your code makes no sense to me and does not look consistent with what you said you wanted to happen. Also the code you posted doesn't appear to have proper bracing:

$(function fullscreen_load() {
$('#fullscreen')
   .html('<img src="http://www.klossal.com/loader.gif"/>')
   .load('http://www.klossal.com/portfolio/space_fullscreen.html');
});

If I understand this right, it will set up a document.ready() event handler for loading new content into #fullscreen. I do not think that's what you want here.

I also don't see anywhere where you are adding the event listener that triggers fullscreen_done1() and I don't see any reason for the fullscreen_done2() event listener as it isn't used here.

If you just want the fullscreen object to load some new content when the first CSS transition is done and you have registered the event listener that will call fullscreen_done1() somewhere else, you can use this (fixed indentation and bracing):

<script type="text/javascript">
function fullscreen_slider_load() {
    var fullscreen = document.getElementById("fullscreen");

    function fullscreen_done1() {
        console.log("done called");
        fullscreen.removeEventListener("webkitTransitionEnd", fullscreen_done1);
        fullscreen.addEventListener("webkitTransitionEnd", fullscreen_done2);
        $(fullscreen)
           .html('<img src="http://www.klossal.com/loader.gif"/>')
           .load('http://www.klossal.com/portfolio/space_fullscreen.html');
    }

    function fullscreen_done2() {
        fullscreen.removeEventListener("webkitTransitionEnd", fullscreen_done2);
    }
}
</script>

If you were trying to do something more involved than this provides, then please clarify what else you were trying to do after the first transition finishes.

P.S. When you don't indent the code under function declarations, it makes it very easy to misunderstand the intent of your code.

Your code also won't work in Firefox or Opera (non-webkit browsers that support CSS3 transitions).