Javascript Library - Mobile Touch - Draggable Objects on axis without disabling scroll - javascript

I have a page with a slider carousel. Recently, I've been tasked with adding touch interfacing to explore the slides by finger swiping.
I located an older jQuery plugin which appears to be no-longer supported. It allowed for touch sliding, as required, but it disabled the ability to scroll the page with a vertical swipe if the swipe originated within the slider carousel element's boundaries.
Does anyone have a resource for an element draggable library that allows to a specified axis (horizontal, for example) that won't disable vertical scrolling intentions if the origin of the swipe occurs within the element? This should function across devices like iPhone, Blackberry OS 5+
engadget.com has a slider on their mobile website that accomplishes this.

There are a couple jQuery gesture plugins, that may help you out. You could easily integrate one of these into a custom slider plugin.

Related

jScrollPane on touch devices - drag button is in reverse

I've implemented jScrollPane and I'm having an issue on touch devices.
The example I'm using is http://jscrollpane.kelvinluck.com/drag_size.html where I have a vertical scroll using a circular button image for the scroll on the track. The class that's added to this is jspDrag.
On desktop, when you click and scroll the vertical button, it drags down and the content scrolls up, which is natural in my eyes.
The issue I'm facing is on touch devices (check the example URL above in Chrome using iPhone/iPad emulation in dev. tools) where you can't actually drag the button down - you actually have to scroll it up for the content to scroll?!
Users are definitely not going to know this as it's a button rather than a content block that you're using as a control.
I'd like to be able to touch and drag the button down on touch devices, rather than up, to make the content scroll.
Has any one come across this issue and managed to solve it? I've searched SO and Google Groups with no luck.
Thanks.
Unfortunately jScrollPane seems to just work like this, with an annoying caveat, which is unfortunate - I really liked the plugin.
I came across http://manos.malihu.gr/jquery-custom-content-scroller/ which functions the way it should and runs super smooth on touch devices.

jQuery Scrollbar Plugin

Hi I am stucked in my big project using the custom scrollbar. None of the plugins are 100% working or I may be unaware of some plugins.
which jQuery scroll bar plugin is best? in given list of circumstances below.
proper touch / scroll (cross browser and device compatibility)
nested conditions
inside popup and inside drop down.
inside ajax updated contents
resize / orientation scenarios
for devices: auto focusing for input inside popup
supported in major devices including samsung low end touch phones.
Has any one using this type of custom scrollbar which is perfect for all type of my scenarios?
I'm using the plugin by Malihu. It does the job pretty well and have dozen of options so you can personalize it. I think it passes all your requirements.
http://manos.malihu.gr/jquery-custom-content-scroller/

HTML/JS/Jquery: Mimmick iOS Homescreen drag between pages

I've tried a few libraries and Jquery plugins for sliding "pages" through the viewport using touch gestures, but none of them have "physics" similar to the iOS homescreen.
My goal is to assign a three-finger gesture that works on both touchscreens and touchpads that will simply move through a set of "pages" horizontally in realtime, and when the touch is released, "snap" to the currently most-visible page in the viewport. Just like the iOS homescreen.
SwipeView will give you that. It's an infinite scroller that only loads three pages at a time. It's very quick (the company I work for uses it for one of their products.)
You'll need to customise it to work on three fingers rather than just one. If you need any help using it, I'll be glad to help =)

Can webkit's vertical scroll behaviour be disabled temporarily on Android 4.0.4?

I have 2 horizontal sliders on a mobile web page (This is a mobile web application, not an App). On some android devices with smaller screens (or perhaps just different height/width ratios), just touching the screen activates the vertical scrolling behaviour of the device/browser. This interferes with the ability to use the horizontal sliders - the browser 'thinks' the user wants to scroll up and down but actually they need to drag a slider handle left and right.
Is there a way to prevent the vertical scrolling behaviour on a touch event within a slider handle and then have it renabled on touch up? Does the Webkit stock browser on Android 4.0.4 support this?

Sencha Touch do not set scale and allow scrolling and resize on iPhone or iPad

I am playing around with Sencha Touch, especially with examples like http://dev.sencha.com/deploy/touch/examples/
However I am faced with a problem, when using the component the scale is set on the iPhone and the user cannot scroll the page or zoom in or out.
How may I disable these settings as I would like to have the carousel on a page which can be scrolled, and zoomed in/out.
Thanks.
[Sencha person] You can't zoom in or out of a Sencha component. Having fixed UI Chrome is one of the reasons to even use a UI framework (otherwise you'd might use a simple mobile-optimized web page).
You can have a scrollable area within a carousel, but you might want to consider whether that's really the best UX, since the carousel is already a scroller (it just scrolls in fixed increments) Take a look at touchstyle.mobi/app for an example of a data-store backed carousel.
I could be wrong, but it seems to me that the goal of sencha is to make full screen apps, so it seems logical that you cannot zoom/scroll the page ?
There are methods and plugins for zooming if you want.
Carousel ImageViewer (plugin) - Zoom feature
Pinch-to-zoom in panels
Pinch emulator (plugin)

Categories