JSFiddle - React, Tailwind, and code Playground

by cncpts

HTML

<html> 
    <head> 
    <title>Swipe Test</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>
    <body>
    <div data-role="page" id="page_div"> 
        <div data-role="header"><h1>Complex - Swipe Test - Page 3</h1></div> 
        <div data-role="content">
            <p>Before El-P releases his next solo opus, Cancer For Cure, on May 22, he's dropping a collaborative album with Killer Mike the week prior. It's called R.A.P. Music and it features the larger-than-life Atlanta rapper spitting exclusively over beats from El-P, who also spits a guest verse. Other features include T.I., Trouble, Bun B, Scar, and Emily Panic on this massive, Bomb Squad-indebted album. You can stream R.A.P. Music in its entirety by clicking the Spin link below. It drops May 15</p>
        </div>
        <a data-role="button" data-transition="slide" href="index.html"> Next Page</a>
        <div data-role="footer"></div> 
</div> 

</body>
</html>

JavaScript

var currUri = window.location.pathname.split( '/' );
    var currPage = currUri[3];
    var listPageUri =['index.php','index2.php','index3.php','index4.php'];
    
    // Tests to ensure expected values are being passed
    console.log(listPageUri.length);
    console.log($.inArray(currPage, listPageUri));
    console.log(currPage);
    console.log(next, prev);
    
    var next = listPageUri[($.inArray(currPage, listPageUri) + 1) % listPageUri.length];
    var prev = listPageUri[($.inArray(currPage, listPageUri) - 1 + listPageUri.length) % listPageUri.length];

    $(function(){
    
    $('#page_div').live('swiperight', function(event){
                    $.mobile.changePage(prev,{
                        changeHash:false,
                        reloadPage:true,
                        dataUrl:prev
                        });
                    history.pushState(null, null, prev);
                });
            
                $('#page_div').live('swipeleft', function(event){
                    $.mobile.changePage(next,{
                        changeHash:false,
                        reloadPage:true,
                       dataUrl:next
                        });
                    history.pushState(null, null, next);

                });
            });
        
            function storageSupport(){  
                if (localStorage)  
                return "Local Storage: Supported";  
                else  
                return "Local Storage: Unsupported";  
            }
        
            $(document).ready(function(){
                if (!localStorage.getItem('newvisit')) {
                $('#swipenote').delay(1500).fadeIn('slow');
                localStorage.setItem('newvisit', 0);
                $('#swipenote').delay(8000).fadeOut('slow');
                }
            localStorage.setItem('newvisit', parseInt(localStorage.getItem('newvisit')) + 1);
            });