So I have two leavers/divs that i want people to be able slide with iPad/Android on website. At the moment I have tried jQuery UIs slider + touch punch to make it (it's basically slider with two handles) but seems I cannot move two handles simultaneously. With one handle at a time it works great but yes, I would need to have it so you move both handles with two fingers same time.
Is there better way to do this then jQuery UI's slider? I don't really need to get any values or anything from it. Just visual stuff. Could touchmove be option? Can I move div using it?
EDIT. hmm, is it even possible? I think iPad for example takes it always as pinch?
Related
first post on here so be gentle!
I am currently designing an ad banner for my college assignment, the main feature i have is a car spinning, like a full 360 degree view.
Now I have took all of the media I needed and photoshopped them to how they need to look I just need some diction of where to go next.
I did want it where you can click and drag anywhere on the screen and it pulls the car around to where you want it, but I don't even know where to start with that! (please help if you can)
So I thought I would instead have it as a sort of image gallery with a next and previous button to select the next frame you want. But I don't like the way it looks so I was wondering if there was a way with action script where I could click on a button(next/previous) and the car would spin until I un-click? Rather than me having to keep clicking to load the next frame.
Also if I could I wanted a left to right scroll bar what could control the images, do you know any way of doing that?
Many Thanks in advance for ANY help!
Jordan.
If you want a commercial solution:
Krpano -> very advanced, excellent support, highly recommended for panoramas, 2D object is a bit lacking tho. Examples of 2D object
Object2VR -> very easy to use, not that great support, lacking API.
I would go personally for krpano because it is simply a superior tool. Great for panos, tons of possibilities. If you want it easy, go for Object2VR.
Now if you want to program it, and you need to program it, there are many options how you can do it. First of all, you need to load all the images into your app. Even if you don't maintain them in memory (that would be prefered, tho), you should load them so they are cached and can be reloaded fast. Your rotation can be achieved by "re-loading" the next image, or if you keep them in memory by simply referencing the next index of the array/vector. You always keep a reference index and upon click you simple increase the index and load the image. You than swap the images. It is too broad to explain, you will simply have to begin and ask for advice with some specific code.
So I'm incredibly new to AS3, and barely know my way around.
I built a simple colouring book game, essentially changing some of the graphics of a tutorial, and replacing numbers and sizes to fit what I wanted to achieve. I then built a menu screen in a seperate scene and linked the two with code snippets and buttons to go back and forth.
The colour pickers are generated when the game is ran, however an issue I seem to be facing is that when I go back to my main menu, they are still there.
Can someone point me in the right direction as to how I can fix this? I'm sure it's a rather simple fix. I can provide the code from the tutorial if needed
I think you're right you need removechild this color to remove one color from stage... Maybe you need removechildren to remove all color, whin are on stage... Try this two way
I'm new with html5 and I'm trying to go through with drag and drop functionality.
This is the scenario: two different divs (or canvas) side by side.
What I want to do: drag the first div (or canvas) and drop on the second div.
Which result I expect: The first div content is now on the second div position and the second div content is on the first div position. Like a normal switch.
I'm pretty sure that is possible, but the only think I've done until now, was to append the first div into the second div.
Yes, of course it is possible, but the answer depends a bit on what the purpose is... If you want to learn how drag and drop works in HTML5, then write your own implementation based on the tutorial you mentioned. But if you want to build something for production within reasonable time, use a library - there are lots. Which one to use also depends on the platform you're targeting. If you're targeting mobile, you need touch support, and you need to consider multi-touch effects in your implementation - it's not just mouse clicks and drags anymore, but potentially lots of fingers simultaneously!
A nice demo using hammer.js can be found here: http://riagora.com/mobile/hammer/index2.html. Drag and Drop works both with mouse and touch, but you need a touch screen for zooming (by pinching) and rotation of images.
Another demo, a puzzle using scriptaculous, which does almost what you ask for. However, the current version, 1.9.0, is from December 23, 2010, so it doesn't seem to be actively developed anymore.
I discovered the new css controlling scrolling and snapping on http://msdn.microsoft.com/en-us/library/windows/apps/hh466066.aspx
I wonder if there's a tutorial or sample out there explaining how this works and to use those css-attributes.
I'm working on a (angularjs based) calendar and I wonder if it's possible to extend it using css to support touch panning trough the months (like win8 calendar navigating with the fingers).
http://jsfiddle.net/johnnayweiler/FyrtQ/
How to use like -ms-scroll-snap to make the view go with the finger, then snap to the next page? What js events would be recommended to know when the scroll amount reached this snap point(to load the next month).
Also of course, is there something similar in other browsers(this doesnt seem to be a standarts feature)? Probably using javascript, are there some simple solutions for handling momentum and snap?
Thanks for your ideas :)
Theres now an official sample ;)
http://code.msdn.microsoft.com/ie/Scrolling-panning-and-6834aaf9/sourcecode?fileId=68336&pathId=380363024
I'm looking for something like CATiledLayer (on iOS), but for use in PhoneGap/Sencha Touch 2.
The idea is to "stream" a very large image from a server in form of tiles - very much like Google Maps does the job.
It should support touch gestures on mobile devices so a user can pinch zoom and scroll.
Unfortunately I couldn't find something - so a few pointers are highly appreciated.
Update:
In the meanwhile I took a look at OpenLayers, which seems to what I want and manages multiple layers of zooming and such. Unfortunately it is hooked too much into Geospartial data and there is no way to disable projections to make it work like a basic image viewer.
I also found GSV (Big Ass Image Viewer) - unfortunately I doesn't support touch gestures and generally seems to be abandoned.
To me it's just weird that nobody really had the need for something like this and I try to prevent "re-inventing the wheel" as much as I can. But right now it does not look like there are any non-geodata/map related solutions.
I've never seen anything like this done using Sencha Touch 2, though I'm going to assume that putting something like this together wouldn't require much.
It would basically be your custom component (which would be scrollable). Inside that component you would insert 1 child which would be the size of your image (lets say; 15000px x 15000px) so it overflows. You would then listen to the scroll event on the parent container and when it gets to a certain x/y state, update the child item with that section of the image.
I'm not sure what the best solution for the child's HTML would be. Perhaps a bunch of divs, but I'm thinking <canvas> would be best for images.