Having trouble getting the swiping feature to function on jQuery mobile

Hey there, I'm new to this so please bear with me if I'm not getting everything right with posting... I've been trying to figure out how to swipe left and right for jquery mobile by visiting a few pages. I found this page for my script - - but for some reason, I just can't seem to get it to work. I know it's probably something simple and silly that I'm missing... Can anyone spot the issue for me? Thanks in advance!

<!DOCTYPE html> 
<html  lang="en">
<head>
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

    <link rel="stylesheet" href="_/css/jquery.mobile.css" />

    <script src="_/javascript/jquery.js"></script>
    <script src="_/javascript/jquery.mobile.js"></script>

    <script>

    $('div.ui-page').live("swipeleft", function(){
    var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, "slide", false, true);
        }
    });
    $('div.ui-page').live("swiperight", function(){
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide",
        reverse: true}, true, true);
        }
    });
    </script>

</head>

<body> 

    <div data-role="page" id="editor">
    <div>bucker</div>
    </div>

    <div data-role="page" id="innovation1">
    <div>bunk</div>
    </div>

</body> 
</html>
javascriptjqueryhtmlcssjquery-mobile

Answer №1

Behold, I have crafted a functional demonstration for you: http://jsfiddle.net/Gajotres/NV6Py/

$(document).on('swipeleft', '[data-role="page"]', function(event){    
    if(event.handled !== true) // To prevent multiple event triggers
    {    
        var nextpage = $(this).next('[data-role="page"]');
        // Initiate swipe to the id of the next page if it exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '[data-role="page"]', function(event){   
    if(event.handled !== true) // To prevent multiple event triggers
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

Indeed, your version is functioning perfectly. I've only updated the js and css initialization to jQuery 1.8.2 and jQuery Mobile 1.2. Take a look at the revised code:

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <script>

    $('div.ui-page').live("swipeleft", function(){
    var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, "slide", false, true);
        }
    });
    $('div.ui-page').live("swiperight", function(){
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide",
        reverse: true}, true, true);
        }
    });
    </script>

</head>

<body> 

    <div data-role="page" id="editor">
        <div>bucker</div>
    </div>

    <div data-role="page" id="innovation1">
        <div>bunk</div>
    </div>

</body> 
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize React-select in Nextjs to dynamically alter URLs through options

During my attempt to implement react-select for changing the URL based on user-selected multiple options to filter numbers, I encountered a challenge. When using multiple options, the URL changes successfully to fetch data, as seen in this example: https:/ ...

javascriptreactjsregexnext.jsreact-select

Parsley JS failing to validate

I attempted to validate my form using parsley.js, following the instructions from the official documentation. However, for unknown reasons, it is not functioning as expected. Below is the code snippet: <div class="container"> <div class= ...

javascriptjqueryformsvalidationparsley.js

When the down key is pressed in a textarea, choose the list item

I have HTML similar to the following <div class="row"> <textarea id="txtArea" ng-model="input" ng-change="handleOnChange(input);getSearchField(input);" ng-click="search(input)" ng-focus="search(input);" ...

javascriptjqueryhtmlangularjs

What causes the difference in behavior between absolute positioning in <button> and <div>?

I am noticing that the code below is not positioning my span to the top-left corner of the button as I expected. Can anyone explain why? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> &l ...

htmlcsscss-position

if the statement encounters an error while execution, then

I am struggling to run a for loop on JSON data in order to plot new lines on a Canvas chart based on the test names and their values. Unfortunately, I can't seem to display different horizontal lines on the chart. $(document).ready(function(){ ...

jqueryjsonfor-loopdynamiccanvasjs

What is the best way to properly redirect a page using a router link in Vue.js 2?

I've encountered an issue with the router-link component in Vue.js 2. I have set up my router file index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import HomeView from '../views/HomeView.vue'; import ...

javascriptvue.jsvuejs2vue-router

What is the best way to prevent the navbar from covering content? The navbar-static-top option helps, but it doesn't allow for fixed-scroll

I am facing an issue with my navigation bar while using asp.net. When I apply the class navbar-fixed-top, the navigation bar becomes fixed and scrolls with the page, but it overlaps the content in the contentplaceholder However, when I switch to the clas ...

jqueryhtmlasp.netcss

Tips for encoding AngularJS ng-model in real-time

Recently, I embarked on a new project and wanted to incorporate some AngularJS magic. The only obstacle is my limited expertise in AngularJS or JavaScript, making it difficult for me to figure out how to make it work. One key requirement is that the functi ...

javascriptjqueryangularjsangular-ngmodel

Positioning with Bootstrap CSS libraries

The text next to the logo in the navbar isn't aligning properly (refer to this link for the page -> ). Furthermore, the logo isn't positioning correctly either, and this issue is present in all the navbar codes. I'm utilizing CSS bootstr ...

javascripthtmlcsstwitter-bootstrapnavbar

Using HttpClient to display data on the DOM

Presented here is a list of employees sourced from my imitation db.json. I am attempting to display it in the DOM. When I use {{employee}} within the loop in app.component.html, it displays a list with 2 items, each showing as [object Object]. However, if ...

javascriptangular

How to make a form in PHP that can be saved?

I have put together a straightforward, yet lengthy HTML form and I am in need of a way for users to save their progress on the form and return to it at a later time (security is not a major concern). However, I am struggling with how to save the form' ...

javascriptphpjqueryformssavestate

The response received from the server was a 404 status () indicating that the resource failed to load

I'm encountering an issue while loading from the web service, and receiving the following error: Failed to load resource: the server responded with a status of 404 () Your help would be greatly appreciated. You can also access the code on JSFiddl ...

javascriptjqueryajaxamazon-web-services

The mute feature in Discord.js along with setting up a muterole seems to be malfunctioning and encountering errors

Currently, I am working on implementing a mute command feature. The main goal is to have the bot automatically create a role called Muted if it doesn't already exist, and then overwrite the permissions for every channel to prevent users with that role ...

javascriptnode.jsdiscord.js

Is there a way to turn off Sequelize syncing?

I need assistance with my nodejs project where I am trying to establish a connection with mysql. The issue is that the connection is automatically creating tables based on the models defined, which is not what I want. How can I disable this automatic table ...

javascriptmysqlnode.jssequelize.js

Is it possible to use JavaScript to forcefully transition a CSS keyframe animation to its end state?

One dilemma I am facing involves CSS keyframe animations triggered by scroll behavior. When users scroll too quickly, I would like JavaScript to help send some of the animations to their 'finished/final' state, especially since the animations bui ...

javascriptcssanimationkeyframe

Each time the state changes, the array of components is reset

I'm working on a form to create training programs that display a week, starting with an array of all the days. The rendered day depends on the current day (state). The issue is that every time I switch the current day, such as clicking on a different ...

javascriptreactjsarraysreact-context

JavaScript will not prevent PHP form submissions from executing

I am currently facing an issue with JavaScript where it displays an error window, but surprisingly does not prevent the form submission. I have been trying to figure out what exactly is causing this problem without much success. Below is the code I am work ...

javascript

What is the best way to trigger dependent APIs when a button is clicked in a React Query application

On button click, I need to call 2 APIs where the second query depends on the result of the first query. I want to pass data from the first query to the second query and believe using "react-query" will reduce code and provide necessary states like "isFetch ...

javascriptreactjsaxiosreact-query

Maximizing the potential of NestJS apps with Docker

I am working on a NestJS project that consists of multiple apps structured as follows: my-project: -- apps; --- app-one ---- src ---- tsconfig.app.json --- app-two ---- src ---- tsconfig.app.json -- libs -- package.json -- etc... Within this project, I ha ...

javascripttypescriptdockernestjs

What is the best way to extract inner HTML content using Regular Expressions?

<div class="colmask"> <h1 class="continent_header"><a name="US"></a>US</h1> <div class="colmid"> <div class="colin"> <div class="colleft"> ....... ....... ...

c#htmlregex