JSFiddle - React, Tailwind, and code Playground

by tronne

HTML

<script src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://torontographic.com/wordpress/mouseSwipe/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://raw.github.com/HumbleSoftware/Flotr2/master/examples/examples.css">

<div data-url="demo-page" data-role="page" id="demo-page">
    <div data-role="header" data-theme="b">
        <h1>Swipe left or right</h1>
        <a href="#left-panel" data-icon="carat-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open left panel</a>
        <a href="#right-panel" data-icon="carat-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open right panel</a>
    </div><!-- /header -->
    <div role="main" class="ui-content">
		 <!-- contenido tabs -->
		<div data-role="tabs" id="tabs">
		   <!-- menu tabs -->
		  <div data-role="navbar">
			<ul>
			  <li><a href="#one" data-ajax="false" id="home">Home</a></li>
			  <li><a href="#two" data-ajax="false" id="home2">Stats</a></li>
			  <li><a href="#three" data-ajax="false" id="home3">Chat</a></li>
			</ul>
		  </div>
		   <!-- /menu tabs -->
		   <!-- tab 1 -->
		  <div id="one" class="ui-body-d ui-content">
             <p>Bugs:</p>
                <p> 1) The panels aren't shown correctly, for some reason they are taking the height of the content inconrrectly and a black are is show3 behind bug 2 </p>
              
               <p>2) In the chat tab, there's a fixed footer and is not shown in mobile devices, but it does in desktop</p>
              
               <p>3) If you swipe with the mouse to the right or left, sometimes the text gets selected when I have css to deny it</p>
                           
		  </div>
		   <!-- /tab 1...

CSS

/* Swipe works with mouse as well but often causes text selection. */
		/* We'll deny text selecton on everything but INPUTs and TEXTAREAs. */
		#demo-page :not(INPUT):not(TEXTAREA) {
		    -webkit-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    -o-user-select: none;
		    user-select: none;
		}
		
        .ui-mobile .ui-page { 
            min-height: 100% !important; /* min. height for modern browser */
            height:auto !important; /* important rule for modern Browser */
            /*height:100% !important;  min. height for IE */
    /*left: 0;     top: 0;    bottom: 0;*/
        }

JavaScript

var tabselected = 'home';
var tabselected2 = 'home';

$(document).ready(function () {

    $('#home').trigger('click');
        
    //With this function I get the id of the active button/tab
    $("#tabs").on('click','a',function(event) {
        tabselected = $(this).attr('id');
        tabselected2 = $(this).attr('id');
   
    });
    
    
            $(document).on("swiperight swipeleft", "#demo-page", function (e) {
                // We check if there is no open panel on the page because otherwise
                // a swipe to close the left panel would also open the right panel (and v.v.).
                // We do this by checking the data that the framework stores on the page element (panel: open).
                if ($(".ui-page-active").jqmData("panel") !== "open") {
                    if (e.type === "swipeleft") {
                        
                        //if you swipe then it send a click to the next tab
                        if(tabselected == 'home') {
                            $('#home2').trigger('click');
                            tabselected = 'home2';
                        }
                        else if(tabselected == 'home2') {
                            $('#home3').trigger('click');
                            tabselected = 'home3';
                        }
                        else {
                            $("#right-panel").panel("open");
                            tabselected = 'home3';
                        }
                        
                        
                    } else if (e.type === "swiperight") {
                        
                        if(tabselected2 == 'home3') {
                            $('#home2').trigger('click');
                            tabselected2 = 'home2';
                        }
                        else if(tabselected2 == 'home2') {
                            $('#home').trigger('click');
                            tabselected2 = 'home';
                 ...