Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with Jquery mobile #16

Closed
patriklund opened this issue Nov 24, 2011 · 29 comments
Closed

Problem with Jquery mobile #16

patriklund opened this issue Nov 24, 2011 · 29 comments

Comments

@patriklund
Copy link

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
Copy link

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
Copy link
Author

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
Copy link

jmonster commented Dec 6, 2011

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
Copy link

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
Copy link

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

@patriklund
Copy link
Author

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
Copy link
Owner

thebird commented Dec 12, 2011

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
Copy link

Zgraham commented Dec 21, 2011

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
Copy link
Owner

thebird commented Dec 24, 2011

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
Copy link

saski commented Jan 4, 2012

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
Copy link

ibrent commented Jan 31, 2012

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
Copy link
Owner

thebird commented Feb 7, 2012

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
Copy link

ibrent commented Feb 10, 2012

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
Copy link

ibrent commented Feb 11, 2012

_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
Copy link

ratul29 commented Feb 17, 2012

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
Copy link

ibrent commented Feb 18, 2012

Yes, I'll share both versions today.

@ibrent
Copy link

ibrent commented Feb 19, 2012

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
Copy link
Owner

thebird commented Feb 22, 2012

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
Copy link

ibrent commented Mar 12, 2012

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

@kpoelhekke
Copy link

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
Copy link

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
Copy link

ibrent commented May 6, 2012

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
Copy link

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

@stephanie-walter
Copy link

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
Copy link
Owner

thebird commented May 19, 2012

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
Copy link

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
Copy link

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
Copy link

mtamony commented Feb 25, 2013

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 as completed Mar 11, 2013
@dwwd
Copy link

dwwd commented May 16, 2013

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
Labels
None yet
Projects
None yet
Development

No branches or pull requests