Apply Touch Swipe on single page ,the page that is used for loading data dynamically?

Question

I have used single page on which data is loaded again and again.

A same page is being used for loading data; ie headline, photo and description. Can you help me so that I can apply swipe function in it? I am building an application like Pulse News check it on the swipe function. I have built it in phonegap, HTML5, CSS3 and JavaScript and also jQuery mobile.

I know how to to swipe the pages, where are more than one page but there is only one page on which data is loaded dynamically and only the content is changed, so how should I add swipe to it so that it works on iPhone and Android?

Check the answers to this: http://stackoverflow.com/q/8110736/190695 — Nirmal Patel, Sep 16 '12 at 07:47
I think this demo will help you out. check out. https://github.com/akotoe/android-slide-out-menu — GrIsHu, Mar 05 '13 at 13:34
Does re-setting the swipe delegate to the new element after each swipe not work? — Ivan Bartsov, Mar 06 '13 at 08:30

score 1 · Answer 1 · answered Aug 16 '13 at 23:50

It doesn't matter how many pages you have in your app. You need to detect SWIPE action in your activity and reload data instead of really swiping pages. to do that: in your touch event listener, detect:

ACTION_MOVE

like this:

if(event.getAction() != MotionEvent.ACTION_MOVE)

even check the distance to make sure a SWIPE happened:

switch(event.getAction())
 {
     case MotionEvent.ACTION_DOWN:
              if(isDown == false)
              {
                     startX = event.getX();
                     startY = event.getY();
                     isDown = true;
              }
              Break;
              case MotionEvent.ACTION_UP
              {
                     endX = event.getX();
                     endY = event.getY();
                     break;
          }
}

calculate the distance then, if sounds like more than a click... consider it a swipe and reload your data good luck

score 1 · Answer 2 · answered Oct 23 '13 at 10:49

1

Take a look at Hammer.js (http://eightmedia.github.io/hammer.js/) perhaps it will make it easier for you!

Hammer(el).on("swipeleft", function() {
    //code to run when user uses swipes left
});

answered Oct 23 '13 at 10:49

Mackelito

4,213
5
39
78

score 0 · Answer 3 · answered Mar 08 '13 at 15:11

I think you might want to consider using a multi-page layout or a panel and transitioning between them using the swipe gesture.

http://view.jquerymobile.com/1.3.0/docs/widgets/pages/#Multi-pagetemplatestructure

Check-out the code for the jQueryMobile slide dialog here - http://view.jquerymobile.com/1.3.0/docs/widgets/transitions/

score 0 · Answer 4 · answered Apr 27 '13 at 00:55

From the jQuery Mobile 1.3.0 Documentation for $.mobile.changePage

options (object, optional) Properties:

allowSamePageTransition(boolean, default: false)

By default, changePage() ignores requests to change to the current active page. Setting this option to true, allows the request to execute. Developers should note that some of the page transitions assume that the fromPage and toPage of a changePage request are different, so they may not animate as expected. Developers are responsible for either providing a proper transition, or turning it off for this specific case.

It appears that there may be some bugs with this depending on which version of jQuery.Mobile you are using.

score 0 · Answer 5 · edited Sep 25 '13 at 18:17

First let ur Activity implements OnTouchListener then return the gesture detector i.e as follows

public boolean onTouch(final View view, final MotionEvent motionEvent) {
  // TODO Auto-generated method stub
  return gestureDetector.onTouchEvent(motionEvent);
}

then now

urpage.setOnTouchListener(this);

in onCreate method

private final class GestureListener extends SimpleOnGestureListener {

private static final int SWIPE_THRESHOLD = 100;
private static final int SWIPE_VELOCITY_THRESHOLD = 100;

@Override
public boolean onDown(MotionEvent e) {
    return true;
}

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,

float velocityY) {
    boolean result = false;
    try {
        float diffY = e2.getY() - e1.getY();
        float diffX = e2.getX() - e1.getX();
        if (Math.abs(diffX) > Math.abs(diffY)) {
             if (Math.abs(diffX) > SWIPE_THRESHOLD
               && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) {
                  if (diffX > 0) {
                       //dynamic load the page which you want when the user swipes left side
                  } else {
                       //dynamic load the page which you want when the user swipes right side
                  }
             }
        }
    } catch (Exception exception) {
        exception.printStackTrace();
    }
    return result;
}

score 0 · Answer 6 · answered Nov 19 '13 at 09:36

0

AngularJS 1.2 has swipe features built in now too. Maybe worth checking.

answered Nov 19 '13 at 09:36

mvermand

5,829
7
48
74

score 0 · Answer 7 · answered Nov 19 '13 at 14:01

You can modify this code according your requirement.

  $("#pageID-1").on("swiperight", function() {           
    $.mobile.changePage("#pageID-2", {transition: "slide",reverse: false});         
    getDateienData();   // load data dynamically on page '#pageID-2' when swipe page '#pageID-1'. 
  });

Apply Touch Swipe on single page ,the page that is used for loading data dynamically?

7 Answers7