My preload script doesn't work completely
<p>I made a preloader to load in some content with tables and custom scrollbars while a Loading Div covers the area. After that is finished, the load div should disappear.</p>

<p>For some reason the preload disappears before the content is finished loading.</p>

<p>If you try out this <a href="http://nightlifebratislava.com/demos/verzia4/" rel="nofollow">demo</a> and <em>click the button at the very top</em> that says <strong>venues</strong>, you might notice that it doesn't completely wait for everything to be configured before the load div dissapears. Some people may even see the old content for a second or two.</p>

<p>Here is the code I used below. I included comments as well.</p>

<pre><code>jQuery(document).delegate(".topCanBeActive", "click", function( e ) {
    e.preventDefault();

    // this just handles the css class of buttons
    jQuery(".topCanBeActive").removeClass("topActive");

    // this just handles the css class of buttons
    jQuery(this).addClass("topActive");

    var pageToLoad = '';
    switch( this.id ) {
        case 'all_events_button':
            $('#partypreloader').fadeIn('fast', function() {
                pageToLoad = 'events.html';
                configureEvents();
            });
            break;
        case 'all_venues_button': // this is the venues button
            // fade in 'loading' div
            $('#partypreloader').fadeIn('fast', function() {
                pageToLoad = 'venues.html';

                // configure tables etc
                configureVenues();
            });
            break;
        case 'event_finder_button':
            pageToLoad = 'search.html';
            break;
    }
    if( '' !== pageToLoad ){
        // just in case, I added the same function
        // to load the preload div here
        $('#partypreloader').fadeIn('fast', function() {
            // load the chosen content in desired div
            $('#whole-ajax-content-one').load( pageToLoad, function() {
                // fade out the preload div
                configureFadeOut();
            });
        });
    }
});
</code></pre>

<p>Here's the configureEvents function, notice I also used some fake loading to cover up the issues.</p>

<pre><code>function configureEvents() {
    window.setTimeout(function() {
        $('#whole-ajax-content-one').load('events.html', function() {

            // configure table
            $("#myTable").tablesorter({
                headers: {
                    0: { sorter: false }
                },
                widgets: ['zebra']
            });

            window.setTimeout(function() {
                // Configure scrollbar
                $('.scroll-pane').jScrollPane();

                // Configure table again - I had issues with this
                // so I did it twice
                $("#myTable").tablesorter({
                    headers: {
                        0: { sorter: false }
                    },
                    widgets: ['zebra']
                });

                // Set CSS class for buttons
                jQuery("#all_events_button").addClass("topActive");
                jQuery("#today_button").addClass("timeframeActive");
            }, 150);
        });

        // Preload div fades out
        $("#partypreloader").fadeOut("slow");
    }, 200);
}
</code></pre>

<p>I revised the code to make the preload work to such levels that the code is as complicated as it is. If you spot out something that seems off, please let me know. Thanks a lot everyone :)</p>
