Cross-browser file drag-n-drop solution for JS? - javascript

I'm looking for cross-browser desktop file into browser drag example. I've found a few good examples such as jQuery FileDrop and jQuery FileUpload , awesome examples, but I'm not sure they work in Opera or IE. Could you suggest me a really cross-browser solution? Thanks in advance!

For a completely cross-browser file drag drop solution, you would need to go in for a file upload control which uses a browser plug-in like Silverlight or Flash. Here is another SO question on the same lines
Multiple-target cross-browser drag& drop file upload

Related

Maintain undo functionality with createRange()

I'm working on a Markdown text editor using a contenteditable and Rangy to easily add links and images. The problem is that rangy.createRange();, an important function in the Rangy library, cancels the ability to undo an action (text added in the contenteditable in my case).
I have browsed the Web to find a solution and I have found UndoManager, but I cannot find information about how to use it and if it has been added in Chrome (I'm working on a Chrome Packaged App so I don't care if Safari does not support it).
If somebody knows something about this piece of HTML5 it would be amazing.
Thanks in advance.
According to this link , none of the current browsers support the UndoManager spec. You can test that in your browser by trying to access document.undoManager which undefined in Chrome

Drag and drop upload plugin

I want to create a jquery drag and drop file upload plugin or use an existing one.
Unfortunately I cannot find any plugin that does exactly what I want to achieve.
Can someone point me a good place to search or how to start to implement my own file upload plugin?
Thanks.
I need the following functionality:
The one should work perfectly for your needs. I have used it and it is pretty simple to configure and use.
http://valums.com/ajax-upload/
Here are the features
multiple file select, progress-bar in FF, Chrome, Safari
drag-and-drop file select in FF, Chrome
uploads are cancellable
no external dependencies
doesn't use Flash
fully working with https
keyboard support in FF, Chrome, Safari
tested in IE7,8; Firefox 3,3.6,4; Safari4,5; Chrome; Opera10.60;
also, you can try PLUpload (http://plupload.com/)
On that page you'll see that Drag&Drop is supported by HTML5, Gears(from Google) or BrowserPlus.
Note: Drag/drop support of files is currently only available in Firefox and WebKit. Safari on Windows has some strange problems and requires workaround.
In IE and/or Opera, that drag&drop could not work properly as you expected.

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.

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

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.

How can i make custom buttons to control the <embed>?

Im trying to play some sound(mp3) in my browser. Found <embed> but the default controllers (pause button, volume and timeslider) aint really pretty so what im wondering is how i could control it with some jquery buttons?
i would then hide the embed and call controls with jquery and the embed tags id.
Is this possible, and where could i find a overview of that?
Actually you can do this better with html5 (less load from CPU, but less crossbrowser too)
(google it: custom html5 audio player)
but if you want flash behind the scenes, better go with jPlayer :
http://www.happyworm.com/jquery/jplayer/
I agree with Fusion on that fact that HTML5 is probably the easiest way to go with the best result. However what are you going to do with the non-HTML5 compliant browsers? What about mobile?
My suggestion would be to use the HTML5 solution with compliant browsers, and a jQuery fall back solution for non-HTML5 browsers. That way the users with the most current technology get the best solution, but you don't leave everyone else behind.
jQuery has a wonderful ability to modify DOM so swapping out files in the tag would not be an issue. Check out this sound plugin ( http://plugins.jquery.com/project/sound_plugin ) and see if that fits your need.

Categories