27. Implementing the advanced features of HTML 5

Using the contentEditable attribute
is used to make the text of an element as editable

<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>HTML5 content editable example</TITLE>
    <SCRIPT>
        function getUserScribble()
        {
            var scribble = '<i style="color:magenta;font-family:Geneva, Arial; font-size:5;">Write here....</i>';
            document.getElementById('scribble').innerHTML = scribble;
        }
    </SCRIPT>
</HEAD>
<BODY onload="getUserScribble()">
    <P>
        <TABLE width="320" height="450" border="0" cellspacing="0" cellpadding="62">
            <TD background="np.jpg" contentEditable="true" id="scribble"></TD>
        </TABLE>
        <SCRIPT>
            getUserScribble();
        </SCRIPT>
    <P>
</BODY>
</HTML>

Implementing the spell check attribute

  1. <!DOCTYPE HTML>
  2. <HEAD>
  3. <TITLE>HTML5 spell check example</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <FORM>
  7. <TEXTAREA style="width:300px;height:150px;border: 1em solid black" spellcheck="false" contentEditable="true">Spell check off</TEXTAREA><BR />
  8. <TEXTAREA style="width:300px;height:150px;border: 1em solid black" spellcheck="true" contentEditable="true">Spell check on</TEXTAREA><BR />
  9. </FORM>
  10. </BODY>
  11. </HTML>


Creating Custom Data Attributes
HTML 5 enables you to embed custom data attributes with HTML elements
the custom data attributes are prefixed with the data-text, such data-xxx and data-yyy.

  1. <!DOCTYPE HTML>
  2. <HEAD>
  3. <TITLE>HTML5 custom attributes example</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <IMG src="bike3.jpg" data-out="bike5.jpg" data-over="bike4.jpg" />
  7. <IMG src="bike3.jpg" data-out="bike5.jpg" data-over="bike4.jpg" /> 
  8. <IMG src="bike3.jpg" data-out="bike5.jpg" data-over="bike4.jpg" />
  9. <SCRIPT type="text/javascript">
  10. function imagerollover(){
  11.  var allimages=document.getElementsByTagName("img")
  12.  var preloadimages=[]
  13.  for (var i=0; i<allimages.length; i++){
  14.   if (allimages[i].getAttribute("data-over"))
  15. { 
  16.    preloadimages.push(new Image()) 
  17.    preloadimages[preloadimages.length-1].src=allimages[i].getAttribute("data-over")
  18.    allimages[i].onmouseover=function(){
  19.     this.src=this.getAttribute("data-over")
  20.    }
  21.    allimages[i].onmouseout=function(){
  22.     this.src=this.getAttribute("data-out")
  23.    }
  24.   } 
  25.  } 
  26. }
  27. imagerollover()
  28. </SCRIPT>
  29. </BODY>
  30. </HTML>

Implementing session storage
the seessionstorage object is used to store data till the duration of the browser session.

  1. <!DOCTYPE HTML>
  2. <HEAD>
  3. <TITLE>Session storage example</TITLE>
  4. <style type="text/css"> 
  5. #todolist{  
  6.     width:350px;  
  7.     height: 200px;  
  8.     font:normal 14px Arial;  
  9.     background:lightyellow;  
  10.     border:5px groove gray;  
  11.     overflow-y:scroll;  
  12.     padding:4px;  
  13. }    
  14. #todolist ol{  
  15.     margin-left:-15px;  
  16. }    
  17. #todolist li{  
  18.     border-bottom:1px solid gray;  
  19.     margin-bottom:8px;  
  20. }
  21. </STYLE>  
  22. </HEAD>
  23. <BODY>
  24. <DIV id="todolist" contentEditable="true">  
  25. <DIV contentEditable="false"><B>Enter your tasks in the following To Do List:</B></DIV>  
  26.     <OL>  
  27.     <LI>Take breakfast in ABC hotel</LI> 
  28. <LI>Meeting with Aggrawal and group company manager</LI>     
  29.     <LI>Set alarm to 5:30 am</LI>  
  30.     </OL>  
  31. </DIV>  
  32. <INPUT type="submit" value="Reset To Do List" onClick="resetlist();return false" />   
  33. <script type="text/javascript">     

  35. var defaulthtml='<div contentEditable="false"><b>Enter your tasks in the following To Do List:</b></div>\n' 

  37. defaulthtml+='<ol>\n' 

  39. defaulthtml+='<li>Take breakfast in ABC hotel</li>\n' 

  41. defaulthtml+='<li>Meeting with Aggrawal and group company manager</li>\n' 

  43. defaulthtml+='<li>Set alarm to 5:30 am</li>\n' 

  45. defaulthtml+='</ol>' 


  48. function resetlist(){  
  49.     todolistref.innerHTML=defaulthtml  
  50.     domstorage.todolistdata=defaulthtml  
  51. }  
  52. var todolistref=document.getElementById("todolist")  
  53. var domstorage=(window.sessionStorage)? sessionStorage[location.hostname] : null 
  54. if (domstorage){  
  55.     if (domstorage.todolistdata){ 
  56.         todolistref.innerHTML=domstorage.todolistdata 
  57.     }  
  58.     todolistref.onkeyup=function(e){  
  59.         domstorage.todolistdata=this.innerHTML  
  60.     }  
  61. }  
  62. </SCRIPT> 
  63. </HTML>

Implementing local storage
local storage is same as session storage, except for the feature of persistency
local storage stores the saved data on a user's computer even after closing the browser window

  1. <!DOCTYPE HTML>
  2. <HEAD>
  3. <TITLE>HTML5 local storage example</TITLE>
  4. <style type="text/css"> 
  5. #todolist{  
  6.     width:350px;  
  7.     height: 200px;  
  8.     font:normal 14px Arial;  
  9.     background:lightyellow;  
  10.     border:5px groove gray;  
  11.     overflow-y:scroll;  
  12.     padding:4px;  
  13. }    
  14. #todolist ol{  
  15.     margin-left:-15px;  
  16. }    
  17. #todolist li{  
  18.     border-bottom:1px solid gray;  
  19.     margin-bottom:8px;  
  20. }
  21. </STYLE>  
  22. </HEAD>
  23. <BODY>
  24. <DIV id="todolist" contentEditable="true">  
  25. <DIV contentEditable="false"><B>Enter your tasks in the following To Do List:</B></DIV>  
  26.     <OL>  
  27.     <LI>Take breakfast in ABC hotel</LI> 
  28. <LI>Meeting with Aggrawal and group company manager</LI>     
  29.     <LI>Set alarm to 5:30 am</LI>  
  30.     </OL>  
  31. </DIV>  
  32. <INPUT type="submit" value="Reset To Do List" onClick="resetlist();return false" />   
  33. <script type="text/javascript">     

  35. var defaulthtml='<div contentEditable="false"><b>Enter your tasks in the following To Do List:</b></div>\n' 

  37. defaulthtml+='<ol>\n' 

  39. defaulthtml+='<li>Take breakfast in ABC hotel</li>\n' 

  41. defaulthtml+='<li>Meeting with Aggrawal and group company manager</li>\n' 

  43. defaulthtml+='<li>Set alarm to 5:30 am</li>\n' 

  45. defaulthtml+='</ol>' 


  48. function resetlist(){  
  49.     todolistref.innerHTML=defaulthtml  
  50.     domstorage.todolistdata=defaulthtml  
  51. }  
  52. var todolistref=document.getElementById("todolist")  
  53. var domstorage=window.localStorage|| (window.globalStorage? globalStorage[location.hostname] : null)  
  54. if (domstorage){  
  55.     if (domstorage.todolistdata){ 
  56.         todolistref.innerHTML=domstorage.todolistdata 
  57.     }  
  58.     todolistref.onkeyup=function(e){  
  59.         domstorage.todolistdata=this.innerHTML  
  60.     }  
  61. }  
  62. </SCRIPT> 
  63. </HTML>

Implementing Database storage
HTML 5 enables you to store your data in database on a client's machine using a real SQL database

  1. <!DOCTYPE HTML>  
  2.   <HEAD> 
  3. <TITLE> Database storage example</TITLE>
  4.  <STYLE> 
  5.             #websqldb-example .record-list li:nth-child(odd) { background-color: lightgreen; }
  6.             #websqldb-example .record-list li:nth-child(even) { background-color: pink; }
  7.             #websqldb-example .record-list li {
  8.               padding-left: 5px;
  9.             }
  10.             #db-results {
  11.               max-height: 150px;
  12.               overflow: auto;
  13.               text-align: left;
  14.             }
  15.             #websqldb-example .error {
  16.               color: red;
  17.             }
  18.           </STYLE> 
  19. </HEAD>
  20. <BODY>
  21. <DIV class="slide" id="web-sql-db"> 
  22.           <HEADER><h1>Web SQL Database</h1></HEADER> 
  23.           <SECTION> 
  24.           <DIV class="center" id="websqldb-example"> 
  25. <BUTTON onclick="webSqlSample.createTable()">create table</BUTTON> <BR />
  26.             <INPUT type="text" id="todoitem" /> 
  27.             <BUTTON onclick="webSqlSample.newRecord()">Add new item to the table</BUTTON> <BR />
  28.             <BUTTON onclick="webSqlSample.dropTable()">drop table</BUTTON> 
  29.             <P>The generated database is given as follows:</P> 
  30.             <UL class="record-list" id="db-results"></UL> 
  31.             <DIV id="db-log"></DIV> 
  32.           </DIV> 
  33.           <SCRIPT defer> 
  34.             var webSqlSample = (function() {
  35.               var db;
  36.               var log = document.getElementById('db-log');
  37.               if (window.openDatabase) {
  38.                 db = openDatabase("DBTest", "1.0", "HTML5 Database API example", 200000);
  39.                 showRecords();  
  40.               }
  41.               document.getElementById('db-results').addEventListener('click', function(e) { e.preventDefault(); }, false);
  42.                function onError(tx, error) {
  43.                 log.innerHTML = '<p class="error">Error: ' + error.message + '</p>';
  44.               }
  45.               function showRecords() {
  46.                 document.getElementById('db-results').innerHTML = '';
  47.                 db.transaction(function(tx) {
  48.                   tx.executeSql("SELECT * FROM Test", [], function(tx, result) {
  49.                     for (var i = 0, item = null; i < result.rows.length; i++) {
  50.                       item = result.rows.item(i);
  51.                       document.getElementById('db-results').innerHTML += 
  52.                           '<li><span contentEditable="true" onkeyup="webSqlSample.updateRecord('+item['id']+', this)">'+
  53.                           item['text'] + '</span> <a href="#" onclick="webSqlSample.deleteRecord('+item['id']+')">[Delete]</a></li>';
  54.                     }
  55.                   });
  56.                 });
  57.               }
  58.  
  59.               function createTable() {
  60.                 db.transaction(function(tx) {
  61.                   tx.executeSql("CREATE TABLE Test (id REAL UNIQUE, text TEXT)", [],
  62.                       function(tx) {  log.innerHTML = '<p>"Test" table created!</p>' },
  63.                       onError);
  64.                 });
  65.               }
  66.                function newRecord() {
  67.                 var num = Math.round(Math.random() * 10000); // random data
  68.                 db.transaction(function(tx) {
  69.                   tx.executeSql("INSERT INTO Test (id, text) VALUES (?, ?)", [num, document.querySelector('#todoitem').value],
  70.                       function(tx, result) {
  71.                         log.innerHTML = '';
  72.                         showRecords();
  73.                       }, 
  74.                       onError);
  75.                 });
  76.               } 
  77.               function updateRecord(id, textEl) {
  78.                 db.transaction(function(tx) {
  79.                   tx.executeSql("UPDATE Test SET text = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
  80.                 });
  81.               } 
  82.               function deleteRecord(id) {
  83.                 db.transaction(function(tx) {
  84.                   tx.executeSql("DELETE FROM Test WHERE id=?", [id],
  85.                       function(tx, result) { showRecords() }, 
  86.                       onError);
  87.                 });
  88.               } 
  89.               function dropTable() {
  90.                 db.transaction(function(tx) {
  91.                   tx.executeSql("DROP TABLE Test", [],
  92.                       function(tx) { 
  93. showRecords();
  94. log.innerHTML = '<p>Table deleted!</p>' }, 
  95.                       onError);
  96.                 });
  97.               }              
  98.               return {
  99.                 newRecord: newRecord,
  100.                 createTable: createTable,
  101.                 updateRecord: updateRecord,
  102.                 deleteRecord: deleteRecord,
  103.                 dropTable: dropTable
  104.               }
  105.             })();
  106.           </SCRIPT> 
  107.         </SECTION> 
  108.       </DIV> 
  109. </BODY>
  110. </HTML>
the createable(),
newRecord(),
deleteRecord(),
updateRecord(),
showRecord(), and dropTable() functions are created using javaScript
these functions are using the transaction() and executeSql() functions to insert and access the data stored in a database


Implementing ddrag and drop features
draggable and dropzone attributes are used to implement the drag and drop feature

  1.  <!DOCTYPE HTML>
  2. <HEAD>
  3.              <STYLE> 
  4.               #drag-zone {
  5.               list-style: none;
  6.               float: left; 
  7.             }
  8.             #drag-zone li * {
  9.               border: 4px solid #888;
  10.               display: block;
  11.             }
  12.             #drag-zone, #drop-zone, #drop-data { width: 30%; }
  13.             #drop-zone, #drop-data {
  14.               padding: 40px;
  15.               border: 5px solid #888;
  16.               float: right;
  17.               height: 200px;
  18.               overflow: auto;
  19.             }
  20.             #drop-zone.hovering {
  21.               border: 5px solid #aaa;
  22.               background-color: rgba(255, 0, 0, 0.199219);
  23.             }
  24.             #drop-data { 
  25.               background-color: #eee;
  26.               font-family: Monospace;
  27.               -ms-word-wrap: break-word;
  28.               word-wrap: break-word;
  29.             }
  30.             .datatypes {
  31.               font-weight: bold;
  32.             }
  33.             .draggable-text {
  34.               padding: 5px;
  35.             }

  37.           </STYLE> 
  38. </HEAD>
  39. <BODY>
  40.           <H1>Drag and Drop example</H1>
  41.           <SECTION id="dnd-section"> 
  42.             <OL id="drag-zone"> 
  43.               <LI><SPAN class="draggable-text" draggable>Select and drag and drop text 1</SPAN></LI> 
  44. <LI><SPAN class="draggable-text" draggable class="overwrite">Select and drag and drop text 2</SPAN></LI> 
  45. <LI><IMG src="bike3.jpg" draggable class="copy" /></LI>
  46. <LI><IMG src="bike4.jpg" draggable class="copy" /></LI> 
  47.             </OL>            
  48.            <DIV id="drop-data">Details of the dragged item</DIV> 
  49.             <DIV id="drop-zone">Drop Area</DIV> 
  50.             <SCRIPT defer> 
  51.             (function() {
  52.               var dragZone = document.querySelector('#drag-zone');
  53.               var dropZone = document.querySelector('#drop-zone');
  54.               dragZone.addEventListener('dragstart', function(event) {
  55.                 if (event.target.className) { 
  56.                   event.dataTransfer.effectAllowed = event.target.className;
  57.                   event.target.style.border = "4px solid #cc3300";
  58.                 }
  59.                 else { 
  60.                   if (event.target.parentNode.className == 'overwrite') {
  61.                     event.dataTransfer.setData("text", "<strong>Overwritten Content</strong>");
  62.                   }
  63.                   event.target.parentNode.style.border = "4px solid #cc3300";
  64.                 }
  65.                 return true;
  66.               }, true);
  67.               dragZone.addEventListener('dragend', function(event) {
  68.                 if (event.target.className) { 
  69.                   event.target.style.border = "4px solid #888";
  70.                 }
  71.                 else { 
  72.                   event.target.parentNode.style.border = "4px solid #888";
  73.                 }
  74.                 return true;
  75.               }, true);
  76.               dropZone.addEventListener('dragenter', function(event) {
  77.                 if (event.preventDefault) event.preventDefault();
  78.                 event.dataTransfer.dropEffect = 'copy';
  79.                 this.className = 'hovering';
  80.                 return false;
  81.               }, false);
  82.               dropZone.addEventListener('dragover', function(event) {
  83.                 if (event.preventDefault) event.preventDefault(); 
  84.                 event.dataTransfer.dropEffect = 'copy';
  85.                 return false;
  86.               }, false);
  87.               dropZone.addEventListener('dragleave', function(event) {
  88.                 if (event.preventDefault) event.preventDefault(); 
  89.                 this.className = '';
  90.                 return false;
  91.               }, false);
  92.               dropZone.addEventListener('drop', function(event) {
  93.                 if (event.preventDefault) event.preventDefault();
  94.                 var imgPassed = null;
  95.                 var dropdata = document.querySelector('#drop-data');
  96.                 var types = event.dataTransfer.types;
  97.                 document.querySelector('#drop-data').textContent = '';
  98.                 this.innerHTML = '';
  99.                 for (var i = 0; i < types.length; i++) {
  100.                   if (types[i] == 'Files') {
  101.                     var files = event.dataTransfer.files;
  102.                     for (var j = 0; j < files.length; j++) {
  103.                       dropdata.textContent += 'File Name: '+files[j].fileName;
  104.                       dropdata.textContent += 'File Size: '+files[j].fileSize;
  105.                     }
  106.                   }
  107.                   else {
  108.                     if (typeof event.dataTransfer.getData(types[i]) !== 'undefined') {
  109.                       dropdata.innerHTML += '<p><em class="datatypes">'+types[i]+'</em>: <br />'+event.dataTransfer.getData(types[i]).replace(/</g, '&lt;') + '</p>';
  110.                     }
  111.                   }
  112.  
  113.                   if (types[i] == 'text/uri-list') {
  114.                     imgPassed = event.dataTransfer.getData('text/uri-list');
  115.                   }
  116.                 }
  117.                 if (imgPassed) {
  118.                   var cEl = document.createElement('canvas');
  119.                   cEl.width = 200;
  120.                   cEl.height = 100;
  121.                   var ctx = cEl.getContext('2d');
  122.                   var img_buffer = document.createElement('img');
  123.                   img_buffer.src = imgPassed;
  124.                   img_buffer.style.display = 'none';
  125.                   document.body.appendChild(img_buffer); // this line only needed in safari
  126.                   img_buffer.onload = function() { ctx.drawImage(img_buffer,0,0,100,100); }
  127.                   this.appendChild(cEl);
  128.                 } else {
  129.                   if (event.dataTransfer.getData('text')) {
  130.                     this.innerHTML = event.dataTransfer.getData('text');
  131.                   }
  132.                   else if (event.dataTransfer.getData('text/plain')) {
  133.                     this.innerHTML = event.dataTransfer.getData('text/plain');
  134.                   }
  135.                 }
  136.                 return false;
  137.               }, false);
  138.             })();
  139.             </SCRIPT> 
  140.           </SECTION> 
  141.         </DIV> 
  142. </BODY>
  143. </HTML>


Implementing the geolocation feature
HTML 5 provides the support for the geolocation feature to locate a position on google maps

  1. <!DOCTYPE HTML>
  2. <HEAD>
  3. <META charset="utf-8" />
  4. <TITLE>GeoLocation Demonstrated</TITLE>
  5. </HEAD>
  6. <BODY>

  8. <SECTION id="wrapper">  
  9. <SCRIPT type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></SCRIPT>  

  11. <ARTICLE>  

  13.  <P><SPAN id="status">Please wait..we are trying to locate you...</SPAN></P>  

  15. </ARTICLE>  

  17. <SCRIPT>  

  19. function success(position) {  

  21. var s = document.querySelector('#status');    

  23. if (s.className == 'success') {  

  25.  return;  

  27. }     

  29. s.innerHTML = "found you!!!!!   Your latitude is:"+position.coords.latitude+" and longitude is:"+position.coords.longitude;

  31. s.className = 'success';    

  33. var mapcanvas = document.createElement('div');  

  35. mapcanvas.id = 'mapcanvas';  

  37. mapcanvas.style.height = '400px';  

  39. mapcanvas.style.width = '560px';   

  41. document.querySelector('article').appendChild(mapcanvas);    

  43. var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);  

  45. var myOptions = {  

  47.  zoom: 15,  

  49. center: latlng,  

  51.  mapTypeControl: false,  

  53.  navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},  

  55.  mapTypeId: google.maps.MapTypeId.ROADMAP  

  57. };  

  59. var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);   

  61. var marker = new google.maps.Marker({  

  63.  position: latlng,  

  65. map: map,  

  67.  title:"You are here!" 

  69. });  

  71. }     

  73. function error(msg) {  

  75. var s = document.querySelector('#status');  

  77. s.innerHTML = typeof msg == 'string' ? msg : "failed";  

  79. s.className = 'fail';   

  81. // console.log(arguments);  

  83.  }     

  85. if (navigator.geolocation) {  

  87. navigator.geolocation.getCurrentPosition(success, error);  

  89. } else {  

  91.  error('not supported');  

  93.  }    

  95. </SCRIPT>  

  97. </SECTION> 

  99. </BODY>
  100. </HTML>

Implementing web worker
web workers are scripts that work in background and do not interrupt user interface scripts.

  1. <!DOCTYPE HTML>
  2. <HEAD>
  3.   <TITLE>Worker example</TITLE>
  4.  </HEAD>
  5.  <BODY style="background-color:gold;">
  6.   <H3>The highest prime number discovered so far is: <OUTPUT id="result"></OUTPUT></H3>
  7.   <SCRIPT>
  8.    var worker = new Worker('worker.js');
  9.    worker.onmessage = function (event) {
  10.      document.getElementById('result').textContent = event.data;
  11.    };
  12.   </SCRIPT>
  13.  </BODY>
  14. </HTML>

worker.js
var n = 1;
search: while (true) {
  n += 1;
  for (var i = 2; i <= Math.sqrt(n); i += 1)
    if (n % i == 0)
     continue search;
  // found a prime!
  postMessage(n);
}

Implementing notifications
HTML 5 provides desktop notifications feature that allows websites to send notifications to your desktop .
you need to run this webpage from internet information services (IIS) server
you need to copy the notification.html file in the inetpub/wwwroot folder

  1. <!DOCTYPE HTML>
  2. <HEAD> 
  3. <TITLE>HTML5 Notification Example</TITLE> 
  4. <SCRIPT> 
  5. function RequestPermission (callback) {
  6.    window.webkitNotifications.requestPermission(callback);
  7. } 
  8. function add(){
  9. if (window.webkitNotifications.checkPermission() > 0) {
  10.       RequestPermission(add);
  11.    }
  12.    else {
  13. var num1 = parseInt(document.getElementById('num1').value);
  14. var num2 = parseInt(document.getElementById('num2').value);
  15. var num3=num1+num2;
  16. window.webkitNotifications.createNotification("", "Sum of "+num1+" and "+num2+" is", num3).show(); 
  17. }
  18. }
  19. </SCRIPT> 
  20. </HEAD> 
  21. <BODY> 
  22. <H1>HTML5 Notification Example</H1>
  23. number 1:<INPUT type="text" id="num1" value=" " ><BR/>
  24. number 2:<INPUT type="text" id="num2" value=" " ><BR/>
  25. <BUTTON onclick="add()">add</BUTTON> 
  26. </BODY>
  27. </HTML>

Creating 2D Graphics
SVG element is used to create 2D graphics in HTML 5 

  1. <!DOCTYPE HTML>
  2. <HEAD>
  3. <TITLE>SVG</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <H2>HTML5 SVG Example</H2>
  7. <SVG id="svgelem" xmlns="http://www.w3.org/2000/svg">
  8.     <CIRCLE id="redcircle" cx="50" cy="50" r="50" fill="red" />
  9. <LINE x1="200" y1="10" x2="200" y2="100"
  10.           style="stroke:purple;stroke-width:4"/>
  11. <POLYGON  points="50,100 30,20, 170,50" fill="lime" />
  12. <DEFS>
  13.       <RADIALGRADIENT id="gradient" cx="50%" cy="50%"  
  14. r="50%"
  15.       fx="50%" fy="50%">
  16.       <STOP offset="0%" style="stop-color:rgb(100,250,150);
  17.       stop-opacity:0"/>
  18.       <STOP offset="100%" style="stop-color:rgb(0,100,255);
  19.       stop-opacity:1"/>
  20.       </RADIALGRADIENT>
  21.    </DEFS>
  22.    <ELLIPSE cx="500" cy="50" rx="100" ry="50" 
  23.       style="fill:url(#gradient)" />
  24. <RECT x="50" y="50" width="250" height="250"
  25. style="fill:blue;stroke:pink;stroke-width:5;
  26. fill-opacity:0.1;stroke-opacity:0.9;padding:10,50;"/>
  27. </SVG>
  28. </HTML>

Implementing Modernizr
Modernizr helps to detect whether the browser supports CSS 3 or HTML 5 features

  1. <!DOCTYPE HTML>
  2. <HTML>
  3. <HEAD>
  4.   <meta charset="utf-8">
  5.   <TITLE>Modernizr Use</title>
  6.   <SCRIPT src="modernizr-1.6.min.js"></script>
  7. </HEAD>
  8. <BODY>
  9.  <DIV id="music">
  10.    <AUDIO>
  11.       <SOURCE src="audio.mp3" />
  12.    </AUDIO>
  13.    <BUTTON id="play">Play</button>
  14.    <BUTTON id="pause">Pause</button>
  15. </DIV>
  16.  <SCRIPT>
  17. if (Modernizr.audio) {
  18.     alert("Your Browser supports audio."); 
  19. }else{
  20.      alert("Your Browser does not support audio."); 
  21. }
  22. </SCRIPT>
  23. </BODY>
  24. </HTML>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

My Favorite Books

  • C and Data Structures by Ashok N. kamthane
  • Web Technologies by A. A. Puntambekar
  • Learn HTML and CSS with W3Schools
  • Learn JavaScript and Ajax with W3Schools
  • HTML5 Black Book: Covers Css3, Javascript,XML, XHTML, Ajax, PHP And Jquery
  • HTML5 Application Development Fundamentals: MTA Exam 98-375
  • .NET 4.0 Programming 6-In-1, Black Book
  • SQL Server 2008 R2 Black Book
  • Asp.net 4.0 Projects Covers: net 3.5 And .net 4.0 Codes, Black Book
  • UNIX Shell Programming 1 Edition by Yashavant Kanetkar
  • UNIX and Shell Programming 1 Edition by Richard F. Gilberg, Behrouz A. Forouzan
  • Computer Networks by Andrew S. Tanenbaum
  • Multiple Choice questions in computer science by Timothy J Williams