I'm looking to create an app like Tinder where users swipe through a photo stack. Does anyone know of a way to reproduce this effect cross-platform?
So far, I'm thinking of building a web app using jQuery Mobile with
TouchSwipe for swipe detection;
see: http://labs.rampinteractive.co.uk/touchSwipe/demos/
and jStack to display the images;
see: http://lab.hisasann.com/jStack/
Are there any suggestions of a better way to do this?
Here is a jQuery Plugin for that:
jTinder
I've finally found a hack that does something like what I described in the question:
Using the touchpunch library (http://touchpunch.furf.com) for drag and drop, full-screen images, and drop zones to the right and to the left seems to do the trick.
Check out Swing JS : https://github.com/gajus/swing
and for angular: https://github.com/gajus/angular-swing
see this thread also:
Tinder style drag gesture and drop with Javascript?
Hope it isn't too late to post a suggestion. So, hammerjs allows to listen to multitouch and gesture events. And supports Android, iOS and Windows Phone.
http://eightmedia.github.io/hammer.js/
Can try calling the photostack control's next/previous step based on the gesture event?
Related
I am building an app using TVJS and TVML for Apple TV. Is there an event to help me detect when the user has swiped the siri remote's touchpad? When I'm showing an image full-screen and the user swipes, I want to move to the next/previous image. But I can't seem to find any event for detecting these swipes. Thanks!
I don't think that you can 'detect these swipes' and react with them manually, TVML and TVJS use standard templates and have particular interactive components that can be laid out on screen and then the Apple TV handles moving between those elements by interpreting the commands from the control.
TVJS only allows you to listen to a limited number of events
enum TVElementEventType : Int {
case Play
case Select
case HoldSelect
case Highlight
case Change
}
You should be able to use the functionality you described by using the correct templates or elements, such as the OneUp template.
Without knowing how you've implemented this so far, there isn't anything else I can recommend. please show the code you are using for more accurate advice
I have few questions here, regarding creating app in Adobe Air using Starling and feathers.
I created yet a very simple app, which has Feathers list controller with static data provided to its dataProvider. According to the code it should work fine, but there are three major issues I am facing.
1: Touch/Click Positions
I am using:
list.addEventListener( Event.CHANGE, list_changeHandler );
Now the problem is, clicking coordinates are not correct. Clicking on 3rd Item triggered 4th item, to trigger 3rd, 2nd item needs to be clicked it's half way through etc.
2: Nothing, without Theme
I am using a custom theme, came along with a tutorial. If I don't use the theme, I am unable to see anything on the screen, somehow.
3: Resolution (Device Simulator) Problem
Though buggy, but it works with Theme, but my app doesn't fit with the resolution for each device simulator. Either its, iPad or iPhone 4 or any android simulator.
Also, can anyone please also explains, what is significance and use of Context3D render mode in starling class.
Any help is appreciated:
Thanks in advance
Waqar Iqbal
Starling is a Stage3D framework that displays content directly on graphic card using Context3D. Everything displayed by Starling is always under the regular display list. Feather is a component framework based on Starling.
Stage3D cannot handle any mouse operations so Starling and Feather simulate all their mouse event (those mouse event never really happen anywhere, they are created by calculation of mouse position on the stage)
not sure, never used Feather
Starling does not handle screen density and dpi calculation, if you want your app to fit any screen you'll have to handle it yourself.
I think you should see the example carefully. if u want to use any feathers component either you have to use feathers theme or custom theme.
if you use feather theme you need to provide theme path and before using any component you need to initialize that theme.Then use component any where.without theme you will not see any thing.
1: Touch/Click Positions
please provide minTouchHeight in class theme of DefaultListItemRenderer like:-
renderer.minWidth = this.gridSize;
renderer.minHeight = this.gridSize;
renderer.minTouchWidth = this.gridSize;
renderer.minTouchHeight = this.gridSize;
2: Nothing, without Theme,
3: Resolution (Device Simulator) Problem
Follow the example given in feather library
feathers-2.1.1\themes\MetalWorksMobileTheme\source\feathers\themes
I have created a Polymer application that is listening for the trackstart, track and trackend events. It uses these events allow a SVG element to be dragged around. The events work correctly for desktop, however, for my Galaxy Nexus and Nexus 10 the events are not fired.
I have looked at the source code in the polymer-gestures project and it seems like the events are implemented using the touchstart, etc events in touch.js.
I'm using version 0.3.1 of platform.js which I assume has the polymer-gestures 0.3.1 in it.
How can I get the trackstart, track and trackend (also hold would be nice too) events working on my touchscreen devices?
So it'll be the touch-action:none CSS value that is needed to make sure the events are handled with JavaScript.
I am using this wrapper someone recommended for my iOS cocos2dx game link. It works when I call the showInterstitial() method, but when I try to use the showMoreApps the dialog appears for a split second and then disappears.
In my AppDelegate::applicationDidFinishLaunching() I do this
ChartboostX::sharedChartboostX()->setAppId("REDACTED");
ChartboostX::sharedChartboostX()->setAppSignature("REDACTED");
ChartboostX::sharedChartboostX()->startSession();
ChartboostX::sharedChartboostX()->cacheMoreApps();
And then when I want to call the showMoreApps I do this
ChartboostX::sharedChartboostX()->showMoreApps();
Have a look at my wrapper for Chartboost. It has been updated to use the latest version of the Chartboost SDK and works perfectly in my cocos2D-x game. I have not finished the android documentation yet but you can probably work it out yourself if you need to. The documentation for iOS is almost finished and quite easy to follow.(FYI the class ADELLE is the chartboost delegate and is an objective C++ class so you can use C++ in it as you normally would mixed in with the objective C. This is the same for AdWrapper.mm)
Check it out and see if it works for you.
https://github.com/Lochlanna/Chartboost-Cocos2D-x
I'm trying to make a google maps style interface for a design project. I've got the drag/drop and zoom functions working, but I also want to make it react to gestures on a trackpad (macbook). I assumed 'listening' to the event.delta of a MouseEvent would do the trick, but somehow it's not working. So what's wrong with my code?
stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
function onMouseWheelEvent(event:MouseEvent):void {
tafelOrigineel_mc.y += event.delta;
}
I have loaded the flash MouseEvents earlier in the document, so that shouldn't be the problem. After I got this working, I will try to use it on the x-axis too. Is that possible with the MOUSE_WHEEL eventlistener?
Thx in advance
It is a long time problem regarding flash player on MacOS.
MOUSE_WHEEL event won't dispatch on MacOS. Though there are some workarounds involving the use of JavaScript to detect the use of the wheel (over the entire flash content), if it isn't a issue, try checking one of those.
There is a list in this blog post:
http://www.impossibilities.com/v4/2009/03/06/flash-mousewheel-implementations-for-mac-os-x/