JavaScript Mimics of the iPad's UI (specifically, UIDatePicker and UIPicker) - javascript

Does anyone know a way to mimic the UIDatePicker and the even more general UIPicker iOS controls in HTML & JavaScript?
Does anyone know of a solution like this? I've seen JavaScript mimics of other iPhone/iPad controls, such as the UIPopoverController. I would really like to be able to offer this way of entering dates (compared to solutions like jQuery UI's datepicker). It looks like it would be easy to use both on a mouse scroll-wheel and on the iPad. So, any advice?

One reason all these strange widgets exist is because typing on touchscreens is annoying. You probably wouldn't want to use this sort of widget on desktop for the same reason that very few people like to draw pictures with their mice: the control you get with a mouse isn't really the same as the control you get with a touchscreen.
For that reason, libraries that have implemented functionality like this do it specifically for mobile, and do not ensure compatibility with older browsers such as IE6. If you only need to support good Webkit browsers, and you don't mind using a large framework for this purpose, Sencha Touch's Picker works well (see this page for an example). Sencha's doesn't offer mousewheel support.
I don't know if anyone has implemented one outside of a large framework, but it wouldn't hurt to look around.
--- EDIT ---
A solution listed in a previous StackOverflow question (Date Picker for iPhone Web Application) was chosen as the answer, but it's only for mobile — perhaps only for iPhone. You could look at the code and write one that would work on desktop.

#theazureshadow has a point that this is probably a bad idea for a mouse-based experience.
For anyone looking to do this in a touch-screen browser (smartphone or tablet, iOS or Android), and from my research, this is a great solution : http://demo.mobiscroll.com/. (Found in this answer)
If you only target iOS (iPad and iPhone), this code has a better native iOS feel : http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch

I've been looking for the same thing today and found this pretty good implementation:
http://marinovdh.wordpress.com/2011/09/14/use-the-iphone-uipickerview-control-as-a-selectbox-on-your-website-with-jquery/
There's a zip file with a working demo you can play with. I didn't create this, but I'm going to modify it for a project I'm working on.

Related

Print using javascript in Fluid browser(mac)

I am using the js code window.print() to perform print functionality. But this is not working in Fluid browser in MAC OS. Its working in all other browsers. Please give me a solution for this.
thnx
seems like you're not the only one having this problem (see this post in fluidapps google group), so i assume this is a bug.
the best way to get a fast and reliable answer is to ask the developers - just click on "support" on the official website (on the right side below the download/purchase-buttons).

Custom multi-touch gestures in Javascript

I'm developing a web-app and want to use JavaScript and HTML5 for gestures. I came across this -http://scripty2.com/demos/touch/ , but for this we need Starlight browser (http://starlight-webkit.org/Starlight/).
I don't want to restrict users to a specific browser. For Firefox I found this ( http://felipe.wordpress.com/2010/08/11/multitouch-in-firefox4/ ).
So I was wondering if someone can point me to any resource that won't restrict me to a particular browser. My goal is to define custom gestures.
-AB
I've tried to use these firefox resources but they didn´t work on my HP TouchSmart 300.
So here´s my solution:I´ve found my way using TuioJs and npTuioClient . This connects TUIO to your desktop browser. It works on firefox and chrome, didn´t try on IE.
Unfortunately, we cannot expect that an average user will set up TUIO just to visit our website, but anyway, it is a solution. Let´s hope there will be better solutions using HMTL5 in the near future.

Drag drop functionality on iPad

Does anyone know like if it is possible to implement the drag-drop functionality on the iPad?
Something similar to what is available on;
http://jqueryui.com/demos/droppable/
I mean if this can be implemented directly or via some workaround..
Looking at the tags, I'm guessing you're not looking for a native solution. Have you looked into a mobile javascript framework such as Sencha Touch? It seems to have the support you need, and is specifically designed for mobile development:
http://www.sencha.com/products/touch/
You can use this script https://github.com/furf/jquery-ui-touch-punch for playing jquery UI features in Ipad or Iphone.
Hope it helps.

'Firebug' for iPad

I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)

jquery iphone ui and jqtouch , which is better?

jquery iphone ui and jqtouch
they are lib of iphone , i want to choose one to use,
which is better ?
thanks
I have only used jQTouch, and have been happy about it. It's a fairly light-weight, yet powerful framework.
Peepcode has a nice introductory video tutorial on jQTouch for just $9. If you're evaluating it, you may want to give it a go.
One thing that took me a while to figure out is the use of a tab bar with jQTouch, which isn't directly supported with the current stable release. If you're using tab bar, you should use a later version of jQTouch.
JQuery iPhone UI seems like a more heavy-weight framework. I suggest you to get the full version and play with the demo applications that come with it. That should give you a good idea about the smoothness of the animations. One thing I found is that, this framework may actually support more than just WebKit, whereas jQTouch is pretty much targeted at WebKit browsers.

Categories