[Max87]

Hi guys,
I’d like to use some jQuery plugins, such as jqxwidgets(especially jqxtouch.js – swipe).
I add support files into my project, but when I want to use swipe, it’s not working.

I created Image placeholder, according to jqxtouch documentation I insert this code into document.ready:

$('#m1-expenses_main').jqxTouch(); //main page
           $('#m1-expenses-main-image1').bind('swipeleft', function () { //image placeholder
              console.log("You've swiped left");
           });

Can someone help me how to use this? I’ve tried many of similar plugins, but nothing’s working.
Thanks

edit: Many of jQuery plugins have offers funcionality that I need(swipe), but I’m not able to implement any of them. So the problem is in my case global, not only related to jqxTouch… Thanks for help

[support-octavio]

Hi Max,

I’m checking with the dev team as there could easily be contention for handling swipe events.

[support-michael]

Max,

It is very likely that you are encountering contention between the MobiOne phoneui and jqxwidget libs for handling of user events. I strongly suspect this will be a general experience when merging 2 completely independent UI frameworks. In your example I believe the specific problem is that the MobiOne phoneui is setting up its internal iScroller(s) used in the scrolling panel implementation to grab all swipe events. I am discussing w/ the dev team if/how to minimize such contentions.

[Max87]

Thanks guys for answers, I hope, that I can use swipe gestures in my apps.

[dynorodney]

Hi

Any further news on this? I think swipe functionality is vital to a mobile app – it “feels” like an app when you have swipe features. I too have tried a few swiping plugins with no success. I have in fact found one that worked – called swipeview from the same people that do your iScroller – http://cubiq.org and it does work within the latest Mobione but it is set up to scroll text within a div and whilst my Javascript is getting better and better, I dont think I’m at the stage of persuading it to work from a list of DOM id’s but maybe if you now know that it works within Mobione you guys can tweak and twiddle to get it to work?

Or maybe you already have plans?

Thanks

Tony.

[dynorodney]

HI again

I’m probably posting before I should but I think I have a working swipe system. 🙂

Taking the previously mentioned script, I hacked anything that I figured wasn’t needed and put a few bits in that were and I seem to have a working swipe system. It’s late now in the UK but if I can expand it tomorrow to do the entire application rather than the 3 pages its currently doing then i can hopefully post here in the next few days with a solution. Someone else can then hack at what I’ve done to produce nicer code but from what I can see I have a working swipe over 3 pages and it works on scrollable divs.

I’ve even surprised myself today!

Its been tested on android but not yet on apple but it does work in the test centre..

Tony

[Max87]

That’s great news.
Please, post here your code, it would be very helpful.
Thanks

[dynorodney]

Hi

Please remember this is alpha code. It seems to work for me but I cant guarantee it will work for others and my own code may well change over the course of the next week or so if I find issues. If Octavio or others can look through whats been done, tidy it up and release it as part of the system that would be wonderful. The attached file is a heavily modded version of swipeview.js from cubiq.org which was chosen because it seemed to basically work with MobiOne whereas things like JQTouch I couldn’t get working. I’m not a JS Guru.

The original swipeview code was designed to handle a single div being swiped. My original attempt actually worked if you were on part of a screen that didn’t have other panels (especially scrollable ones) but the scrollable panels (which make up a fair proportion of my screen) didnt activate the swipe. The solution I chose was to change swipeView to accept a jquery selector so i could pass in the main page id, plus a selector of all of the divs in that page. I think this is major overkill and may cause issues but it worked so I’m letting you know that I think this is overkill and may well be altered.

I removed a chunk of the swiping code from swipeView – why reinvent the wheel when MobiOne has the SLIDE_LEFT and SLIDE_RIGHT functionality!

In your _custom.js or other included file, declare a

var swiper;

outside any functions so that its global

then inside the phoneui.postPageTransition function

    if (newPageId=="#m1-eformCompanyName")
    {        
        swiper = new SwipeView('#m1-eformCompanyName, #m1-eformCompanyName div');
        swiper.refreshSize();
        swiper.onMoveOut(function () {
            if (swiper.direction=="left")
               phoneui.gotoPage("#m1-eformRegOffice","SLIDE_LEFT")
            if (swiper.direction=="right")
               phoneui.gotoPage("#m1-UKCompanyRegistration","SLIDE_RIGHT")
        });        
    } 

Obviously you need to change the DOM id’s to match your own pages, but effectively, if a swipeview event happens and it realises there has been a swipe left or right, it doesnt do anything other than set a direction for you to interrogate within the onMoveOut event/method. I’m then using the MobiOne sliders to bring the appropriate page into view. You just repeat the above block multiple times for different pages.

Ive got it set up on about 8 pages this morning and it seems to be working fine although the comment above still stands that its alpha code and not to be taken as production ready!

Hope that helps people.

[ Octavio – if a modified version of this gets integrated into the system, my suggestion would be some extra elements on the page root object asking for swipe left and swipe right pages so that no code is needed in the postPageTransition and suitable jquery selectors can be handled by yourselves for the swipe as you can easily identify panels etc to accept the swipe ? ]

Regards

Tony

Attachments:

You must be logged in to view attached files.

[Pieter_K]

I tested tcmswipeview.js

I added it like this in my _custom.js

phoneui.documentReadyHandler = function() {
$("head").append(
       $("<script type='text/javascript' src='tcmswipeview.js'></script>"));
}

The swipe code did not work on android as an native app (.apk).

However It did work nice on android with the chrome browser and does work great as webapp on the ipad.

Swipe functions are a must nowaday’s..

[Max87]

Hi guys,
is there any chance to modify the code to work with switching panels?
I mean, that you have panel on screen, you swipe to any drection and next panel shows up(something like native image gallery)
Thanks

[dynorodney]

Pieter_K

Simply add the tcmswipeview.js as a javascript item in your home page properties (Select your first page, and in the properties you will see javascript where you can add any files you need. Add it here and let me know if it works then as it definitely works on my Android ICS and Jelly bean (havent yet tried on gingerbread which is the only other device I have access to)

Tony

[Max87]

Hi dynorodney,
I can confirm, that your code is working for me – it’s sliding pages.
I just did’t put it to postTransition, but in document ready function.
Thanks a lot for your work and I hope, that we can modify the code to slide panels(not pages, I tried, but didn’t work)

[AiadCharkie]

Hi, in which files should I paste the code you have attached to get a swipe function?
Thank you
Aiad

[Max87]

You should write your custom code to <project name>_custom.js

[Pieter_K]

@dynorodney wrote:

Pieter_K

Simply add the tcmswipeview.js as a javascript item in your home page properties (Select your first page, and in the properties you will see javascript where you can add any files you need. Add it here and let me know if it works then as it definitely works on my Android ICS and Jelly bean (havent yet tried on gingerbread which is the only other device I have access to)

Tony

That did work!
Project is working as native app on android 4.03

🙂

[Author]

Posts