Skip to content

Loading…

Problem with Jquery mobile #16

Closed
patriklund opened this Issue · 29 comments
@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.

@mikegartner

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;
}
@mikegartner

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
Owner

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
Owner

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
Owner

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
Owner

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
Owner

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.

@thebird thebird closed this
@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'));
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.