drag and drop not working on iPAD - ipad

I would like to use sortable HTML tables driven by a Javascript API (e.g., BBC Glow) with the iPAD - however, I cannot drag an otherwise draggable item using the iPAD as the entire page scrolls instead of the element I would like to drag.
Is there a way around this?

was just about to ask this same question... but in a different way. no, iPad does not support the idea of "double clicking" or "drag/drop"... so my question was going to be "what are best-practices for modifying an existing UI so that it works for iPad/iPhone?"
ran across this project while researching:
http://www.gotproject.com/blog/post2.html
I would start by looking over how this guy's code works, and try something like that...

Firstly, use jquery UI http://jqueryui.com/demos/ for drag and drop functionality
and then add this script https://github.com/furf/jquery-ui-touch-punch for playing it in Ipad or Iphone.
Hope it helps.

Related

Scrolling issue with fixed divs in iframe on IOS

I am having a problem with iOS scrolling on an iPad. Every other platform tested works just fine. I love iOS, but hate it too. I was able to get the entire iframe contents scrolling within the parent, but there are two DIVs that are fixed that shouldn’t scroll within the iframe.
Before I spend a lot of time trying to work this out, I am just looking to leverage everyone’s experience for whether it, in fact, CAN be done. If it IS possible, then I will proceed to trying to work out a simple model and report it back for others. If experience shows that it can NOT be done, then you will all have saved me a lot of headache, not to mention time.
Here’s a drawing of what works on all other platforms but NOT iOS:
Simple question: Is it possible?
The simple answer is, in fact, YES.

How to create a fluent pagination for mobile devices on a responsive website

I want users of my website to use pagination on their mobile devices, like for example UIScrollView with paging enabled in iOS.
Still the website should also be viewable on desktops.
So far, I tried Foundation's orbit, but that just doesn't feel fluent at all (when you release your finger, it performs the sliding a little delayed).
Is there any good alternative on how to get this done? If possible I would like the user to even slide vertically as well as horizontally.
Maybe Swipe.js is the thing you looking for.
have you tried SwipeView?
Here you have an demo gallery
I'm looking for this too, but I really think they are none.
If you want it to be fluid, you have create your own using CSS3 animation/transform and so it will not work on hold browser (IE < 10 or 11, but I'm not sure). If you want to handle touch events I recommend you to check out "jQuery Modile"
You can try iScroll 5 it's quite simple but do the trick perfectly.
You will find in the archive of the project an example of horizontal paging under demos/carousel, you will see it's quite good. :)
In addition you will be able to see all other things you can do with iScroll which should fit your demands.

IOS prev/next button close keyboard unexpectedly

I'm currently using PhoneGap (Cordova) to build an App on iPad/iPhone.
One of my page in the app (in html/css/js), have more than 100 input type Number.
When i use finger to target each of them, it's working like a charm.
But when i use the prev/next button from IOS Keyboard, sometime, i don't know why, keyboard slide to down and when i try to open it again with targeting a input with my finger keyboard just blink... Impossible to fixe it without a scroll to release all event.
I've clean my code, refactored some part, look on google and stackoverflow if someone had the same problem but i found nothing...
Did someone know if it's a UIWebView problem ? Or phoneGap? or something else?
Thank's for reading.
If you are happy to just remove the next/previous buttons from your app entirely, the new Phonegap/Cordova 2.6.0rc1 has made this incredibly simple.
In your config.xml file, just set the HideKeyboardFormAccessoryBar preference to true.
In order for those two buttons to work you need to specify their behavior and it seems that it is not specified. Made some research and I think you have two options. Either you get rid of the next/previous buttons at all like explained here or you override textFieldShouldReturn: in a way similar to what is described in this post.

Design ui controls without using code

I see that I can create the the UI controls like buttons, labels and textboxes by writing code in the class, and drawing them through the "pushScreen" method.
My question is: can we draw UI design by drag & drop from a toolbox?
I have been working in iPhone development, and expecting that Eclipse would have a similar approach for UI design.
As much as what I know there is no alternate approach for UI design in blackberry except coding. The only approach for UI design in blackberry is through coding.

Website for iPad Mobile Safari

While creating a website for iPad Mobile Safari, I have a few questions;
Does the orientation happen automatically or do we have to write code for that ?
What is the best approach in terms of CSS/JS..I mean create separate copy of the web CSS for iPad and just update for iPad specific. Also what about JS?
What is the best way to detect for iPad (CSS/JS) and how?
Any online references which specifically covers iPad Mobile Safari development will also be great.
Thank you.
The orientation happens automatically, but you can write code to intercept the event and do things.
I highly recommend using an existing JS library such as Sencha Touch to handle the UI for you; they automatically detect the client and will display the appropriate scale of the app.
I just added a few meta tags to my current project, based on this page - http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
It made a huge difference. The orientation media queries work great. I madea simple example by setting the body background colour different based on orientation.

Resources