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>
Related
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
Setup:
I have a website that is hosted locally on a Desktop Computer, I have a touchscreen hooked up to that Desktop. The website is viewed on the touchscreen using Firefox.
Requirements:
Enable one-finger scrolling for my website from the touchscreen.
It should behave exactly the way iPhone's one-finger scroll currently works.
It only needs to work in Firefox.
Questions:
What is the best technology to use in this case? (JQuery/Javascript/CSS?)
Can you provide a working example/solution for me?
Thanks very much.
Ill let you work out the nuances, but something like this gives you an idea
$(function(){
var dragYStart;
var dragScrollStart;
$(window).one('mousedown',startDrag);
function startDrag(e){
dragYStart = e.pageY;
dragScrollStart = $(window).scrollTop();
$(window).on('mousemove',drag);
$(window).one('mouseup',stopDrag);
}
function stopDrag(e){
$(window).off('mousemove',drag);
$(window).one('mousedown',startDrag);
}
function drag(e){
var delta = dragYStart - e.pageY;
$(window).scrollTop(dragScrollStart + delta);
}
});
see example
UPDATE... found this this morning. this is probably exactly what you want
http://zynga.github.com/scroller/
The 'iScoll' library is archived. For posterity see:
https://github.com/cubiq/iscroll [archived/read-only]
https://web.archive.org/web/20170515081250/http://iscrolljs.com/
https://web.archive.org/web/20180726185738/http://lab.cubiq.org/iscroll/examples/simple/
As of 18/5/2021 all links below 404.
For iOS-style scrolling on touch-aware devices (works great on desktop, too) iScroll is a great solution.
Point the touch-device in question to this demo url : http://lab.cubiq.org/iscroll/examples/simple/
Features Include:
Pinch / Zoom
Pull up/down to refresh
Improved speed and momentum
Snap to element
Customizable scrollbars
-Via the iScroll 4 docs
use "mine" js plugin
I also have swipe event handler :D
http://hoangminhdat.com/myLab/dragScrollJS/
It doesn't work on handheld device, but work great on desktop, it's also very simple
I made it :D
I'm looking to create a slider/scroller with javascript for the iPad. I created one using JQuery UI, but it's not supported on iPad.
I'm looking to create something simple, where the user can drag an image left and right along a track. I've looked all over the place for some simple insight on how to do that, all I find are tutorials or links to jquery plugins.
I'm not sure I can use the built-in slider from jquery-mobile, as I have specific images to use, and it doesn't look like it can be skinned.
Any help is welcome.
jQuery Tools Scrollable is iPad/touch friendly.
As an example, checkout the custom scrollable slider on trekk.com (works on iPad) that I built with jQuery Tools.
I recently used a plugin called Flexslider (http://flex.madebymufffin.com/) that supports swiping between images on iOS.
With the most latest updates Google has been rolling out, the sites have all been getting custom JS scroll bars (at least in Chrome).
What I like most about it is that its simple and works perfectly. Until now a lot of the JS scrollers that I have seen don't function that well - i.e. if you scroll really fast or scroll and move your mouse around they don't function that well.
Hence I'm just wondering if anyone know of any scroller out there that is simple/small (code foot print is small) and functions well (as mentioned about).
I have thought about using jQueryUI's scroll as a base, but for my needs I can't take on jQueryUI for this one feature.
They're done by styling ::-webkit-scrollbar psudo-elements with CSS, not JS.
I have been using the lion bars jquery scroller, and I think it meets all the specifications you mentioned, give it a try.
Take a look at https://gist.github.com/fanzeyi/3995618
Works fine for me.
=]
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.