Develop Reference

make this plugin able to swipe in desktop

I found this light and great slider plugin
https://raw.githubusercontent.com/ximan/swipeSlide/master/js/swipeSlide.js
that work great in mobile but I also want it to be able to swipe in desktop.
Then in the swipeSlide.js,
I replaced this var events = ['touchstart','touchmove','touchend']; to this var events = ['mousedown','mousemove','mouseup'];
but the behavior is not right.
DEMO is here, to see it working u have to switch into mobile mode (using chrome inspection tool)

Fixing SwipeRight - JQuery Mobile

I am having a difficult time using the swiperight function in JQueryMobile. My issue is that when I assign it to a div:
$(".leftSide").swiperight(function() {
alert("Working");
});
It is really hard to activate the swiperight using my finger on my android device. If I use it on my computer screen using my mouse it works fine.
My main page is zoomed in by 170% on an device and my dimensions are for the .leftSide div are: 125px x 50px
How can I make this work better? Am I doing something wrong?
All I want is the swiperight function so I made a custom download and only supply the custom.min file (I don't want any of the css or image work).
Suggestions, Thoughts?

Hey guys so after looking around I found a solution until JQuery fixes this issue to support Android Chrome. Here is a plugin that I found that supports everything.
http://www.awwwards.com/touchswipe-a-jquery-plugin-for-touch-and-gesture-based-interaction.html
This works perfect on all browsers I have tried and all devices. No delays or inconsistent results.
David

How can I monitor scroll position while scrolling in Safari on iOS?

I currently use $(window).bind('scroll', foo); to monitor $(window).scrollTop() and do stuff to create a parallax effect.
In all desktop browsers foo() is called for each pixel the user scrolls, and everything is nice and dandy. In Safari on iOS, the scroll event is only fired AFTER the scrolling is finished.
I added $(window).bind('touchmove', foo); to make sure the function is called during the swipe in iOS, and it got me a little bit further. When user releases finger, the page continues to scroll, but the event stops firing.
Any ideas?

When I saw your question, I was planning to do a polyfill for this (if such does not exist?). Unfortunately I've had very little time.
The idea is to have a setInterval, which is initiated ontouchstart, and it checks whether document.body.scrollTop has changed since last time, eg. for every 20 milliseconds. And if it is, then we manually dispatch the scroll event. Otherwise we clearInterval since apparently there's no more scrolling happening.
This it would be in brief. If you got more time (than I do), then feel free to try with those guidelines.
Edit: Now, reading further, the same idea is seems to be suggested on the other answer. Are you certain that intervals are stopped whilst scrolling on iPad?

I highly recommend using the "Skrollr" javascript library. It is by far the best mobile scrolling animation option that I've found to date and is very easy to get up and running quickly. Create animations and manipulate CSS based on a start and end scroll position. Create as many data scroll positions and animations as you need for most standard CSS properties.
In the following example the background color would animate over the course of a 500 pixel scroll:
<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>
Checkout the repository on Git: https://github.com/Prinzhorn/skrollr
Skrollr Demo Example: http://prinzhorn.github.io/skrollr/
Awesome real world example: http://www.fontwalk.de/03/

Apple's webpage for iPhone 5c uses some parallax scrolling effects that seem to continue with your finger still touching the screen and scrolling. So I guess javascript can't be entirely disabled during scroll. Tumult Hype provides this functionality too.

While this isn't possible out of the box, so to speak, you can do it using iscroll
So, you'd use iScroll for iOS and Android mobile devices / tablets, and use the way you're currently doing it for desktop devices.
iScroll has a bunch of options for callback functions to be called on certain events - such as 'onScrollMove', 'onBeforeScrollEnd', 'onTouchEnd', etc. Unfortunately, there's not an option to execute a callback on "EVERY position change, including changes cause by the momentum of scrolling after the user has stoped touching the screen". But, it's easy enough to add one.
In the iScroll source, around line 127, near the "//Events" comment, add a new variable:
onPosChange: null
Then, around line 308, at the end of the "_pos" function, add this line:
if (this.options.onPosChange) this.options.onPosChange.call();
(that will just call the function passed in the "onPosChange" option, if it exists).
Having done that, the following example code will set up iScroll for the div with id="iscroll_container", and will print the Y-offset to the console each time it changes:
var myScroll;
function loaded() {
myScroll = new iScroll('iscroll_container', { onPosChange: actOnScroll });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
//Use this for high compatibility (iDevice + Android)
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
function actOnScroll(){
console.log('got a scroll move! Vert offset is: ' + myScroll.y);
}
Note, Ben the Bodyguard Parallax Site works on iPad by using iScroll (they use a much older version of iscroll and don't do it exactly the way I described here)
Also, Life of Pi Parallax Site works on iPad really nicely - I can't figure out how they do it, but at least it proves it's possible!

This could be a bug with jQuery itself: http://bugs.jquery.com/ticket/6446
That ticket has been open for a while and pertains to iOS 4, but perhaps you should investigate calculating the scroll position with pure javascript.

As I know there is no javascript execution while scrolling on the most mobile devices.
There are some workarounds (f.e. iscroll) out there.
Iscroll is using css-technique "transform".
But there is no way to execute javascript while scrolling.
I suppose the smoothe scrolling-algorithm is too expensive.

Horizontal swipe slider with jQuery and touch devices support?

I need to make a product slider like this ( see red area ) swipe slider with momentum.
It should work on Desktop, iPad and Mobile browser. Do you know any jquery/jquery mobile plugin to achieve this.
The effect I want is almost similar to this http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html (but it's not touch compatible)
and exactly like "Top 25" section in Apple's iPad app named "Trailers"

In my opinion iosSlider is amazing. It works in almost any device and it is well documented. It's free for personal usage, but for commercial sites license costs $20.
Also a great option is touchCarousel or RoyalSlider from same author. These two have everything you'll need, but also not free and have a price of $10-12

I would also recommend http://cubiq.org/iscroll-4
BUT if you're not digging on that try this plugin
http://www.zackgrossbart.com/hackito/touchslider/
it works very well and defaults to a horizontal slide bar on desktop -- it's not as elegant on desktop as iscroll-4 is, but it works very well on touch devices
GOOD LUCK!

If I was you, I would implement my own solution based on the event specs. Basically, what swipe is - it's handling of touch down, touch move, touch up events. here is excerpt of my own lib for handling iPhone touch events:
touch_object.prototype.handle_touchstart = function(e){
if (e.targetTouches.length != 1){
return false;
}
this.obj.style.zIndex = 100;
e.preventDefault();
this.startX = e.targetTouches[0].pageX - this.geometry.x;
this.startY = e.targetTouches[0].pageY - this.geometry.y;
/* adjust for left /top */
this.bind_handler('touchmove');
this.bind_handler('touchend');
}
touch_object.prototype.handle_touchmove = function(e) {
e.preventDefault();
if (e.targetTouches.length != 1){
return false;
}
var x=e.targetTouches[0].pageX - this.startX;
var y=e.targetTouches[0].pageY - this.startY;
this.move(x,y);
}
touch_object.prototype.handle_touchend = function(e){
this.obj.style.zIndex = 10;
this.unbind_handler('touchmove');
this.unbind_handler('touchend');
}
I used that code to "move things around". But, instead of moving, you can create your own algorithm for e.g. triggering redirect to some other location, or you can use that move to "move/swipe" the element, on which the swipe is on to other location.
so, it really helps to understand basics of how things work and then create more complicated solutions. this might help as well.
I used this, to create my solution:
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Have you tried iosSlider? It can do exactly what you need.
http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/

Take a look at iScroll v4 here: http://cubiq.org/iscroll-4
It may not be jQuery, but it works on Desktop Mobile, and iPad quite well; I've used it on many projects and combined it with jQuery.
Good Luck!

This one could fit your need:
http://caroufredsel.frebsite.nl/
Add jquery Touchwipe for touch support
Then in the configuration add
scroll : {
wipe: true
}

Have you seen FlexSlider from WooThemes? I've used it on several recent projects with great success. It's touch enabled too so it will work on both mouse-based browsers as well as touch-based browsers in iOS and Android.

I found this, hope it helps
http://www.zackgrossbart.com/hackito/touchslider/

Ive found another: http://swipejs.com/
seems to work nicely however I encounter an issue with it when paired with bootstrap on the OS X version of Chrome. If total cross-browser compatibility isn't an issue, then you're golden.

I have made somthink like this for one of my website accualy in developpement.
I have used StepCarousel for the caroussel because it's the only one I found that can accept different image size in the same carrousel.
In addition to this to add the touch swipe effect, I have used jquery.touchswipe plugin;
And stepcarousel move panel rigth or left with a fonction so I can make :
$("#slider-actu").touchwipe({
wipeLeft: function() {stepcarousel.stepBy('slider-actu', 3);},
wipeRight: function() {stepcarousel.stepBy('slider-actu', -3);},
min_move_x: 20
});
You can view the actual render at this page
Hope that help you.

This looks similar and uses jQuery mobile http://www.irinavelychko.com/tutorials/jquery-mobile-gallery
And, the demo of it http://demo.irinavelychko.com/tuts/jqm-dialog-gallery.html

Have a look at jQuery scroll view (demo here). Here is the git hub repository for that experimental project. Look at their html to see what files need to be included and what attributes to add to the elements you want to be scrollable.
I have used this to be able to scroll div elements horizontally on touch devices.

You might be interested in the following:
jQuery Mobile Carousel (github)
jQuery Mobile
I realize this is not a jQuery solution, but Sencha Touch framework is pretty good for building your target UI. Example (click the Carousel sidebar link):
http://dev.sencha.com/deploy/touch/examples/kitchensink/

Checkout Portfoliojs jQuery plugin: http://portfoliojs.com
This plugin supports Touch Devices, Desktops and Mobile Browsers. Also, It has pre-loading feature.

With my experiance the best open source option will be UIKIT with its uikit slider component.
and it is very easy to implement for example in your case you could do something like this.
<div data-uk-slider>
<div class="uk-slider-container">
<ul class="uk-slider uk-grid-width-medium-1-4"> // width of the elements
<li>...</li> //slide elements
...
</ul>
</div>

scrolling different elements (div style="overflow-y: auto") on mobiles and tablets

=]
Here's the thing:
We're developing a webapplication with HTML5/CSS3/JavaScript/jQuery technologies. When I test it in my desktop PC's browser, everything is cool and fully functional. That's not the problem. =]
But... And here's the problem where I'm stuck with currently...
When I'm trying to test it on mobile (or tablet) the divs don't want to scroll. I know that mobiles (and tablets) handle events differently, they have (sometimes, somewhat) different events getting
We don't have too much time to get over with this (as usual -_- ), but still, we have to bring a solution. We don't want to create another UI for NOT dekstop hardwares, so I'm looking for a solution which can be triggered by "chaining" the mobile event handlers together with the basic events.
We're using div's and CSS properties overflow-x, overflow-y which need to be scrolling on mobile (and also tablet) devices. What would you recommend? how would you do it? Which would be the perfect and time-effitient method?
Thank you in advance for answering! =]
Best for everybody,
Ben

Thanks for the helps guys, but I've already found the way of doing this. =) I'm gonna share it with you, so you'll know.
First of all, Android 3.x tablets do have scrolling divs.
But to make it work on 2.2 and ipad: Here's the code I've been using (click on me!)
So you just pass the id of the div you want to scroll for the touchScroll() method (after of corse including on your html's head) et voilá! =)
I've also extended the code (copy > paste code) with another function which accepts an element:
function touchScrollElement(element){
if(isTouchDevice()){
var scrollStartPosY=0;
var scrollStartPosX=0;
element.addEventListener("touchstart", function(event) {
scrollStartPosY=this.scrollTop+event.touches[0].pageY;
scrollStartPosX=this.scrollLeft+event.touches[0].pageX;
},false);
element.addEventListener("touchmove", function(event) {
if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
this.scrollTop+event.touches[0].pageY < scrollStartPosY-5) ||
(this.scrollTop != 0 && this.scrollTop+event.touches[0].pageY > scrollStartPosY+5))
event.preventDefault();
if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
this.scrollLeft+event.touches[0].pageX < scrollStartPosX-5) ||
(this.scrollLeft != 0 && this.scrollLeft+event.touches[0].pageX > scrollStartPosX+5))
event.preventDefault();
this.scrollTop=scrollStartPosY-event.touches[0].pageY;
this.scrollLeft=scrollStartPosX-event.touches[0].pageX;
},false);
}
}
So that'S the current solution... =)

iOS 5 has support for overflow:scroll and overflow:auto. You just have to add this CSS rule and the scroll should work:
-webkit-overflow-scrolling: touch;

When I'm trying to test it on mobile (or tablet) the divs don't want to scroll.
What are you trying in order to make them scroll? If you‘re trying to make them scroll from your code, we’ll need to see the code.
(If on the other hand you’re trying to make them scroll via user-interaction, on iOS you can scroll individual scrollable elements on the page by dragging with two fingers instead of one.)

Mobile implementation of overflow: scroll is horrible...
You can use two fingers on an iOS device but users generally don't know that, and pre-Honeycomb Android operating systems don't have any implementation for overflow: scroll and just clip the overflow like overflow: hidden. Even the Honeycomb implementation is apparently choppy and not a good user experience.
You can use one of a few pre-made JavaScript based packages that try to implement cross-platform scrolling but they generally fall short of a "stellar user experience."
jQuery Mobile has an experiement called "Scrollview" and iScroll is one that comes to mind.
--EDIT--
I just came across a JavaScript Library named Wink that has a nice scrollable area plugin. Check-out Wink Toolkit.