Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery Mobile slide list
    text
    copied!<p>I'm trying to do a list with jQueryMobile like in the twitter application.</p> <p>Video of what I'm looking for: <a href="http://www.youtube.com/watch?v=l7gTNpPTChM" rel="nofollow">http://www.youtube.com/watch?v=l7gTNpPTChM</a></p> <p>But I have 2 problems:</p> <p>1) Each row has a class .mailRow and the .live("tap") event works but .live("swipe") doesn't work on the mobile and does work on the computer when I do it with the right button.</p> <p>2) I managed to "hide" the row with</p> <pre><code> $('.mailRow').live('swipe', function(e){ $(this).animate({ marginLeft: "100%"} , 800); }); </code></pre> <p>But I don't know how to put another div underneath so it'll be visible when the animation ends.</p> <p>This is how the list elements looks like in HTML:</p> <pre><code> &lt;li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c"&gt; &lt;div id="12345" class="mailRow" style="margin-left: 100%; "&gt; &lt;div class="ui-btn-inner ui-li"&gt;&lt;div class="ui-btn-text"&gt; &lt;a href="" class="ui-link-inherit"&gt; &lt;p class="ui-li-aside ui-li-desc"&gt;&lt;strong&gt;30/09/2011 11:09:34&lt;/strong&gt;&lt;/p&gt; &lt;h3 class="ui-li-heading"&gt;USER1&lt;/h3&gt; &lt;p class="ui-li-desc"&gt;&lt;strong&gt;Re: this is a test&lt;/strong&gt;&lt;/p&gt; &lt;p class="ui-li-desc"&gt;TESTING THE MOBILE VERSION...&lt;/p&gt; &lt;/a&gt; &lt;/div&gt;&lt;span class="ui-icon ui-icon-arrow-r ui-icon-shadow"&gt;&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;/li&gt; </code></pre> <p><strong>UPDATE</strong> : I found that the swipe event is not working becase there's an "a" tag inside the div. I don't know how to fix that.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload