Is html5 drag and drop broken on safari browser for windows ? If so, are there any work arounds ?
I'm using Safari 5.1.2 on Windows 7 and the drop targets always show up as non droppable. Tried this on 2 different windows 7 computers with clean install and latest setup.
Tried with both this demo and my own code which works on every other latest browser.
http://html5demos.com/drag
Indeed D&D for Safari doesn't work.
Kind of work around for Safari:
Put the logic in the 'dragend' event of the draggable object
Instead in the 'drop' event of the dropping on object.
Yes. After a lot of self-doubt, experimentation, and research, I can say that it is definitely broken for me too (Safari 5.1.7 on Windows) as at today: 15 Nov 2012. This has been quite confusing and distressing!
Hope Apple comes to the party soon.
From http://html5doctor.com/native-drag-and-drop/#dragging_anything
add this:
[draggable=true] {
-khtml-user-drag: element;
}
Non-HTML5 drag and drop is available via jQuery UI:
http://jqueryui.com/demos/draggable/
You can build a download with only that specific function if you want it to be lightweight.
You can use Modernizr to detect whether it's supported and fall back on jQuery if needbe:
if (Modernizr.draganddrop) {
// Browser supports HTML5 DnD.
} else {
// Fallback to a library solution.
}
From http://www.html5rocks.com/en/tutorials/dnd/basics/
Related
I am programming an application by using Windows ActiveX web control which uses html buttons for input interaction. On differing versions of Windows XP this control may be IE6 or IE7. On Winodws 7 x64 with IE11 installed it is still IE7. I do not know what version is available on Windows 8.
Operating within these limitations (IE6/IE7), is there a javascript fast click solution for these browsers?
I found that handling both the .click and .dblclick events with jQuery will simulate fast click for events which trigger on "mouse up". However, I would prefer for this particular application for the event to fire on mouse-down instead of mouse-up. I can get half of it with .onmousedown, but .dblclick activates on mouse up which makes interaction jumpy on double click.
I tried various fast click implementations on the internet and was unable to find an adequate solution. I am able to use versions of jQuery prior to version 2.0.
If you feel comfortable running an executable, I've written a simple demo application which accepts a single command-line parameter for passing the target web page url. This demo will utilize your operating system's IE ActiveX control for testing purposes.
You can pass a file path as the url with this program. However, it was only tested with the IE7 ActiveX control. I don't know if a file path will work for IE6, but I believe it should.
http://codespunk.com/files/upload/html_test.zip
If someone out there is using Windows 8 and 8.1, I would be interested to know what the result is for "http://whatbrowser.org" so we can see what version of IE the control is using.
Is it possible to call requestAnimationFrame on an iPhone (iOS 5.1)? As far as I've been able to figure out, the mobile Safari simply doesn't this method, with or without vendor prefix.
It does not look like it does. Here is a link to a set of screenshots I took of a jsfiddle I wrote.
Screenshot link
http://crossbrowsertesting.com/users/34762/screenshots/z7e91b18ffb5e81e5079/public
jsfiddle link
http://jsfiddle.net/fpmeh/
On the 5.1 IOS screenshot you will see the text is set to nothing in the jsfiddle. On newer browsers from that same text is set to one of the different available methods.
This is fully supported from iOS 7 onwards.
http://caniuse.com/#feat=requestanimationframe
There are some JS library to simulate the IE in Webkit? For instance: IE8 doesn't support border-radius currently (maybe on IE10). So I run a JS library that check if I'm using the border-radius then remove it to make similar to IE vision.
It's a crazy idea, I know, but work on IE is too slow, and if I can simulate it on Webkit, will be great! I need do it to an own project too.
Note: I know that exists a Chrome extension to make a IE tab, but the proposal is different: I need run on Webkit, but eliminating features not supported on IE.
Edit1: I'm working on a Webkit based IDE to developer HTML templates. Basically I need a button that emulate the IE view version without need a IE installed too (Mac, Linux for instance). Will be interesting have a Mozilla emulator too, for instance. Basically I will generate a CSS file to each browser too. For instance: -webkit properties not will be included to MSIE CSS. filter not will be included in Webkit CSS (but can be emulated).
So, I'll make a copy of current HTML page before apply a JS method that will edit or delete the unsupported content, make it similar to IE. If IE8 not support border-radius, it'll be removed and I'll see basically an IE version of page. If Mozilla not support -webkit-box-sizing it will be renamed to -moz-box-sizing if disponible.
I know of no script, and frankly I don't expect to see one any time soon as the task of re-creating the topography of IE's support for CSS in various versions of the browser would be a massive undertaking. It would further complicate things if the undocumented hacks like _height were supported too.
Frankly, the best way to test your site in IE8 is to use IE8+. In versions IE8 and up Microsoft introduced Browser Emulation, permitting you to fallback and emulate any number of IE versions all from a single browser - I use this daily, and it's a fantastic feature.
Within IE, open up the Developer Tools by pressing F12 and from there you can change the Browser Mode to IE8. No refresh will be necessary as the browser will handle that on its own. Using this method you can quickly test versions 7 through 10 (assuming you're testing from IE10) with the click of a button.
Disabling CSS3
If all you would like to do is disable CSS3 features, you can use the Strip Tease bookmarklet. It's not a fully-developed solution, so keep in mind that it won't handle things like advanced selectors, etc.
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.
I used the worderfull javascript library called raphaeljs on my website to draw maps, animations and animated functionalities. I have noticed that the script using this library work perfectly with iPhone but not with Android.
Can someone confirm this (just going on the demo page of raphaeljs will tell you if it works of not) and if it doesn't, does someone has any idea why, and what could be tested.
Thanks
The default Android browser did not support SVG until they recently re-introduced it with Android 2.3. One workaround is to use Opera Mobile (free from the Android Market) which will work whatever the Android version.
EDIT: My mistake, it's Android 3.0 (Honeycomb) that added SVG support in the default browser.
2ND EDIT: Better add a disclaimer that I work for Opera. There may be other non-default browsers that support SVG (but I haven't tried them).
Actually SVG is supported by Android since 2.0 I think (with WebKit, default browser), it's just not enabled by default : http://jindroid.com/2010/02/15/svg-support-on-android-webkit/
There's a patch you can apply (quite hard to do though) to enable it but I would advice you to download Opera or Mozilla Firefox for Android (via Market), which also supports svg quite well (I tested FF4 with Raphael JS).
Regards