Download presentation
Presentation is loading. Please wait.
1
Chapter 4: Feature Detection & Drag and Drop
HTML5 Video Series Chapter 4: Feature Detection & Drag and Drop
2
What Is Feature Detection?
Finding specific properties or methods in a browser's DOM to detect the browser type and whether it supports a given operation HTML5 Video Series It is NOT Browser detection Developers use to use “UA Sniffing” to detect the user’s browser using the navigator.userAgent property. This would detect the actual browser but was unreliable. This is now obsolete and not recommended
3
Modernizr HTML5 Video Series
At the moment, the best way to detect HTML5 and CSS3 features are by using 3rd party Javascript libraries such as Modernizr. Modernizr does not try to detect the browser but it detects certain features. You can download Modernizr at and actually pick and choose what features you want to search for and it will generate a Javascript file to include in your HTML5 website. Once implemented you would use simple programming such as the lines below if (document.querySelector) { element = document.querySelector(selectors); } HTML5 Video Series
4
What Modernizr Detects
CSS Animations CSS Gradients CSS Transforms Drag & Drop SVG Web GL Geolocation Local and Session Storage Canvas Web Fonts Flexi Box Model HTML5 History Web Sockets Web Workers HTML5 Input Types Application Cache HTML5 Video Series
5
How Do We Implement Modernizr?
HTML5 Video Series All you need to do is download the file, include it in your <head> section and add class=“no-js” to your <html> tag <!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <title>HTML 5 and CSS3 Test Page</title> <script src="modernizr min.js"></script> </head>
6
Testing For Object & Properties
HTML5 Video Series Modernizr creates properties for all of the features that it tests for. You can refer to these properties to check whether the browser supports the object and its properties. Here is an example that checks to see if canvas is supported… if (Modernizr.canvas) { // Yes, canvas is supported } else { // No, canvas is not supported }
7
Updated CSS HTML5 Video Series
For CSS3 able browsers, we can use new gradient properties such as linear-gradient. With Modernizr, we can use the no-js and no- cssgradients rule to tell a browser that does not support CSS3 gradients, to use a specified background image instead of just ignoring it.. .no-js .glossy, .no-cssgradients .glossy { background: url("glossybutton.png"); } .cssgradients .glossy { background-image: linear-gradient(top, #555, #333); HTML5 Video Series
8
Drag and Drop Feature HTML5 Video Series
HTML5 and Javascript allow us to "grab" an object and drag it to a different location. In HTML5, drag and drop is part of the standard, and any element can be draggable. IE 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.
9
Drag And Drop Syntax HTML5 Video Series
We need to set the “draggable” attribute to “true” <img draggable="true"> We specify what we want to drag with ondragstart and the setData() function function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } HTML5 Video Series
10
Drag And Drop Syntax 2 HTML5 Video Series
By default, data/elements cannot be dropped in other elements. To allow a drop, we need to prevent the default handling of the element. We do this with the event.preventDefault() function event.preventDefault() Now the drop event function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } HTML5 Video Series
11
Lets Dive In! HTML5 Video Series Start Coding!
Similar presentations
