thebird / swipe Goto Github PK

I just saw the Swipe2 branch and noticed that this feature is still not there so i'd like to ask if you have any plans to implement a position indicator feature?

I know it is not hard to do it manually with a little bit JS and html but it would be much more elegant to have it built in with an option like 'indicator: true' or something.

What i am doing right now achive this is something like

slider_li_el.each (index) =>
  slider_position_el.append("<li data-position='#{index}'>V</li>")

I have a

where the above generates li's get appended to. You see this requires some JS and some HTML which i'd love not have to write. Especially when you have multiple sliders.

Just want to ask if this support a swipe down like the functionality of an android or IOS phone swipe down notification.

At the moment the callback is fired if i only start draggin the slide some pixels and then remove my finger. I am still on the same slide but the callback fires.

I think it would be better to only fire the callback if the slide has actually changed.

Is there any way to have two separate sets of images/content use the same swipe instance?

For example, two image galleries stacked vertically, but both transition the same when one is 'swiped'.

Hi,

the issue is that callback fires before the transition ends, which is very bad on touch devices (iphone, ipad) because it will dramatically impact the performance and block the UI for a fraction if you do anything within the callback method.

It would be much better to fire callback after the transition has ended. I know there is a "transitionEnd" function but there is big difference between those 2, as you know of course.

I need to do certain things only if the slide hast changed, so this is where i would use "callback" but i can't do really anything because it will make the experience worse have the slide stutter for a moment which feels very bad.

In my case, i have 6 videos per slide and i pause the currently playing video if the slide changes. Using callback at the moment, causes a freeze for a small but really noticeable moment. Using "transitionEnd" does not, but "transitionEnd" will fire even if the slide not change but bounced back to the same slide.

Please consider firing the "callback" function after the transition ends to improve performance.

I know this is intended for swipe areas, but it seems to have a goal of being generally web usable for slides too.

Noticed that the tab key creates some bad behavior.
Test it out on your home page by keying tab a few times until you start switching tabs.

My use-case is essential a webform that gets used on the desktop and iPad. Ended up just killing tabs in my form to solve it since they always have the focus.
// Kill tab key var TABKEY = 9; $('#webform-client-form-15993 input').keydown(function(e) { if (e.which == TABKEY) { console.log('tabbed'); e.preventDefault(); return false; } });

Sorry i do not know what version of Android this is, but it is a very new phone.

The demo page, swipejs.com , does not work with the swipe gesture. Previous and next do work.

Is Swipe JS working for Ajax loaded elements ?

I'm working on a dynamic web page that may need to generate different image slide show based on user interactions. So a workflow may look like create new swipe -> destroy swipe -> change images in dom -> new swipe.

My question is do i need to do anything specific to destroy swipe. One thing I can think of is the stop it so there is no set time out action. Is it the right way?

if (slider) {
  slider.stop(); // this will stop the set time out function
}
slider = new Swipe(document.getElementById('summary-slider'), {  
     speed: 400,
     auto: 2500         
});

Very sorry if this is a easy or dumb question but this problem occurs to me:

Whenever I put any select or input type on any other page than the first, he seems to render these select options outside the swipe area. This I found out with the help of Firebug, any suggestions for a solution?

I would like to be able to have forms on every slide, thanks in advance!

but in the code we see fallback support for translateX (transforms 2d), so detection should probably be using

[ 'transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform' ]

instead of

[ 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective' ]

(list taken from modernizr.)

I am testing on latest Opera Mobile 12 on Android 2.3, and the swipe is not working as intended; changing detection makes it works again.

When dynamically adding and removing elements you have to manually update Swipe.length after each new slide added/removed. I'm no jedi when it comes to plain JS, but would it be possible to bind some event on DOM updates for the children of the (inner) wrapper?

Has anyone integrated it with twitter-bootstrap yet? I like Brad's Swipe way better than their carousel.

Recommendations on swipe1 or swipe2 integration? Any known tips, tricks etc to know about?

thank you in advance !!

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

Writing a fullscreen swiping magazine. Kept crashing iPad1s after 5 pages or so of content... even with all the JS optimizations, queued DOM builds, etc I could think of.

Turns out you can DRASTICALLY decrease resource usage on older devices by toggling visibility CSS.

Mine looked like this:

.page { visibility: hidden; }
.page[role] { visiblity: visible; }

Where role was assigned to the previous, current, and next items on each swipe callback. Arbitrary, could be any valid selector.

Caveats:

• Multiple, fast swipes can bring in invisible pages.
• Some flickering on iPad1 (But a real step up from outright crashing!)

Please let me know if you need any more info. I spent a ton of time trying to figure this out!

When you reach the last slide and still push "next button" the slider doesn't start from beginning again.

Hi,

Version 2 works great - especially on iPad :) Of course I also need to support Android. For
testing I'm using the Sony Tablet S with Android 3.2.1.

I don't know the exact value but if the slides get to large (I guess 600px +) I got cut slices
on Android when sliding them. It seems to be a refresh issue on this OS. It doesn't matter
if it's just a background color or images. Can anybody confirm this kind of behavior and
knows an solutions to this ugly bug?

Thx
TC

Support for panning single panorama images will be amazing!
Anyway, thank you for this neat piece of work.

Does this not work in Internet Explorer 7 or 8? Has anyone gotten it to work?

If you swipe very quickly several times it seems like the transition end event doesn't get fired (assuming because the actual transition doesn't fire?). This can be seen in the example below (mobile safari doesn't seem to like jsfiddle), everytime the callback is called we prepend to the list with the index. Press on the next link slowly and you see all callbacks, press quickly and you see we miss some indexes:

http://jsfiddle.net/4a2yy/3/

A hacky workaround is to call the callback at the end of the swipe function. I did this in the demo below, calling it within a setTimeout as otherwise it effects how smooth the transition appears in mobile safari.

http://jsfiddle.net/VecTR/9/

I ended up getting this work somewhat, just need to fork the project and submit a potential implementation. The issue I had, was I was using this library to swipe the entire application, so you advance from one screen to the next. CSS transformations are much faster than using top/left etc, but performance is awful once you hit a large pixel count overall. In my example, the library calculated a total container width of 20k which made leveraging other libraries (such as jquery mobile) very difficult as any other rendering caused pauses.

My solution to this problem was two things. First, I only made "visible" the current slide, previous and next slide. That way, during transitions, it is only rendering 3 slides worth, instead of them all. On transition completion, it would then recalculate what prev/cur/next is, flip visibility and continue. I also had to put a restriction on preventing the user from swiping until the transition completed so they couldn't slide into a hidden one.

For the above to work, I have to absolution position everything instead of using inline, so that when something is display:none, things were positioned as they should. I believe I tried doing visible:none, but it still draws it even if it isn't displayed. Alternatively, we could wrap the content containers again and hide its content so we can maintain position through transitions.

Im not 100% sure on how to do the config for this, could you please explain more ?

My js is:

var sliderTicker = new Swipe(document.getElementById('sliderTicker'));

I would like the slider to auto play on page load.

With continuous mode I thought the images woud loop seamlessly. Instead, when you reach the last image and call next(), the animation plays in reverse before returning the first image.

Hi Brad,

Thanks for creating this wonderful swipe. It is the most straightforward one after I tried with other similar library and with great documentation!

In my application I need to nested swiper inside swiper, and the current swipejs code didn't support that, so I hacked into your core and added

" e.stopPropagation();" in within both onTouchStart (line177) and onTouchMove (line 201) , and it works like a charm. See if you want to include that in your next version so that nested swiper is possible out of the box.

Cheers,

DaFrik

I’m trying to put iframe player from YouTube and Vimeo but SwipeJS behaves very strange when you put iframes as content inside slides.

• it seems like iframe is catching all touch events so only way you can swipe left/right is when you touch area outside iframe
• YouTube player acts very strange in a way that it doesn’t show iframe content but when you tap on empty area player activates and upon pausing video everything shows correctly

I’ve tried with their respective JS APIs but, as with iframes, they’re also very buggy and "beta-ish" so support is not standardized across platforms.

I just logged this issue which you might be interested in.

jquery-archive/jquery-mobile#3619

The looping function works fine when the transition is on auto or trigerred by next() commands but doesn't seem to work when transitioning with the swipe gesture on touch screens.

This doesn't seem to be just my issue because the same occurs on http://swipejs.com/

Is there any way of implementing this? That would be awesome.

Hi there,

I'm a sort of newbie to js and I was wondering if the following is possible?

If I make a link on one page, and when clicked/touched on, I want it to go to a certain li element. So not next or previous but for example 3 slides further, how do I do this and is this even possible?

I guess I have to name the li elements and change something in the onclick?

Hope someone can help me!
Regards,
Lizzie

Hi,

I used your great plugin on iphone and ipad. It works very well but not on my HTC (Android 2.3.4).

The swype gestures and the buttons prev/next don't work.

How can i fix it ?
Thank you !

The swipe action continues past the last slide (first slide bounces back as expected).

My DOM element hierarchy is: form div fieldset

There are a few hidden inputs after the last fieldset.

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.

Great library. I use it on iPhone devices. I just ported to Android 2.2 and found a necessary change. Not sure why I had to do this.

In the onTouchMove() function there is a test to ignore pinch/zoom gestures. Specifically there is a test against the scale of the event:

// ensure swiping with one touch and not pinching
if(e.touches.length > 1 || e.scale !== 1) return;

On a Motorola Droid 2 running OS 2.2 the e.scale member variable is always undefined for a swipe. "undefined !== 1" and thus the onTouchMove event handler never gets past this test. In my copy of your library I added the following hack just before the test:

if (e.scale == undefined) {
// Not sure what it means, but its not a pinch/zoom event
e.scale = 1;
}

pushing next & prev buttons works.

getBoundingClientRect is currently only being used to calculate the container width.

The method doesn't exist on iOS 3.0, which iphone 3gs are bundled with.

Is there any reason why another method isn't used? (ie clientWidth?)

If swipe is in a page that is hidden (e.g. a page that hasn't been shown yet) then initialising it won't work...

example: http://jsfiddle.net/4a2yy/4/ - press the show link to show the element

It's likely something to do with getting the width of the list elements but I have had a chance to debug it yet. Is this something you've see before? One solution is to call an event on showing the page and call the swipe when it fires...but this isn't ideal.

Thanks.

I was so impressed once we ironed a bug or two out with swipe.js that I wanted to try in on a new project controlling tabs like on your homepage. I was having great success until I tested it in IE8 where the current version fails.

No need to show you code, you can see for yourself on your site swipejs.com

Might this something you are interested in fixing, or are you only concerned with mobile atm?

Cheers.

Setup is not performed if it's only one slide in the Swipe. This makes the Swipe quite unpredictable and harder to handle. Since the width is not set on the slides it's quite hard to center the slides using "margin: auto".

Is there a way to add (or remove) li from Swipe? I would like to add 'pages' dynamically. I tried something like this:

$('#slider ul').append("<li><div>ADDED</div></li>");

but it did not go very well. I got the div showing underneath. I am guessing you have some size calculation that may need updating?

Problem:

If you have many elements, lets say cards, which should be flipped when tapped on them, you run into the issue when you try to swipe to the next page but your finger lands on one of those cards, it will flip the card. That makes no sense since what the user wanted is swipe to the next page, not flip a card.

It's like on the iPhone home screen, when tap an app icon it will open the app but if you want to swipe to the next screen and your finger lands on an app icon, it will ignore the tap and move to the next screen.

Now i have a very tacky solution and i really think it can be improved:

    var img = $('.show-video');

    var sliding = false;

    img.bind('touchend', function(e) {
        if (sliding === false){
            Animate($(this), 'flip');
        }
    });

    img.bind('touchmove', function(){
        sliding = true;
        $(this).bind('touchend', function(){
            window.setTimeout(function(){
                sliding = false;
            }, 200)
        })
    });

It toggles a variable (sliding) if there was a "touchmove" registered and prevents the card from performing its tap action on "touchend". If there is no "touchmove" then it just performs the tap action.

Hi there,

would it possible to load a html page if I swipe left?

thanks

Hi again,

Using your site as a basis I have created this code:

if ( Modernizr.csstransforms ) {

  var slider = new Swipe(document.getElementById('swipeFlexPageOne'), {
    speed: 200,
    auto: 2000,
    callback: function(e, pos) {
      var i = bullets.length;
      while (i--) {bullets[i].className = ' ';}
      bullets[pos].className = 'on';
    }
  }),
      bullets = document.getElementById('bulletPosition').getElementsByTagName('em');

}

It works, and if I take out the speed and auto function the slide indicator works, however it does not work once you manually swipe the elements itself...

Cheers,

Eric

I have a website that works on slides. You can navigate between them either by swiping the screen, or clicking on the menu elements at the top of the page. Independently, they both work very well, but say, if I swipe to PAGE 2 and try to click PAGE 1 on the menu, it all goes to hell. Somehow the callback doesn't seem to be totally called when navigating by touch on my iPad.

When initializing the swiper with non zero index, the swiper hangs after first or second swipe.

I would like to implement some filtering for the contents inside the slides. I'd love to get something working like Quicksand http://razorjack.net/quicksand/index.html

Now, to be honest, i have no idea how to do it. The main issue for me is that each slide is an element and the contents are nested within that element. So for the filter to work i would need to position them first with "translate" values and then rearrange them be changed its translate X and Y values.

I know this is nothing SwipeJS support but i though you could maybe give me tips on how to go about this.

Thanks

Hey

I need to dynamically add/remove swipe at runtime, so I'm using swipe 2 as I notice you've added a kill method to perform teardown. Unfortunately, using swipe 2 with the exact same initialisation as swipe 1, the styles on the container <ul> are not being applied:

var $wrapper = $('.mod-heroBox-inner');
if (useSwipe) {
    swipe = new Swipe($wrapper[0]);
}

Namely, the width of the <ul> is not being set as it was in swipe 1 (the width of an <li> multiplied by the number of list items). However, it looks like the styles for the <li> elements themselves are being applied.

Lemme know if that makes no sense, or if you need a test case! :)

Chris

Hi there,

First of all, I'd like to say that your swipe librairy seems really nice and lightweight. I was testing it trying to define if I could use it for my non-profit mobile app i'm developping.

I'M facing a strange problem that i'm not sure if I understand what causes it. I think it has something to do with the DOM being loaded before the slider injects itself (i might be wrong on that one).

I would really like if you could take a look at : http://mathieublanchette.com/swipetest

When you click on an element on the list, that gets you to the slider page but it's impossible to change the slide. Actually, if you resize the window (probably making the dom refreshing i guess), it works after that.

I'm waiting for your answer and thanks for this great work!

Mathieu B.

Thanks for your work on swipe and swipe2. I've tried to use disableScroll: true on a mobile phone layout:

http://goo.gl/BpFk3

but on my iphone it prevents me from scrolling the page vertically? I'm assuming that this is not the correct behavior and that it should instead disable the slider divs from scrolling horizontally.

I found a workaround and that was to incorporate the tap.js library (https://github.com/alexgibson/tap.js) so that the auto scrolling stops on touch/tap.

http://goo.gl/WCpPi

Other than that, everything seems to be working great.

I have 6 tabs in my slider. When video is on 5th and 6th tab and see black content instead of video. When I remove 1st and 2nd tab from html DOM I can see 1st video on 5th and ~50% (width) 2nd video on 6th page. Video in pure html site render ok, so I think that there must be some problem with sliding.

Hi,

I had to change this small piece because IE 8 kept a reference to this as "window".

// to play nice with old IE
  else {
      var me = this;
      window.onresize = function () {
          me.setup();
      };
  }

I'd love to see a option for adding transition-timing-function.