HTML5 Demo ISYS 350

HTML 5 validation/#.UdytIOLn_zc validation/#.UdytIOLn_zc

New INPUT types INPUT type="number" INPUT type="range” Other types: – , url, tel, etc Age: Satisfaction:

'required' attribute Example: Your Name:

‘placeholder’ Attribute Placeholder attribute which lets us display a prompt or instructions inside the field. Example: Address:

HTML 5 Form Demo Your Name: Address: Website: Age: Satisfaction:

HTML 5 Form fieldset – Like a GroupBox – – Try It Yourself

Is there any way to have a fieldset width only be as wide as the controls in them? display: inline-block – inline-block elements are like inline elements but they can have a width and a height..floating-box { display: inline-block; width: 170px; height: 175px; margin: 10px; border: 3px solid blue; } Example: there-any-way-to-have-a-fieldset-width-only-be-as-wide-as- the-controls-in-the

HTML5 Multimedia: Video,Audio,Youtube,Etc.

Adding New Elements to HTML Creating an HTML Element document.createElement("myHero") myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } My First Hero

HTML5 Geolocation The navigator.geolocation.getCurrentPosition() method returns an object with latitude, longitude and other properties. Latitude Logitude Static map

HTML5 Geolocation Demo var x; function getLocation() { x = document.getElementById("demo"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude; } Click the button to get your coordinates. Try It

Google Maps Maps basic Maps overlays

Static Map Image var x; function getLocation() { x = document.getElementById("demo"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude; var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = " document.getElementById("mapholder").innerHTML = " "; } Click the button to get your coordinates. Try It

Google Maps var myCenter=new google.maps.LatLng( , ); function initialize() { var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker=new google.maps.Marker({position:myCenter,}); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); function newLocation(lat,lng) { myCenter=new google.maps.LatLng(lat,lng); initialize(); } function getLocation() { newlat=parseFloat(window.prompt("Enter Latitude:")); newlng=parseFloat(window.prompt("Enter Longitude:")); newLocation(newlat,newlng); }