Coder Social home page Coder Social logo

Problem with Jquery mobile about swipe HOT 29 CLOSED

thebird avatar thebird commented on August 20, 2024
Problem with Jquery mobile

from swipe.

Comments (29)

JoeGarcia2 avatar JoeGarcia2 commented on August 20, 2024

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?

from swipe.

patriklund avatar patriklund commented on August 20, 2024

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.

from swipe.

jmonster avatar jmonster commented on August 20, 2024

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?

from swipe.

parisholley avatar parisholley commented on August 20, 2024

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

from swipe.

JoeGarcia2 avatar JoeGarcia2 commented on August 20, 2024

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

from swipe.

patriklund avatar patriklund commented on August 20, 2024

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

from swipe.

thebird avatar thebird commented on August 20, 2024

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 :).

from swipe.

Zgraham avatar Zgraham commented on August 20, 2024

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;".

from swipe.

thebird avatar thebird commented on August 20, 2024

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.

from swipe.

saski avatar saski commented on August 20, 2024

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.

from swipe.

ibrent avatar ibrent commented on August 20, 2024

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.

from swipe.

thebird avatar thebird commented on August 20, 2024

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.

from swipe.

ibrent avatar ibrent commented on August 20, 2024

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 !

from swipe.

ibrent avatar ibrent commented on August 20, 2024

_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

from swipe.

ratul29 avatar ratul29 commented on August 20, 2024

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!

from swipe.

ibrent avatar ibrent commented on August 20, 2024

Yes, I'll share both versions today.

from swipe.

ibrent avatar ibrent commented on August 20, 2024

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> 

from swipe.

thebird avatar thebird commented on August 20, 2024

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

from swipe.

ibrent avatar ibrent commented on August 20, 2024

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

from swipe.

kpoelhekke avatar kpoelhekke commented on August 20, 2024

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..

from swipe.

reaxionstudios avatar reaxionstudios commented on August 20, 2024

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'.

from swipe.

ibrent avatar ibrent commented on August 20, 2024

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

from swipe.

reaxionstudios avatar reaxionstudios commented on August 20, 2024

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

from swipe.

stephanie-walter avatar stephanie-walter commented on August 20, 2024

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 !!

from swipe.

thebird avatar thebird commented on August 20, 2024

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

from swipe.

claytonlloyd avatar claytonlloyd commented on August 20, 2024

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...

from swipe.

k7coool37 avatar k7coool37 commented on August 20, 2024

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

from swipe.

mtamony avatar mtamony commented on August 20, 2024

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.

from swipe.

dwwd avatar dwwd commented on August 20, 2024

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'));
});

from swipe.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.