JSFiddle

  • Geolocation API

    Geolocation API

    var mapSource, lontude, lattude, myKey="AIzaSyAuAwqB8Uj_zOwZKgSkgB2iRxzwZGR6wr0";
    
    navigator.geolocation.getCurrentPosition(function(loc){
    	document.getElementById("lat").innerHTML = loc.coords.latitude;
    	document.getElementById ...
  • History API

    Using the History API

    
    	
    
  • Local Storage

    Setting a Local Storage value

    <div id="localValue">
    No local Storage set.
    </div>
    <script>
    	localStorage.setItem('localOne','Local Storage is set.');
    
    	alert( "local set?: " + localStorage.getItem('localOne') );
    
    document.getElementById('localValue ...</script>
  • HTML Video

    HTML Video

    <body>
    <video controls>
    	<source src="https://archive.org/download/Pbtestfilemp4videotestmp4/video_test_512kb.mp4" type="video/mp4">
    	<source src="https://archive.org/download/Pbtestfilemp4videotestmp4/video_test.ogv" type="video/ogg">
    	You cannot view this file.
    </video>
    <p>This is not my file.</p>
    <p>Original location:<br><a href="https://archive.org/details/Pbtestfilemp4videotestmp4" target="_blank">https://archive.org/details/Pbtestfilemp4videotestmp4</a></p>
    </body>
  • Audio autoplay and controls

    Audio autoplay and controls

    <body>
    <audio autoplay controls>
    	<source src="https://archive.org/download/testmp3testfile/mpthreetest.mp3" type="audio/mpeg">
    	<source src="https://archive.org/download/testmp3testfile/mpthreetest.ogg" type="audio/ogg">
    	You cannot listen to this file.
    </audio>
    <p>This is not my file.</p>
    <p>Original location:<br><a href="https://archive.org/details/testmp3testfile" target="_blank">https://archive.org/details/testmp3testfile</a></p>
    </body>
  • Flex Box - Dot Side Nav Example

    Flex Box - Dot Side Nav Example

    <ul id="dotNav"><li title="One"></li><li title="Two"></li><li title="Three"></li></ul>
  • Flex Box - Top Nav Example

    Flex Box - Top Nav Example

    <ul id="flexNavTopSec">
    	<li>One</li><li>Two</li><li>Three</li>
    </ul>
  • CSS3 Animations 03

    CSS3 Animations - Example 03

    <section id="animate03Sec">
    		<div class="example"></div>
    		<h4>Short Form</h4>
    		<p>animation: an03 5.73s infinite;</p>
    		<p>@keyframes an03 {
    		    <br> &nbsp; 0% {  }
    		    <br> &nbsp; 30% { transform: translate(120px,0); background: rgb(148, 183, 187 ...</p></section>
  • CSS3 Animations 02

    CSS3 Animations - Example 02

    <section id="animate02Sec">
    		<div class="example"></div>
    		<h4>Short Form</h4>
    		<p>animation: an02 2.15s infinite alternate;</p>
    		<p>@keyframes an02 {
    		    <br> &nbsp; 0% { transform: translate(120px,0); }
    			<br> &nbsp; 100% { transform: translate(0,0); }
    			<br>}</p>
    </section>
  • CSS3 Animations 01

    CSS3 Animations - Example 01

    <section id="animate01Sec">
    		<div class="example"></div><div class="example"></div><div class="example"></div>
    		<h4>Short Form</h4>
    		<p>animation: an01 3s infinite alternate;</p>
    		<p>@keyframes an01 {
    		    <br> &nbsp; 0% { transform: skewX(20deg); }
    			<br> &nbsp; 100% { transform: skewX(-20deg); }
    			<br>}</p>
    </section>