Year: 2012

ค้นหาที่อยู่ปัจจุบันด้วย HTML5

<!doctype html><html> <head><title>Sample HTML5–index5.html</title></head> <body><p id=”location”>Current Location</p> <button onclick=”getLocation()”>Get</button> <div id=”map1″> </div><script src=”http://maps.google.com/maps/api/js?sensor=false”></script> <script type=”text/javascript”> var p1=document.getElementById(“location”); function getLocation() { if (navigator.geolocation) {   navigator.geolocation.getCurrentPosition(showPosition); } else {   p1.innerHTML=”Location not Support!!!”; } } function showPosition(position) {   var lat=position.coords.latitude; var lon=position.coords.longitude; var ll=new google.maps.LatLng(lat,lon); var m1=document.getElementById(“map1”); m1.style.height=’250px’; m1.style.width=’500px’; var opt={center:ll,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions: { […]

การค้นหา Latitude และ Longitude ด้วย HTML5

<!doctype html> <html><head><title>Sample HTML5</title></head> <body> <p id=”location”>Current Location</p> <button onclick=”getLocation()”>Get</button> <script type=”text/javascript”> var p1=document.getElementById(“location”); function getLocation() { if (navigator.geolocation) {   navigator.geolocation.getCurrentPosition(showPosition); } else {   p1.innerHTML=”Location not Support!!!”; } } function showPosition(position) {   p1.innerHTML=”Lat : ” + position.coords.latitude+”<br/>lon:”+position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENINED: p1.innerHTML=”Permission Denied”; break; case error.TIMEOUT: p1.innerHTML=”TimeOut”; break; […]

การขยายและลดขนาด Video ด้วย HTML5

<!doctype html> <html><head><title>test HTML5</title></head> <body> <div style=”text-align:center”> <button onclick=”makebigger()”>Bigger</button> <button onclick=”makesmaller()”>Smaller</button><br/> <video id=”myvideo1″ controls=”controls”> <source src=”gizmo.mp4″ type =”video/mp4″/></video> </div> <script type=”text/javascript”> var video1=document.getElementById(“myvideo1”); function makebigger(){video1.width=620;} function makesmaller(){video1.width=200;} </script> </body> </html> ————————————————————— RESULT    

Drag and Drop ใน HTML5

การเขียนคำสั่งในการ Drag and Drop รูปภาพด้วย HTML5 <!doctype html> <html> <head><title>test HTML5</title></head> <body> <script type=”text/javascript”> function drag(ev){   ev.dataTransfer.setData(“Text”,ev.target.id);} function drop(ev){var data=ev.dataTransfer.getData(“Text”); ev.target.appendChild(document.getElementById(data)); ev.preventDefault();} function allowdrop(ev) {ev.preventDefault();} </script> <div id=”div1″ ondrop=”drop(event)” ondragover=”allowdrop(event)”style =”width:300px;height:300px;border:1px solid #cccccc;”></div> <img id=”drag1″ src=”starbuck1.jpg” widht=”250″ height=”265″draggable=”true” ondragstart=”drag(event)”/> </body> </html>