html5 Summary

ajax.js

$(function(){
  var loadingPage = null;
  
  $('nav a').click(function(e) {
    e.preventDefault();
    $('nav a').removeClass('active');
    $(this).addClass('active');
    var page = $(this).data('page');
    $('.content').hide();
    if (loadingPage){
      loadingPage.abort();
    }
    loadingPage = $.ajax({
      url: '/pages/' + page + '.html',
      cache: false,
      timeout: 8000,
      beforeSend: function(){
        $('.error').hide();
        $('.loading').show();
      },
      complete: function(){
        $('.loading').hide();        
      },
      success: function(data){
        $('.content').html(data).show();
      },
      error: function(){
        if (result.statusText != 'abort'){
          $('.error').show();          
        }
      }
    });
  });
  
  $('.error a').click(function(e){
    e.preventDefault();
    loadPage($('nav a.active').data('page'))
  });
});

Audio Video

<h3>Dramatic Chipmunk</h3>
<video controls preload width=400px height=300px>
  <source src="dramatic_chipmunk.ogv" type="video/ogg">
  <source src="dramatic_chipmunk.mp4" type="video/mpeg">
  You do not have HTML5 Video support.
</video>

<h3>Inconceivable</h3>
<audio controls>
  <source src="thatword.ogg" type="audio/ogg">
  <source src="thatword.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Canvas

  <script>
    function drawShape(){
      var canvas = document.getElementById('smiley');
      var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(100,100,100,0,Math.PI*2,true); // Outer circle
        ctx.moveTo(150,110);
        ctx.arc(100,110,50,0,Math.PI,false);   // Mouth
        ctx.moveTo(70,65);
        ctx.arc(60,65,10,0,Math.PI*2,true);  // Left eye
        ctx.moveTo(150,65);
        ctx.arc(140,65,10,0,Math.PI*2,true);  // Right eye
        ctx.stroke();
    }
  </script> 

Drag n Drop

    function afterLoad(){
      var pegs = document.querySelectorAll('.peg_box div');
      [].forEach.call(pegs, function(peg) {
        peg.addEventListener('dragstart', startDrag, false);
      });
      
      var holes = document.querySelectorAll('.hole_box div');
      [].forEach.call(holes, function(hole) {        
        hole.addEventListener('dragenter', isDroppable, false);
        hole.addEventListener('dragover', function(e){e.preventDefault();}, false);
        hole.addEventListener('drop', dropped, false);
      });
    };
    
    function startDrag(e) {
      var html = e.target.outerHTML;
      pegName = e.target.classList[0];
      e.dataTransfer.effectAllowed = "move";
      e.dataTransfer.setData('text/plain', html);
    }
    
    function isDroppable(e) {
      e.preventDefault();
      if (e.target.classList[0] === pegName) {
        isMatch = true;
      } else {
        isMatch = false;
      };
    }
    
    function dropped(e) {
      e.preventDefault();
      if (isMatch === true) {
        e.target.innerHTML = e.dataTransfer.getData('text/plain');
        var dropped = document.querySelector('.' + pegName);
        document.querySelector('.peg_box').removeChild(dropped);
      }
    }
    
    window.addEventListener('load', afterLoad, false)

Other New Tags.html

  <figure>
    <img src="test_image.png" />
    <figcaption>
      This is a caption for the test image
    </figcaption>
  </figure>
  <summary>
    You can write a small summary and have a disclosure triangle which...
    <details>
      reveals the details when clicked!
    </details>
  </summary>
  <article>
    <header>
      <h1>What is the Article for?</h1>
    </header>
    <p>
      The article element represents a component of a page that consists of a 
      self-contained composition in a document, page, application, or site and 
      that is intended to be independently distributable or reusable, e.g. in 
      syndication. This could be a forum post, a magazine or newspaper article, 
      a blog entry, a user-submitted comment, an interactive widget or gadget, 
      or any other independent item of content.
    </p>
    <footer>
      <cite>
        <a href="http://www.w3.org/TR/html5/semantics.html#the-article-element">
          W3C Specification
        </a>
      </cite>
    </footer>
  </article>

Semantic Tags

  <header>
    <h1>Semantic Tags</h1>
  </header>
  <aside>
    <nav>
      <ul>
        <li><a href="#"></a></li>
      </ul>
    </nav>
  </aside>
  <section>
    <p></p>
  </section>
  <footer></footer>

Simpler Page Structure.html

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=utf-8>
  <title>HTML5 Summary</title>
</head>
<body>
</body>
</html>

SVG

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <circle r="100" cy="100" cx="100"     //  Outer Circle
    stroke-width="1" stroke="#000" fill="none"/>
  
  <path d="M50 110 A 35 35, 1, 0, 0, 150 110"    //  Mouth
    stroke-width="1" stroke="#000" fill="none" />
  
  <circle r="10" cy="65" cx="60"        //  Left Eye
    stroke-width="1" stroke="#000" fill="none"/>
  
  <circle r="10" cy="65" cx="140"       //  Right Eye
    stroke-width="1" stroke="#000" fill="none"/>
</svg>

Video Audio

<h3>Dramatic Chipmunk</h3>
<video controls preload width=400px height=300px>
  <source src="dramatic_chipmunk.ogv" type="video/ogg">
  <source src="dramatic_chipmunk.mp4" type="video/mpeg">
  You do not have HTML5 Video support.
</video>

<h3>Inconceivable</h3>
<audio controls>
  <source src="thatword.ogg" type="audio/ogg">
  <source src="thatword.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Video & Audio

<h3>Dramatic Chipmunk</h3>
<video controls preload width=400px height=300px>
  <source src="dramatic_chipmunk.ogv" type="video/ogg">
  <source src="dramatic_chipmunk.mp4" type="video/mpeg">
  You do not have HTML5 Video support.
</video>

<h3>Inconceivable</h3>
<audio controls>
  <source src="thatword.ogg" type="audio/ogg">
  <source src="thatword.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>