In this tutorial we are going to learn about two things.
- Feature Detection
- Drag and Drop
First let’s see “Feature Detection”.
- What is Feature Detection?
- Feature Detection is finding specific properties or methods in a browser’s DOM to detect the browser type and whether it supports a given operation.
- DOM is “Document Object Model” which considers everything on the webpage as an object.
- Feature Detection is not browser detection, it is actually finding out whether the browser supports certain features on a webpage. For example to find out whether the browser supports canvas element of HTML5.
- Earlier, 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.
- Modernizr:
- Modernizr is a 3rd party javascript library which detects the HTML5 and CSS3 features on a browser.
- Modernizr does not try to detect the browser but it detects certain features such as actual methods/functions or properties.
- You can download Modernizr at free of cost 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 can use simple programming such as the lines below:
if(document.querySelector)
{
element=document.querySelector(selectors);
}
- To implement Modernizr all what one needs to do is download the file, include it in your head section and add class=”no-js” to your html tag.
- The example is shown below:
<!DOCTYPE html> <html class=”no-js”> <head> <meta charset=”utf-8”> <title>HTML5 and CSS3 Test Page</title> <script src=”modernizr-2.0.6.min.js”></script> </head></ul>
- 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 }
- If a browser supports CSS3, we can use new gradient properties such as linear gradient on it.
- But if the browser does not support CSS3, we can still apply it using Modernizr.
- Using 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….
- If the browser does not support CSS3, you can use the following code to include the CSS3 effect of background image.
.no-js.glossy,.no-cssgradients.glossy{
background:url(“glossybutton.png”);
}
.cssgradients.glossy{
Background-image:linear-gradient(top,#555,#333);
}
Now, as we have got some information of testing properties and objects using “feature detection”, we will get some introduction of “drag and drop” technique also.
- To drag any object from its place we need to just set the “draggable” attribute to “true”.
- The image tag with draggable attribute is shown below:
<img src=”glossybutton.png” draggable=”true”>
function drag(ev){
ev.dataTransfer.setData(“Text”,ev.target.id);
}
- By default, data/elements cannot be dropped in other elements. To allow a drop, we need to prevent the default handling of the element.
- To do this, we use the event.preventDefault() function.
event.preventDefault();
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}
This was just the theory.We will learn and understand the code for drag and drop while actually practicing it.
