Sliding list in Jquery Mobile

I'm attempting to create a list using jQueryMobile similar to the one found in the Twitter application.

Here's a video demonstrating what I'm aiming for: http://www.youtube.com/watch?v=l7gTNpPTChM

However, I am facing two issues:

1) Each row is assigned the class .mailRow and the .live("tap") event functions correctly. However, the .live("swipe") event does not work on mobile devices but works on computers when triggered with the right mouse button.

2) I have successfully "hidden" the row using the following code:

    $('.mailRow').live('swipe', function(e){
        $(this).animate({ marginLeft: "100%"} , 800);
    });

But I am unsure of how to add another div underneath so it becomes visible once the animation completes.

Below is the HTML structure of the list elements:

    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
        <div id="12345" class="mailRow" style="margin-left: 100%; ">
            <div class="ui-btn-inner ui-li"><div class="ui-btn-text">
                <a href="" class="ui-link-inherit">
                    <p class="ui-li-aside ui-li-desc"><strong>30/09/2011 11:09:34</strong></p>              
                    <h3 class="ui-li-heading">USER1</h3>
                    <p class="ui-li-desc"><strong>Re: this is a test</strong></p>
                    <p class="ui-li-desc">TESTING THE MOBILE VERSION...</p>
                </a>
            </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div>
        </div>
    </li>

UPDATE: Upon further investigation, I discovered that the swipe event is not functioning due to the presence of an "a" tag inside the div. I am currently exploring a solution to rectify this issue.

jquerycssjquery-mobileslideswipe

Answer №1

I managed to find the solution on my own and thought it would be helpful to share in case someone else encounters the same issue:

Here is the new CSS style that was added:

<style type="text/css">
    .hidden
    {
        visibility: hidden;
        height: 0px !important;
        padding: 0px !important;
        margin: 0px !important;
    }
</style>

HTML code for list elements:

<li data-theme="c" mail-id="12345" class="mailRow">
    <div class="buttonsRow hidden">
        <a href="#" data-role="button" data-iconpos="top" data-icon="back" data-inline="true">Reply</a>
        <a href="#" data-role="button" data-iconpos="top" data-icon="delete" data-inline="true">Delete</a>
    </div>
    <a href="#" class="messageRow">
        <p data-role="desc" class="ui-li-aside"><strong>30/09/2011 11:09:34</strong></p>                
        <h3 data-role="heading">USER1</h3>
        <p data-role="desc" ><strong>Re: this is a test/strong></p>
        <p data-role="desc" >TESTING THE MOBILE VERSION...</p>
    </a>
</li>

Javascript function:

function mailLinks()
{
    $('.mailRow').live('swiperight', function(e){
        $(this).find('.messageRow').animate({ marginLeft: "100%"} , 800, function(){
            $(this).parentsUntil('li').find(".ui-icon-arrow-r").addClass("ui-icon-arrow-l").removeClass("ui-icon-arrow-r");
            $(this).parent().find('.buttonsRow').removeClass("hidden");
            $(this).addClass("hidden");

        });
    });
    $('.mailRow').live('swipeleft', function(e){
        $(this).find('.buttonsRow').addClass("hidden");
        $(this).find('.messageRow').removeClass("hidden");
        $(this).find('.messageRow').animate({ marginLeft: "0%"} , 800, function(){
            $(this).parentsUntil('li').find(".ui-icon-arrow-l").addClass("ui-icon-arrow-r").removeClass("ui-icon-arrow-l");
        });
    });

    $('.mailRow').live('tap', function(e){
        e.preventDefault();
        idMail = $(this).attr('mail-id');
        loadPage('read');
    });
}

Although not visually pleasing, it gets the job done.

Answer №2

There is a new tutorial available that discusses the implementation of a "swipe menu" after the release of jquery mobile 1.0 final.

If you're interested, you can check out the tutorial by following this link:

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

The Bootsrap 5.3 navbar is not fully extending to the width of the page

My goal is to have the list items in a Bootstrap navbar stretch across the width of the page in mobile view, but I'm having trouble achieving this. I've tried following various tutorials without success. I even attempted using *{margin:0;padding ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

What is the significance of the border classes having an overriding color property in Bootstrap?

When adding a border to my navigation menu, I initially thought using the Bootstrap .border class would be the best approach. However, upon examining the code generated by this class, I noticed that it uses an !important declaration on the color property ...

htmlcsstwitter-bootstrapbootstrap-4

What steps can be taken to ensure that the content in column two does not impact the positioning of content in column one?

Is there a way for the input text container to remain in its original position within the layout even after submitting text? Usually, when the data displayed container's height increases, it pushes the input text container down. Despite trying absolu ...

htmlcssbootstrap-5

A guide on restricting overflow in React Spring Parallax 'pages'

Currently, I have integrated React Spring Parallax () into my project found at this link: https://codesandbox.io/s/parallax-sticky-scroll-2zd58?file=/src/App.js Upon clicking the button to navigate to the next section, it is noticeable that the image over ...

cssreactjsparallaxreact-spring

Browse through content without displaying the page title on the navigation bar and without the use of frames

When I sign into certain websites, I have noticed that the address displayed is often something like this: https://examplesite.com/access Even though all the links on the landing page are clickable and functional, their corresponding addresses never show ...

javascriptphphtmlcssajax

Tips for updating multiple divs after submitting content with jQuery

My screen contains various widgets, each enclosed with different divs. Currently, I have a form that updates using AJAX when posted through jQuery. However, I am looking to refresh two additional divs located outside the form upon a single jQuery AJAX pos ...

jqueryasp.net-mvcposthtml

What is the best way to determine the total number of pages for posts

Hello there! I'm currently working on implementing an infinite scroll feature for a custom post type, but I'm stuck on how to obtain the max_num_pages and pass it to JavaScript. Below is my current implementation of the infinite scroll: containe ...

javascriptphpjqueryajaxwordpress

Styling with CSS in Zend Framework

In the process of creating a website using Zend Framework, I have successfully implemented the header, footer, and all the necessary pages. However, I am facing an issue with integrating the CSS file located at public/css/styles.css. When running the webs ...

phphtmlcsszend-framework

Asynchronous POST request in Chrome Extension's popup.js

Apologies for asking again, but has anyone encountered a similar issue? I have a popup.js file with a login form that sends a request to an API to retrieve an API key for user authentication. When I set the request as synchronous (async: false), everythin ...

javascriptjqueryajaxasynchronousgoogle-chrome-extension

Attempting to create a slider utilizing jQuery

I'm currently working on creating a slider using jquery. I have downloaded the cycle plugin for the slider and included it in my file. The slider consists of 7 pictures. Below is the code I am using, can someone please help me identify any issues? &l ...

javascriptjqueryhtmlcss

SCRIPT5007: The property 'href' cannot be assigned a value as the object is either null or undefined

This script is functioning properly in browsers like Chrome and Firefox, however it is encountering issues when used with Internet Explorer. An error message is displayed in the IE console: SCRIPT5007: Unable to set value of the property 'href': ...

javascriptphpjqueryhtmlinternet-explorer

Prevent the left border from displaying on a link that wraps to a new line

Excuse me, I am facing an issue with a pipe separator in my subnav bar between links. The problem is that the first link on a new line retains the left-border that should be disabled. How can I prevent this border from appearing on the first link of a new ...

javascriptjqueryhtmlcss

Is it possible to blur all elements of a form except for the submit button?

Can someone help me with a form issue I am facing? <form> <input type="text>' <input type="submit">' </form>'' After submitting the form, I would like to blur the entire form: $(this).closest('form') ...

javascriptjqueryhtmlcssforms

Implementing dynamic element selection with jQuery: combining onClick and onChange events

I am looking to update the appearance of the arrow on a select option. By default, it is styled as caret-down. When a user clicks in the input area, I want to change the style to caret-up. If the select option has been changed or no action has been taken, ...

javascripthtmljquerycss

leveraging the power of jquery colorbox to dynamically display an angularjs template

Routes are being used to render the body of a template, as shown below. The template loads without any issues at this point. Upon clicking a link within the rendered template (/templates/my-details), the goal is to trigger a colorbox popup and use another ...

jqueryangularjscolorboxngroute

Surprising <body> body movement caused by child's margin-top pushing it down

Whenever I come across HTML problems, they seem so simple that I almost feel silly asking about them. But here I am, clueless about why this issue is occurring. In the following fiddle http://jsfiddle.net/o5ee1oag/2/, the body is being pushed down by a 50 ...

htmlcssmargin

Tips for keeping a div fixed at a specific scroll level

Is there a way to keep a specific side div fixed at a particular scroll level, similar to the "How to format" bar on the right side of the Stack Overflow ask question page? You can see it when you try asking a question. How can this be achieved - with CS ...

jqueryhtmlcss

Deliver acquired post information to HTML using the read file technique

I've been diving into the world of nodeJS, jquery-mobile, and HTML5. Below is a snippet of my code: Fetching post data from an html form: req.addListener("data", function(postDataChunk){ postData += postDataChunk; console.log("Received POST ...

htmlnode.jsjquery-mobile

What's the reason behind beforeunload not triggering?

I've gone through numerous similar posts, but I'm struggling to figure out what's not quite right with this code snippet: $(window).on("beforeunload", function () { debugger handleBeforeUnload(); return false; }); function handl ...

javascriptjqueryangularjsevent-handling

Definitions that are displayed dynamically when hovering over a particular element

I am seeking a way to implement popup definitions that appear when a div is hovered over. My website showcases detailed camera specifications, and I want users to see a brief definition when they hover over the megapixel class called '.mp'. One o ...

javascriptjqueryhtmlcsshover