Problem with Jquery mobile

[patriklund]

Hi! I'm working on a mobile html5 app for my company and have found your swipe script the absolute best.

There seems to be one problem though. I'm using Jquery mobile and the swipe function won't work so good. I have noticed the problem may have something to do with the display:block.

For example:

This code won't work, it only shows the first pic and nothing more:

<div style='display:block'><img src="img/1.jpg" width="100%"></div>
<div style='display:none'><img src="img/2.jpg" width="100%"></div>
<div style='display:none'><img src="img/3.jpg" width="100%"></div>

But if i set the other div to display:block also, it will work. But when the page loads that divs "flashes" by. And thats not so pretty.

Like this:

<div style='display:block'><img src="img/1.jpg" width="100%"></div>
<div style='display:block'><img src="img/2.jpg" width="100%"></div>
<div style='display:none'><img src="img/3.jpg" width="100%"></div>

Any ideas of why?

Thank you for your great work.

[JoeGarcia2]

Same thing here. The other problem I am having is when I go back to a page with the swipe on it, it doesn't reinitialize. Have you figured that out?

[patriklund]

I havent actually tested the swipe event with the swipejs code. I use Android (HTC Desire). I noticed on an iphone and ipad that the swipejs code won't work at all.

[jmonster]

I got this working with jquery mobile yesterday. Can you send me a link to look at what you're doing and perhaps I can help?

[parisholley]

I was able to fix this by adding this to my css, this fix is mentioned elsewhere for fixing flickering when using transforms on safari. Note that this might cause other unwanted behavior, but for me was no problem.

* {
    -webkit-transform:translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
}

[JoeGarcia2]

Thanks so much! Those 2 lines of CSS have eliminated so many annoying visual quirks.

[patriklund]

After adding the 2 css lines it seems to work fine on Iphone now. Great. But i still can't get it to work with JQM on Android. I have tested it on my Desire and my Sony Tablet S. Have anyone of you got it to work on Android? You can view my testpage and my sourcecode here: http://m.papper.fi/dev/bbswipe/jqm.html

[thebird]

Hey guys, sorry for not getting back to this earlier. I will be working shortly to test Swipe with JQM. I will put together a post on my blog about how to solve these problems. I will post the link when complete. Thanks for trying out Swipe :).

[Zgraham]

I'm not sure this is a good fix or anything, but I figured out a way to get this to work for the time being with jquery mobile.

All I did was find "window.addEventListener('resize', this, false);" in swipe.js and add an additional line of "window.addEventListener('load', this, false);"

Then further down do the same again by adding "case 'load': this.setup(); break;" below "case 'resize': this.setup(); break;".

[thebird]

That is a pretty good fix but I think this will be best outside the library and within the Swipe instance that is created on your page.

[saski]

I think the problem it's related to the visibility of the list blocks and how jqm manages the creation, enhancement and display events. I've managed to make it work doing the following:

Create the swipe objects on pagecreate:

 $( document ).delegate("#page_Home", "pagecreate", function() {        
    Slider.sliders[id] = new Swipe(document.getElementById(id));
});

Do the individual setup, (as Zgraham explained) on pageshow

$( document ).delegate("#page_Home", "pageshow", function() {
    Slider.sliders[id].setup();
});

I've tried to hook this on the previous events but it only seems to work when the divs to swipe are actually displayed.

• About the fix parisholley suggested, It solves some flickering issues, but I had to rip it because it completely disabled on-map events in a embeded google map, among other bizarre problems.

[ibrent]

Hi Brad. Is Swipe2 going to be more easily compatible with jQuery Mobile? I'd like to help, test or setup a demo if ya need. I agree with not editing the swipe lib in order to make this work, but making a helper func that solves the problem.

[thebird]

Swipe2 attempts to solve some of these issues. I will let you guys know when I am ready to have you guys test it out in jQM.

[ibrent]

Thanks for all the fixes and suggestions. I got it to load by combining the creation and setup into one pageinit:

    $('#home').live('pageinit',function(){
          window.slider = new Swipe(document.getElementById('slider'));
      slider.setup();
    });

But ... I am getting this weird offset issue in all browsers.

I'm using swipe v1 and jQM 1.0.1. See screenshot:
http://cl.ly/3V2n023c2h0F3L2R2m0w

Does anyone have any brilliant fixes for that or has seen it before? A virtual beverage of your choice PLUS fantastic open source code karma for the one who knows this one! :D

Thanks !

[ibrent]

_OK. All is working fine now, but I had to make some hacks to the CSS._ Here are my changes which fix the strange offset that was occurring - I assume from the jQM framework manipulations (see image link above for reference). Color added for your viewing pleasure so you can see what is doing what where.

  <style>
    .swipe {
        padding:0 0 20px 0 !important;
        margin: 0 0 !important;
        background-color:#F7C942;
    }
    .swipe ul {
        background-color:#C6C6C6;
        padding: 0 0 !important;
    }
    .swipe li {
        background-color:purple;
        padding:0 0 0 10px !important;
    }
    .swipe li div {
      margin:0 10px 0 0 !important;
      padding:50px 10px 50px 0 !important;
      background:#1db1ff;
      font-weight:bold;
      color:#444;
      font-size:20px;
      text-align:center;
    }
  </style>

Using swipe v1 and jQM 1.0.1

_Brad_ - if you want me to post both versions of it being weird and with that css fix applied, let me know and I'll slap some links on ya. BTW - I am loving swipejs and think it's the bomb. You need to put a donate paypal button on the proj homepage so people like me can buy you a delicious beverage.
cheers & thx,
brent

[ratul29]

hi Brent, can you share the code of the html file you have used to fix this issue? I am having difficulties in fixing this, tried a lot many things but not working. thanks!

[ibrent]

Yes, I'll share both versions today.

[ibrent]

OK. Here is a sample that you can play with and see what's going on. The default CSS is set to 'swipe'. There you can see the offset problem that jQM is messing with the UL of the slider. Simply change the slider class to 'swipe2' to load the alternate styles which fix the issue.

I know it's hackish and could surely be cleaned up a bit, but you'll see the issue. I see the offset problem in Chrome as well as Mobile Safari.

Let me know what you think and if you have solved it another way. I know that Brad is working on v2 which may address this as well as the init loading sequence issues. Thanks !!!

<!DOCTYPE HTML> 
<html>
<head>
    <title>swipe test</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

    <script src='https://raw.github.com/bradbirdsall/Swipe/master/swipe.js'></script>
    <script>
    $('#home').live('pageinit',function(){
        window.slider = new Swipe(document.getElementById('slider'));
        slider.setup();
    });
    </script>

  <style>   
    .swipe {
      padding-bottom:20px;
      border:1px dotted #999;
    }
    .swipe li div {
      margin:0 10px;
      padding:50px 10px;
      background:#1db1ff;
      font-weight:bold;
      color:#fff;
      font-size:20px;
      text-align:center;
    }
/*  These are hackish override fixes but they show what is going on.  To view simply change the slider class below to 'swipe2' */
    .swipe2 {
        padding:0 0 20px 0 !important;
        margin: 0 0 !important;
        background-color:#F7C942;
    }
    .swipe2 ul {
        background-color:#C6C6C6;
        padding: 0 0 !important;
    }
    .swipe2 li {
        background-color:purple;
        padding:0 0 0 10px !important;
    }
    .swipe2 li div {
      margin:0 10px 0 0 !important;
      padding:50px 10px 50px 0 !important;
      background:#1db1ff;
      font-weight:bold;
      color:#444;
      font-size:20px;
      text-align:center;
    }
  </style>
</head>

<body>

  <div data-role="page" id="home">

    <div data-role="header">
      <h1>jQM + SwipeJS v1</h1>
    </div>

    <div data-role="content">
      <div id='slider' class='swipe'>
        <ul>
          <li style='display:block'><div>Uno</div></li>
          <li style='display:none'><div>Dos</div></li>
          <li style='display:none'><div>Tres</div></li>
          <li style='display:none'><div>Four</div></li>
          <li style='display:none'><div>FIVE</div></li>
        </ul>
      </div> <!-- /slider -->
      <h3>Let's get SwipeJS working with jQM !!!</h3>
      <h4>Using:</h4>
      <p>jQuery v1.6.4<br/>
      jQM v1.0.1<br/>
      SwipeJS v1</p>
    </div> <!-- /content -->
  </div> <!-- /page -->

</body> 
</html> 

[thebird]

Ok guys, spent some time working with jQuery Mobile and Swipe2. Looks to be working perfectly:

http://fiddle.jshell.net/bradbirdsall/PT5d3/show/

Source on jsFiddle

Boom shaka laka :)

Feel free to start testing out the Swipe2 branch

[ibrent]

Yep working great now. Thank you Brad. Awesome !!!

[kpoelhekke]

Thanks saski! I've been debugging for hours and hours on this problem finally found this thread lol. Thanks to the setup function on pageshow everything works..

[reaxionstudios]

This is definately sweet but it's still not working for me as is provided at http://fiddle.jshell.net/bradbirdsall/PT5d3/show/

All of the div's are showing up stacked on top of each other. Not inside 'slider'.

[ibrent]

Hmmm yeah. I think that Brad may have changed some things since this fiddle code. I see what you mean. I appears that it's missing some vital css that hides all the slides first.

I would try to integrate his v2 of swipe here:
https://github.com/bradbirdsall/Swipe/tree/swipe2

[reaxionstudios]

Yeah, I've been firebugging it for about two days now and can't seem to get it to work.

[stephanie-walter]

Wow thanks @saski and @Zgraham for your solutions. I was having the same problem, except that the slide is on a second page, so it was even more complicated.
The solution found was a mix of both solutions: changing the plugin to add @Zgraham's code, and use @saski's one in the jQueryMobile page template to make it work :

    <script>
        var elem;
     $( document ).delegate("#myelement", "pagecreate", function() {        
        elem = document.getElementById('mySwipe');   
    });

    $( document ).delegate("#myelemen", "pageshow", function() {
        window.mySwipe = new Swipe(elem);
    });

    </script>

Thanks guys !!

[thebird]

Sorry fellas, I changed the API a bit and then changed it back in the process of building Swipe2. The jsFiddle I posted above is back working now with the proper structure.

My apoligies

[claytonlloyd]

Is there an example of Slide2 working with JQM and having the navigation links on it working? Struggling a bit to get it working. Thanks guys, great component...

[k7coool37]

Thanks parisholley, Its working fine. Instead of * you can assign the style for particular container which is having swipe functionality... great... thank u again...

[mtamony]

I have strange behavior where I have three divs with data-role="page". When I add the CSS I have a blank screen. Swipe doesn't seem to do anything. I am using the lastest JQM and their new feature for a slide out panel.

[dwwd]

I was having problems getting this to work. I'm using jQuery 1.9.1. The solution uses .live() which has now been removed. So new code needs to be something like:

$(document).on('pageshow','#home',function(){
window.slider = Swipe(document.getElementById('slider'));
});