JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<div id="pane0" class="pane">This is pane: 0</div>
<div id="pane1" class="pane">This is pane: 1</div>
<div id="pane2" class="pane">This is pane: 2</div>
<div id="pane3" class="pane">This is pane: 3</div>
<div id="pane4" class="pane">This is pane: 4</div>
<div id="pane5" class="pane">This is pane: 5</div>
<div id="pane6" class="pane">This is pane: 6</div>
<div id="pane7" class="pane">This is pane: 7</div>

CSS

body {
    overflow:hidden;
}

.pane {
    top: 0px;
    position: fixed;
}

.active_pane {
    z-index: 100;
}

.asdf {
    font-family: monospace;
    white-space: pre-wrap;
}

#pane0 {
    background-color: #0096FF;
}

#pane1 {
    background-color: #00F0FF;
}

#pane2 {
    background-color: #00FFD2;
}

#pane3 {
    background-color: #00FF5A;
}

#pane4 {
    background-color: #F0FF00;
}

#pane5 {
    background-color: #FFB400;
}

#pane6 {
    background-color: #FF3C00;
}

#pane7 {
    background-color: #9600FF;
}

JavaScript

// display widget on touch devices
var WFP = {};

WFP.mouse_position = function (mode, event, id) {
    'use strict';
    var offset = $(id).offset(), pageX, pageY;
    
    pageX = (WFP.get_display_type() !== 'desktop' ? event.originalEvent.touches[0].pageX: event.pageX);
    pageY = (WFP.get_display_type() !== 'desktop' ? event.originalEvent.touches[0].pageY: event.pageY);
    
    if (mode === 'top') {
        return pageY - offset.top;
    }
    if (mode === 'left') {
        return pageX - offset.left;
    }
    return '';
};

WFP.get_view_port = function () {
    var viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight,
        viewportoffsetleft = self.pageXOffset,
        viewportoffsetdown = self.pageYOffset;
    
    return {"width": viewportwidth, "height": viewportheight,
            "offsetdown": viewportoffsetdown, "offsetleft": viewportoffsetleft};
};

WFP.get_display_type = function () {
    var el = document.createElement('div'),
        touch_device = false,
        type;
    
    // feature detection for touch devices
    el.setAttribute('ongesturestart', 'return;');
    if (typeof el.ongesturestart === 'function') {
        touch_device = true;
    }
    
    // if statment to determine device
    if (touch_device === false) {
        type = 'desktop';
    } else if (touch_device === true
               && WFP.get_view_port().width > 970
               && WFP.get_view_port().height > 970) {
        type = 'tablet';
    } else {
        type = 'phone';
    }
    
    return type;
};

// get veiwport and make current div cover the whole viewport
WFP.page_rejigger = function () {
    var active_pane_number = parseInt($('.active_pane').data('pane_num'), 10);
    $('body').data('transitioning', true);
    $('.pane').each(function () {
        var current_pane_number = parseInt($(this).data('pane_num'), 10);
        
        
        $(this).css({"width": WFP.get_view_port().width + 'px',
                     "height":...