Comments (29)
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.
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.
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.
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.
Thanks so much! Those 2 lines of CSS have eliminated so many annoying visual quirks.
from swipe.
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.
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.
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.
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.
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.
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.
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.
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.
_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.
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.
Yes, I'll share both versions today.
from swipe.
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.
Ok guys, spent some time working with jQuery Mobile and Swipe2. Looks to be working perfectly:
http://fiddle.jshell.net/bradbirdsall/PT5d3/show/
Boom shaka laka :)
Feel free to start testing out the Swipe2 branch
from swipe.
Yep working great now. Thank you Brad. Awesome !!!
from swipe.
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.
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.
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.
Yeah, I've been firebugging it for about two days now and can't seem to get it to work.
from swipe.
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.
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.
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.
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.
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.
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)
- Which Swipe library should cdnjs host and autumatically update the repo
- How to display a partial view of the next slide? HOT 4
- 当只有两个滑动卡时,下滑出现bug
- How to adjust the height according to their own height when it is used for the whole page tab?
- i want text alert on click prev or next button...? HOT 1
- When i append div on document ready, My style is not applying. HOT 2
- Show multiple slides HOT 3
- Webpack 2 pull Jquery
- Ipad, iphione scroll problem
- vertical slides?
- Width calculation rounding - Edge browser
- Gaps between each slider item in latest Safari HOT 2
- FEATURE REQUEST: Run callback only if it’s on touch and not by function HOT 1
- Swipe does not work android mobile browser.
- Processing version of Swipe
- 切换后如何自动播放
- 调用slide方法后,自动滑动失效 HOT 1
- Pagination buttons and slideTo method go to a wrong slide.
- Extra space on left
- Can I use it with vue?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from swipe.