I've seen this and I have to admit I'm pretty impressed:
(source: blogspot.com)
http://gmailblog.blogspot.com/2010/04/drag-and-drop-attachments-onto-messages.html
I'm almost certain that this is an HTML 5 feature (it's supported on Chrome and Firefox 3.5), and was wondering if somebody knew how is the browser feature called.
Bonus points for a tutorial/article on how to do something similar!
I believe this may be of help:
http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload
For an HTML5 demo of drag-n-drop, check out:
http://html5demos.com/drag-anything
Seems like dragover, dragenter, dragexit, drop events + event.dataTransfer are how it all works. Putting it together with a multi-part/form ajax POST like the link that dhorn gave is more impressive in my opinion. I would hope that it could be done a little easier than that.
Related
I have a client who wants a none flash website very similar to the following template:
http://www.templatemonster.com/flash-templates/34056.html
I am always willing to learn, but I want to know first of all if this would be possible to create in HTML5. I realize this would only work on latest versions of IE, Firefox or Chrome.
Thanks guys!
Creating such a website with all the flashy effects and transitions can be a real pain for beginners. In this case you would have to deal with either CSS3 transitions or javascript (jquery) and do a lot of extra work, just to get that special effect.
To get you started with HTML5, have a look at Dive into HTML5
If you want a good backwards compatibility for html5 features, have a look at: http://afarkas.github.com/webshim/demos/ or http://html5boilerplate.com/
Yes it is possible. Everything on that page can be done with HTML5/CSS3/Javascript. Though some of it more easily than other parts.
Yes, html5, javascript, jquery, css3 are your best friends. Check http://processingjs.org/ for a very powerful canvas lib. They've just released their 1.3.0 version.
/Richard
I've seen entire games developed with <canvas> element. I think this is doable, albeit a fair amount of work. But do promise to leave the annoying guitar riffs out... :)
Some combination of:
http://flowplayer.org/tools/demos/overlay/multiple.html (click "open all")
and the shaking effect from:
http://jqueryui.com/demos/effect/
Would be pretty similar. If you're going to be learning HTML5 from scratch, make use of JQuery - a lot of people that have been doing this a lot longer have already tackled a lot of the common requests.
there is a flash-like tool from HTML5 called Hype .... check this video
I imagine there must be out there a website that collects information about HTML 5 feature and what browsers version started to support them.
This might be a good way to decide based on your website profile, if you can apply that HTML 5 feature without a fallback for your visitors.
Do you know such a site/resource ?
For example I want to know what browsers support the multiple upload feature for inputs and what browser version was the first.
Update
I'm not pleased with the sites suggested so I'm opening a bounty.
Suggestions so far: Html5Test, Caniuse, modernizr.com, QuirksMode
Update 2
Some people don't understand the question. I need to implement the multiple upload feature. I know from analytics what browser are they using ( I know this is not 100% correct ).
I'm willing to sacrifice some of the visitors by not offering some advance features but I need to understand how big is this procent. I'm NOT trying to DETECT in anyway the browser. It's a similar approach with other sites that dropped IE 6 support.
So please don't talk about bad practice.
Try to look at Html5Test or caniuse.
If it's server side, you can analyze user agent to find out if client's version supports HTML5. Wikipedia is your friend.
If it's client side, there's Modernizr library.
A quick search gave me this interesting result (reproduced in several blogs): http://www.findmebyip.com/litmus/
And you can may also want to take a look at this list of how to detect each feature: http://diveintohtml5.ep.io/everything.html
Here is another website, quite incomplete but verbose and "work in progress" as of March 2011, so it might be worth keeping an eye on: http://html5accessibility.com/
This one is off topic, but since I found it, I add it. CSS compatibility in IE browsers (very extensive): http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
And here you can find info specific to the gecko engine: https://developer.mozilla.org/en/HTML/HTML5
And, of course, MDC has compatibility tables for each feature, but separated in different pages, not as a table, e.g.: https://developer.mozilla.org/en/HTML/Element/input
http://www.modernizr.com/
HTML5Test.com collects the information but they don't give detailed reports for perusal.
A good reference site for some stuff is http://www.browserscope.org/ but that doesn't go into a lot of detail with HTML5 specific support
Another source of related stuff is http://w3c-test.org/html/tests/reporting/report.htm which is creating a set of HTML testing tools that can be run.
You or someone who wanted to create this information could use these tests and then store the UA String of each browser that hit the site with the results of each test.
Then you could just find the earliest version of each browser type that a feature successfully run on.
I think this information is stored in the databases of the sites mentioned but they just don't display it which sort of sucks. Maybe try emailing them and suggesting they add these reports.
Take a look at caniuse.com, it’s exactly what you are searching for.
QuirksMode is also a great resource, and there is an entry for multiple files input.
My vote is for:
http://www.findmebyip.com/litmus
Which i found via this blog:
http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
You should try this website. I hope this is what you were looking for.
I am working on a collaborative website that I want to give users notifications while they are viewing or editing data. Something similar to how in StackOverflow if you are replying to a question and the notification at the top pops up saying that there is a new reply to the post.
I can see how to do this using some kind of polling AJAX magic, but I was wondering if there was any way to push the notification to the browser w/o using polling?
Thanks for any help/ideas :)
EDIT:
For those interested, I went with SignalR https://github.com/SignalR/SignalR/wiki/Hubs
Either use long polling for it to work in older browsers, or start reading up on eventSource:
http://dev.w3.org/html5/eventsource/
Nice article by Nicholas Zakas:
http://www.nczonline.net/blog/2010/10/19/introduction-to-server-sent-events/
Well im starting to use Websockets (see some of my previous questions) and they are cool to use instead of ajax :-D
Generally no, but there is a family of techniques that simulate such an effect.
Look into comet if you'd like to give it a shot: http://en.wikipedia.org/wiki/Comet_(programming)
Hi all I was trying to get the vimeo "swfobject.html" example from git hub to work, but it simply doesn't work # github.com/vimeo/vimeo-api-examples/blob/master/moogaloop-api/javascript/swfobject.html
I debugged a bit, and realized it doesn't even enter the "js_onLoad" function. Does anyone know if this github code dated or is js_onLoad deprecated? I'm just trying to do a simple example of displaying the alert "hi" after the player is loaded, but I can't even get that far.
My very simple sample code is here: http://pastie.org/1110855. Does anyone see a problem?
Any fellow stackoverflowers versed in vimeo JS API? Cheers
I feel your pain. There's a bunch of inconsistent information about the vimeo API out there. But there are still parts that work. Check out the API Playground which works and demonstrates clearly how to do all sorts of useful things. The source code is on github. You can take apart the playground.html file and just leave in the parts that you need.
Important caveat about the playground.html file -- it doesn't work (for me) when running off a file:/// URL. It has to be coming off an http server to function at all. HTH.
I consider myself a bit of an expert on the Vimeo JS API. Their documentation and demo's are very poor, so I put together this little demo that I think it much easier to follow. It users jQuery and the iFrame embed method, but hopefully it helps:
http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html
It shows how to listen for an event and fire a method.
After several experiments, it seems that events are only fired with the HTML5 version of the embed, not with the Flash version.
As the Universal Embed code (iframe) automatically selects the technology, I believe that the best way to go is to avoid using it and make your own embed.
Is there a library simplifying the process of dragging and dropping between the Flash/Flex environment and the surrounding browser?
I've done some research on the process, and so far the closest thing that I have found is from HTML to Flash in a Floorplanning application. I have yet to find a demo going in the other direction however.
Is there a simpler way to do this now?
I didn't even think it was possible at first until I looked at that link, and I agree with their description that it will be very difficult to get working on all browsers / OS's.