CODEWITHSUNDEEP
androidjquerycordovadojo
ldeluca
ldeluca

Reputation: 944

Phonegap (Cordova) Swipe Frameworks and Images

I'm testing a very simple page that swipes out the content within a phonegap app. I started with jquery mobile swipeleft and swiperight and it didn't work. So I switched over to dojo SwapView's and again, no luck. I stripped out all of content and when I only had text it worked great (for both jquery and dojo). As soon as I added any images both frameworks didn't recognize the swipe and wouldn't switch out the content. So I'm assuming it's a drawback to phonegap/cordova and images.

I thought maybe it was related to my css and positioning of the div's that the images were contained within. So i removed all css and again, the swipes weren't recognized and no content was swapped.

I searched the web and didn't see anyone else complaining about this issue. Anyone else run into this issue when adding images?

example with jquery:

<div data-role="page" id="page1">
    <div data-role="content"> 
    <p class="story">page1 content</p>
    <div id="imagediv">
        <img src="img/myimage.png" width="70%"/>
    </div>
    </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="content">
            <p class="story">content here
            </p>
        </div>
    </div>

jquery swipe logic:

$(document).delegate('.ui-page', "swipeleft", function(){
    var $nextPage = $(this).next('[data-role="page"]');
    if ($nextPage.length > 0) {
        $.mobile.changePage($nextPage, { transition: "slide" });
    }
}).delegate('.ui-page', "swiperight", function(){
    var $prevPage = $(this).prev('[data-role="page"]');
    if ($prevPage .length > 0) {
        $.mobile.changePage($prevPage, { transition: "slide", reverse : true });
    }
});

Again, works just fine BEFORE I add images. Also works great in the browser (Chrome and Firefox). btw, i'm testing on android.

Upvotes: 1

Views: 955

Answers (1)

ldeluca
ldeluca

Reputation: 944

I think I figured out the issue... the image files were too large so it took too long for each page to be redrawn. By reducing the image sizes everything works as predicted. It's pretty annoying because I wanted to make an interactive app with animations but the animated gif files are too big for jquery to function. I wonder if this is a known limitation to phonegap apps.

Upvotes: 2

Related Questions