Presentation is loading. Please wait.

Presentation is loading. Please wait.

Wednesday 5 December 2012 Part II. Wednesday 5 December 2012 2 Make an Element Draggable What to Drag - ondragstart and setData() Where to Drop - ondragover.

Similar presentations


Presentation on theme: "Wednesday 5 December 2012 Part II. Wednesday 5 December 2012 2 Make an Element Draggable What to Drag - ondragstart and setData() Where to Drop - ondragover."— Presentation transcript:

1 Wednesday 5 December 2012 Part II

2 Wednesday 5 December 2012 2 Make an Element Draggable What to Drag - ondragstart and setData() Where to Drop - ondragover function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } event.preventDefault() Here I am using Scripting language

3 Wednesday 5 December 2012 3 Perform Drop Function- ondrop function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }

4 Wednesday 5 December 2012 Drag and Drop API

5 Wednesday 5 December 2012 5 File API http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api- 2/..[5] Reference -The HTML5 File API allows developers to interact with the local file system on the client-side. - File : Provides read-only information such as name, type, size, and last modified date. - FileList : Contains the list of all file objects, when handling selection of multiple files. - FileReader : An Object to read the file.

6 Wednesday 5 December 2012 6 Handle selection of a single file. Handle a selection of multiple files.

7 Wednesday 5 December 2012 File API Example

8 Wednesday 5 December 2012 8 MathML - The HTML syntax of HTML5, allows for MathML elements to be used inside a document, using math tags. - Most of the web browsers can display MathML tags. Syntax :... http://www.tutorialspoint.com/html5/html5_mathml.htm

9 Wednesday 5 December 2012 9 a 2 + b 2 = c 2 OUTPUT : a 2 + b 2 = c 2 MathML...(2)

10 Wednesday 5 December 2012 10 Matrix Presentation Examples

11 Wednesday 5 December 2012 11 HTML + CSS Example ( Cascading style sheet )

12 Wednesday 5 December 2012 12 HTML + CSS Example...(2)

13 Wednesday 5 December 2012 13 Summary - W3C and WHATWG - Structural Element - Video Element - Drag and drop - File API - Canvas - Video Formats - Browser Support - MathML

14 Wednesday 5 December 2012 14 References 1)https://developer.mozilla.org/enUS/demos/tag/tech:ht ml5 2) www.w3schools.com/html5/ 3) www.w3schools.com/html/html5_canvas.asp 4)http://www.tutorialspoint.com/html5/html5_mathml.htm 5) http://speckyboy.com/2012/10/30/getting-to-grips-with- the-html5-file-api-2/

15 Wednesday 5 December 2012 15


Download ppt "Wednesday 5 December 2012 Part II. Wednesday 5 December 2012 2 Make an Element Draggable What to Drag - ondragstart and setData() Where to Drop - ondragover."

Similar presentations


Ads by Google