HTML5 Drag and Drop has been talked about a lot lately, but it’s hard to find really useful information about implementing it across multiple browsers.Mozilla, Apple and Microsoft all have pages describing how to use it, but their examples seem to work only in their particular browser (Apple’s example doesn’t even work in their own! Updated, Jan. 11, 2009: Although I have not been able to get this example working on Safari 2.0.4 and 3.1.2 for OS X and 4.0.4 for Windows, I have received word that it works on Safari 4.0.4 on OS X). Rem...

Do you still remember the movie The Matrix? Do you still remember the cool matrix effect in that movie? How is that effect achieved? Shaun Dunne shared a piece of HTML5 code which displays a cool matrix effect. The matrix demo can be found here.Below is the code which he achieves this effect: withvar s = window.screen;var width = q.width = s.width;var height = q.height = s.height;var letters = Array(256).join(1).split('');var draw = function () { q.getContext('2d').fillStyle='rgba(0,0,0,.05)'; q.getContext('2d').fillRect(0,0,width,height); q.getContext('2d').fillStyle='#0F0'; letters.map(f...

Underthe support of HTML5 standard, Building Web App to take photos is now possible.I will elaborate on how to take photos using Web App, display them on the pageand upload them to the server.1.     VideostreamHTML5 TheMedia Capture API provides the programmable  access to video camera on phones, users canuse the getUserMedia() method to get the video stream provided by video camera.What we need to do is to add a HTML <video> tag and make the videostream from the video camera as the input to the <video> tag.  (Please note currently only Chrome and...

HTML5 is rapidly developed in WEB world, it puts all kinds of pressure to browser development, but at the same time it also brings us lots of unexpected page effects. If we can use some HTML5 elements on our web apps,  we may get different user experience. However, for HTML5, there are lots of places need to improved. The following HTML5 animation effects are very attractive.1. HTML5 mouseover image effectThis HTML5 animation effect can be used in photo gallery, users can preview the photo while mouseover the photo.Online Demo / Source code2. Falling leaves animation based on HTML5 W...

Since now HTML5 has become a very hot topic. It can be used develop some highly functional and amazing applications on desktop and mobile devices. Also, there are many libraries which are using HTML5 to develop some native app like applications on iPhone and Android systems such as PhoneGap. Someone on Quora asked a question which many people are concerning about.: Will HTML5 ever overtake native mobile apps? It seems that the number of people who are agreeing with it equals to the number of people who disagreeing with it.Let's see the two most popular answers on Quora about this question.Aski...

In my previous posts, we discovered How to Use HTML5 File Drag & Drop, and Open Files Using HTML5 and JavaScript. Now we have a valid set of files, it possible to upload each one to the server. The process occurs asynchronously in the background so the user can complete other on-page tasks while it occurs.The HTMLLet’s examine our HTML form again:view plainprint?<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">  <fieldset>  <legend>HTML File Upload</legend>  ...

Update #3: Using the techniques outlined in this article I have rolled out and initial release of imgscalr.com.Feel free to download the JS source (it is heavily commented) and take a look at how it was rolled out. Unfortunately the required File API support is only in Chrome and Firefox currently, Safari gets it in version 6, Opera possibly in version 11 and possibly IE 10 (9 has no support).IntroductionOver the last day I’ve been trying to learn how to use the new HTML5 Drag and Drop API as well as the new File API. I want to create a really nice drag-and-drop...

Web Worker is a JavaScript multithreading solution provided by HTML5. we can put some compute intensive codes into Web Worker and it will not hang the user interface.1. How to use Web WorkerWeb Worker's basic mechanism is to use Worker to load a JavaScript file to create a new thread in JavaScript's main thread. It will not block other thread's execution and will provide a data exchange interface between main thread and new thread : postMessage() and onmessage.Let's look at an example://worker.jsonmessage =function (evt){ var d = evt.data;//Get sent data with evt.data postMessage( d );//Send...