JSFiddle - React, Tailwind, and code Playground

by roberkules

HTML

<script src="http://php2go.googlecode.com/svn-history/r738/branches/reboot/php2go/library/jquery/jquery.xdomainajax.js"></script>
<link rel="stylesheet" href="http://nightlifebratislava.com/demos/verzia4/css/complete.css">
<script src="http://nightlifebratislava.com/demos/verzia4/js/complete.js"></script>
<div id="bgDiv"></div> 




<!--This will be the loading DIV that will show until the background has loaded-->
<div id="table" class="preloader">
    <div id="cell">
        <div id="loadDiv">
        <img src="http://nightlifebratislava.com/demos/verzia4/img/logo.jpg" width="300" height="112" /><BR />
        <img src="http://nightlifebratislava.com/demos/verzia4/img/ajax-loader2.gif" width="32" height="32" />
        </div>
  </div>
</div>


<!--This will be the main content viewport-->
<div id="table-holder">
<div id="table-eight">
    <div id="cell">
        <div id="main-content-fiftyfive">

        </div>
  </div>
</div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#table {
    background-color: #000000;
    display: table;
    height: 100%;
    width: 100%;
}

#cell {
    display: table-cell;
    vertical-align: middle;
}

#loadDiv {
    width: 300px;
    margin: 0 auto;
    text-align: center;
}

JavaScript

var root_path = 'http://nightlifebratislava.com/demos/verzia4/';

var images = {
    'bg': 'img/map_bg_1680.jpg',
    'menu_bg': 'img/menu-background.png',
    'btn1': 'img/button01.png',
    'btn2': 'img/button02.png',
    'btn3': 'img/button03.png',
    'btn4': 'img/button04.png',
    'btn5': 'img/button05.png',
    'btn6': 'img/button06.png',
    'all_events': 'img/all_events_button.png',
    'all_venues': 'img/all_venues_button.png',
    'event_finder': 'img/event_finder_button.png',
    'today': 'img/today-button.png',
    'tomorrow': 'img/tomorrow-button.png',
    'other_day': 'img/some-other-day-button.png',
    'choose': 'img/choose-button.png',
    'search': 'img/newsearch-button.png',
    'results': 'img/showresults-button.png'
};

(function($) {

    var defer = $.Deferred();

    var promise = $.when.apply($, $.merge([defer.promise()], $.map(images, function(value, key) {
        var d = $.Deferred(),
            img = $('<img />').attr('src', root_path + value).load(function() {
                console.log('loaded img', key, value);
                d.resolve();
            }).get(0);

        if (img.complete) {
            console.log('cached img', key, value);
            d.resolve();
        } else {
            window.setTimeout(function() {
                if (!d.isResolved()) {
                    console.log('timeout img', key, value);
                    d.resolve();
                }
            }, 15000); // e.g.: 15 seconds timeout
        }

        return d.promise();
    })));

    $(function() {

        $(".ajax").colorbox();

        $.get(root_path + 'index2.html', function(data) {
            console.log('loaded html', 'index2.html');
            $('#main-content-fiftyfive').html(data.responseText || data);
            defer.resolve();
        });

        promise.done(function() {
            console.log('images and main html loaded');

            // from here on it's basically just your code
           ...