My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
CallbackEvents  
Built-in Triggers/Events in jQTouch including page animations and touch events.
Updated Apr 11, 2010 by davidcol...@gmail.com

Events must be added after document has loaded. For this, we use the jQuery .ready() method.

Page Animations

  • pageAnimationStart, {direction: _in/out_}
  • pageAnimationEnd, {direction: _in/out_}
    $(document).ready(function(e){
        $('#portfolio').bind('pageAnimationEnd', function(event, info){
            if (info.direction == 'in') loadWorks();
            $(this).data('referrer'); // return the link which triggered the animation, if possible
        })
    });

Orientation Changes

    $(function(){
        $('body').bind('turn', function(event, info){
              console.log(info.orientation); // landscape or profile
        });
        
    });

Touch Events

Touch events will only trigger on items which are initialized, either automatically via the initialization function (touchSelector: 'a, .touchable', slideSelector: 'a.slide').

    $(function(){
        $('#swipeme').bind('swipe', function(event, info){
              console.log(info.direction);
        });
    });

You can also use the jQuery-style event shortcut, like:

    $(function(){
        $('#swipeme').swipe( function(event, info){
              console.log(info.direction);
        });
    });

Replace standard "click" events with jQTouch's custom tap events. These are automatically "live".

    $(function(){
        $('#tapme').tap( function(e){
              console.log('Tapped!');
        });
    });
Comment by stu...@swim.com.au, Mar 18, 2010

how would you go about forwarding the user to a new page (loaded via the ajax method) when they tip the phone to landscape? I want to achieve a similar function to the iphones native functionality where in ipod mode if you tip the phone to landscape you get coverflow.

basically every time the user changes to landscape mode i want to show my portfolio, then when they turn back to portrait it goes back to index page.

any ideas?

this really is fantastic work by the way!

Comment by markaric...@gmail.com, Apr 6, 2010

I am building a Rails app using jQTouch. I need to respond to pageAnimationEnd for a particular page. This needs to be very specific to the controller/action. How I see jQTouch working is that it uses AJAX to progressively load pages into a single page. I see it building up divs in the DOM as I navigate:

<div class="current slide in " id="page-3"> <div class="current slide in " id="page-8"> <div class="current slide in " id="page-13">

Where are these ids coming from? How can I name them deterministically (i.e. using my controller/action names)?

Thanks, Mark

Comment by silence...@gmail.com, Apr 17, 2010

If i load a page over a form, then javascript in the loaded content seems not to be executed. So i searching for a callback function after the load of the new page. Line 477: "function submitForm(e, callback) {" looks promising. Is there a way to register my callback function on a form?

Comment by jsa...@gmail.com, Apr 27, 2010

'turn' is never triggered.

Comment by wysocki...@gmail.com, Apr 28, 2010

On direction is there a way to know which page you are coming from Take for instance Page A, B, and C

On page B you you turn on pageAnimationEnd.

So you go from A -> B -> C <- B

From A -> B you get a notification, but when you click BACK from C -> B you too get a notification. Any way to know you came from Page C or page A on the notification $(this).data('referrer'); didn't give me any data just UNDEFINED

Comment by mmelcher, May 22, 2010

How do I use the jqtouch tap function within another jquery plugin?

I am trying to modify the button jquery plugin to use tap rather than click.

The following works for click.

this.buttonElement.bind( "click.button", function() {}

But the following does not seem to work if the fastTouch is set to true:

this.buttonElement.bind( "tap", function() {}

It seems to work like a "click" if fastTouch is set to false.

Thanks in advance for any advice.

-M

Comment by melvyn....@gmail.com, Jul 5, 2010

Does anyone know where to find the swipe callback argument properties? i.e. What are the properties of the 'event' and 'info' argument objects?

Comment by buchtb...@gmail.com, Jul 19, 2010

can anybody tell me why any class used for animations animates the whole page on swiping?

Comment by brentpur...@gmail.com, Jul 19, 2010

the callback swipe event doesnt even work on the jqtouch demo

Comment by Sampleth...@gmail.com, Jul 28, 2010

Lets get some instructions on how to use the swipe event, which is probably the most demanded aspect in a webkit for touchscreen mobiles.

Comment by pfe....@gmail.com, Sep 9, 2010

jQtouch is a very nice plugin but it suffers from poor documentation available. Also we can't see sample codes in action

Comment by webunder...@gmail.com, Feb 2, 2011

swipe event doesn't seem to work on iPhone 3G running OS 3.1.2.

Anyone had any luck with OS 4?

Comment by bala...@gmail.com, Aug 15, 2011

jqTouch's touch events seem to be causing a lot of confusion and issues. I ended up modifying jquery mobile's touch event detection code to make it work for me. I have tested it on iphone, ipad and adroid devices and it works perfectly however, the moment I couple it with jqtouch, it goes inconsistent. I would like to have a way of disabling jqtouch's touch event detection since my code works well across platforms/devices. Any pointers on this would be highly appreciated. I'll probably end up working it out by the time a reply is posted here but it might help some one else facing the same problem.

Comment by bala...@gmail.com, Aug 16, 2011

btw, I just commented out the line .bind('touchstart', handleTouch) and set useFastTouch to false. seems to be working for me.

Comment by aress.t...@gmail.com, Aug 26, 2011

Hello,

I am getting error $(this).data("referrer") is undefined please give me if have any solution.

Here is detail error message.

$(this).data("referrer") is undefined

var cid = $(this).data('referrer').attr('id');
mobile (line 61) $(this).data("referrer") is undefined
// Page animations end with AJAX cal...1 (load remote HTML only first time)

Thanks in advance

Comment by mr.dan.r...@gmail.com, Oct 16, 2011

Does anyone know why people ask questions here because they're never answered?


Sign in to add a comment
Powered by Google Project Hosting