JSFiddle - React, Tailwind, and code Playground

by dirkk0

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css">
<script src="http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js"></script>
<div data-role="page" id="p1">
    <div data-role="header"><h1>P1</h1></div>
    <div data-role="content"><p>I'm first in the source order so I'm shown as the page.<div id="fixed1">
        some text</div>
        
        
        </p>
        <div data-scroll="y" class="threeByThree">
            <div class="square">a</div>
            <div class="square">b</div>
            <div class="square">c</div>
            <div class="square">d</div>
            <div class="square">e</div>
        </div></div>
    <div data-role="footer"><h4>Page Footer</h4></div>
</div>
<div data-role="page" id="p2">
    <div data-role="header"><h1>P2</h1></div>
    <div data-role="content"><p>I'm second in the source order so I'm shown as the page.</p></div>
    <div data-role="footer"><h4>Page Footer</h4></div>
</div>
<div data-role="page" id="p3">
    <div data-role="header"><h1>P3</h1></div>
    <div data-role="content"><p>I'm third in the source order so I'm shown as the page.</p></div>
    <div data-role="footer"><h4>Page Footer</h4></div>
</div>
<div data-role="page" id="p4">
    <div data-role="header"><h1>P4</h1></div>
    <div data-role="content"><p>I'm fourth in the source order so I'm shown as the page.</p></div>
    <div data-role="footer"><h4>Page Footer</h4></div>
</div>

CSS

#fixed1 { width: 220px; height: 40px; background-color: yellow; }

.threeByThree {
    border: solid 1px black;
    background-color: #999;
    overflow: hidden;
    width: 130px;
    height: 140px;
}

        .square {
            width: 98px;
            height: 98px;
            border: solid 1px #333;
            text-align: center;
            line-height: 100px;
            font-size: 60px;
        }

JavaScript

$('div.ui-page').live("swipeleft", function() {
    var nextpage = $(this).next('div[data-role="page"]');
    // swipe using id of next page if exists
    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, 'slide');
    }
});
$('div.ui-page').live("swiperight", function() {
    var prevpage = $(this).prev('div[data-role="page"]');
    // swipe using id of next page if exists
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, 'slide', true);
    }
});