JSFiddle - React, Tailwind, and code Playground

by raskalbass

HTML

<script src="http://preview.na-software.co.uk/Demo/FutureLearning4/jquery.ba-hashchange.min.js"></script>
<script src="http://preview.na-software.co.uk/Demo/FutureLearning4/iscroll.js"></script>
<div id="menu">
    <div class="menu-bars"> <span></span> 
    </div>
</div>
<div class="toc">
    <div class="toc-inner"></div>
</div>
<div id="horizontal">
    <div class="sections">
        <div class="section">
            <div class="content">
                	<h1 style="color:#333;">Section 0</h1>

            </div>
            <div class="arrow arrow-right arrow-right-black"></div>
        </div>
        <div class="section">
            <div class="content">
                	<h1 style="color:#333;">Section 1</h1>

            </div>
            <div class="arrow arrow-left arrow-left-black"></div>
            <div class="arrow arrow-right arrow-right-black"></div>
        </div>
        <div class="section">
            <div id="vertical">
                <div class="sections">
                    <div class="section" style="background:#333333;">
                        <div class="content">
                            	<h1>Section 2.1</h1>

                        </div>
                        <div class="arrow arrow-left"></div>
                        <div class="arrow arrow-down"></div>
                        <div class="arrow arrow-right"></div>
                    </div>
                    <div class="section" style="background:#333333;">
                        <div class="content">
                            	<h1>Section 2.2</h1>

                        </div>
                        <div class="arrow arrow-left"></div>
                        <div class="arrow arrow-up"></div>
                        <div class="arrow arrow-down"></div>
                        <div class="arrow arrow-right"></div>
                    </div>
                    <div class="section" style="background:#333333;">
                        <div class="content">
           ...

CSS

* {
		    margin: 0;
		    padding: 0;
		    border: 0;
		    outline: 0;
		}
		html, body {
		    overflow: hidden;
		    height: 100%;
		    width: 100%;
		}
		#horizontal, #vertical {
		    position: relative;
		    width: 100%;
		    height: 100%;
		    overflow: hidden;
		    /* Prevent native touch events on Windows */
		    -ms-touch-action: none;
		    /* Prevent the callout on tap-hold and text selection */
		    -webkit-touch-callout: none;
		    -webkit-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none;
		    /* Prevent text resize on orientation change, useful for web-apps */
		    -webkit-text-size-adjust: none;
		    -moz-text-size-adjust: none;
		    -ms-text-size-adjust: none;
		    -o-text-size-adjust: none;
		    text-size-adjust: none;
		}
		#horizontal, #vertical {
		    background: #666;
		}
		.sections {
		    box-shadow: rgba(0, 0, 0, .6) 0 0 16px;
		    position: absolute;
		}
		.section {
		    width: 100%;
		    height: 100%;
		    overflow: hidden;
		    position: relative;
		}
		.section {
		    background: #eeeeee;
		}
		.b {
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    width: 40px;
		    height: 40px;
		    background: #fff;
		}
		#horizontal .sections, #horizontal .section {
		    float: left;
		    width:100%;
		}
		.arrow {
		    cursor: pointer;
		    display: block;
		    text-indent: -999em;
		}
		.arrow-left {
		    width: 16px;
		    height: 32px;
		    background: url('http://preview.na-software.co.uk/Demo/FutureLearning4/arrow-left.png') 0 0 no-repeat;
		    position: absolute;
		    bottom: 20px;
		    left: 20px;
		    left: 28px;
		    opacity: .5;
		    z-index: 1000;
		}
		.arrow-right {
		    width: 16px;
		    height: 32px;
		    background: url('http://preview.na-software.co.uk/Demo/FutureLearning4/arrow-right.png') 0 0 no-repeat;
		    position: absolute;
		    bottom: 20px;
		    right: 20px;
		    right: 28px;
		    opacity: .5;
		   ...

JavaScript

// fix for map
			(function (fn) {
			    if (!fn.map) fn.map = function (f) {
			        var r = [];
			        for (var i = 0; i < this.length; i++) r.push(f(this[i]));
			        return r
			    }
			    if (!fn.filter) fn.filter = function (f) {
			        var r = [];
			        for (var i = 0; i < this.length; i++) if (f(this[i])) r.push(this[i]);
			        return r
			    }
			})(Array.prototype);

			var horizontal, vertical;

			var currentSection = 0;

			var firstLoad = true;

			var hashCalledByScroll = false;

			var sectionToScrollTo;


			function yo() {

			    setTimeout(function () {
			        horizontal.refresh();
			    }, 500);
			}

			function pageStart() {

			    horizontal.refresh();

			    if (window.location.hash == '') {

			        showSplash();

			        // after user clicks start they should be reloaded and fall into below

			    } else {

			        //console.log('page accessed with hash - either from load, or clicking start');

			        var nums = location.href.match(/(section)-\d+/g).map(

			        function (x) {
			            return +x.replace(/\D/g, "")
			        });
			        currentSection = nums[0];

			        // NEED TO SHOW A SPLASH LOADING ICON THAT THEN LOADS IN THE SECTIONS FROM XML
			        // AND OTHER STUFF

			        if (currentSection == 0) {
			            loadPage(currentSection);
			            firstLoad = false;
			        } else {
			            var scrollTo = $('#horizontal > .sections > .section').eq(currentSection).attr('id');
			            horizontal.scrollToElement('#' + scrollTo, 1); // this has to be higher than 0 otherwise it doesn't call scrollEnd
			        }

			        yo();

			    }

			}

			function showSplash() {

			    $('body').append('<div class="splash"><div class="content"><h1>SPLASH</h1><button class="start">Start</button></div></div>');

			}

			function hideMenu() {

			    $('.menu-bars').removeClass('open');

			    $('.toc-inner').slideUp('fast', function ()...