You can also test official demos at http://www.jacklmoore.com/zoom/ on simple responsive mode on Firefox with Tap emulator, it's just not working and I don't get why.
The code I use is combo with colorbox taken from jQuery Zoom inside a colorbox
$('a.colorbox').colorbox({
'onComplete': function(){
$('#cboxLoadedContent').zoom({ on:'click' });
}
});
Which works fine on desktop. We tried click and grab modes. On mobile it's just full screen image, beyond phone resolution size and does not move.
update: found on official github https://github.com/jackmoore/zoom/issues/130 the user was trying to add touch:true but no success.
I ended up wrapping my code above with if ($(window).width() > 786) {} so the jQuery zoom is triggered only on desktop devices and on mobile you just expand image with default method built in every phone (you know, the thing you do on your phone photos, with your two fingers that zooms photo in and out).
I'm working on a website where I have enabled aria-haspopup so it can work on Surface pro. The reason I'm doing that is because the first touch needs to show the css animation and the second touch needs to activate the actual url.
It works great in Edge & IE but I need it to work in Chrome. Are there any javascript alternatives to what I'm trying to accomplish?
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 am updating my scrolling game engine to output HTML5 code for the scrolling maps it generates, so that it can be used not only as a (somewhat-platform-specific) complete game creator, but also as a cross-platform HTML5 scrolling map editor. I got past the challenge of supporting the graphic tinting as described in my earlier question. And I have a nice sample running at http://sgdk2.enigmadream.com/ben/. However I have noticed that the mouse interaction for scrolling the map does not work on FireFox or on an iPod. It looks like iPod may use different events (ontouch etc) according to Native HTML5 Drag and Drop in Mobile Safari (iPad, iPod, iPhone)?. And that doesn't explain why FireFox wouldn't react. Isn't there a more universal way to support mouse or touch interaction? Do the touch events also work for mouse, or are they specific to touch? How would you recommend interacting with this scrolling map in the most cross-platform compatible way?
you need to correctly retrieve your srcElement
var srcEl = e.srcElement? e.srcElement : e.target;
try it
P.S.: see targets
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>