HTML 5 – Nishant Rana's Weblog

Nice resource for learning html 5

Hi,

Found this wonderful site that nicely explains the concepts of HTML 5.

Give it a look

Bye.

querySelector and querySelectorAll – Selectors API

Hi,

Apart from our usual document.getElementsById and document.getElementsByTagName method to select element from the DOM we can now make use of document.querySelector and document.querySelectorAll .

With them we can use the same selectors that we use in CSS to select elements for styling.

A simple example

<html>
<head>
    <title>Selectors API</title>
    <script>
        window.onload = function () {

            // select div element with id myDivId
            var myDiv = document.querySelector("#myDivId");

            // select p element with text "Paragraph 1"
            var paragraph1 = myDiv.querySelector("span>p");

            // select p element having class as p1Class
            var paragraph2 = document.querySelector("p.p2Class");

            // select all p element
            var allParagraph = document.querySelectorAll("div>span>span>p");
        }

    </script>
</head>
<body>
    <div id="myDivId" class='divClass'>
        <span><span class='spanClass'>
            <p>
                Paragraph 1</p>
            <p id="p2" class="p2Class">
                Paragraph 2</p>
        </span></span>
    </div>
</body>
</html>

More details

http://msdn.microsoft.com/en-us/ie/cc307217.aspx

http://msdn.microsoft.com/en-us/library/cc288326(v=vs.85).aspx

Browser supported

http://caniuse.com/queryselector

Making cross domain call using JSONP (JSON with padding)

Hi,

Just created a simple html page that uses JSONP to make cross domain call to twitter’s API.

Source Code:-

<!DOCTYPE html>
<html>
<head>
    <title>JSONP Example</title>
    <script>

        function getTweets(tweets) {

            var tweetDiv = document.getElementById("tweet");

            for (var i = 0; i < tweets.results.length; i++) {
                var tweet = tweets.results[i];

                // create div element for each result
                var div = document.createElement("div");
                div.innerHTML = "<img src= " + tweet.profile_image_url + "></img> ";
                div.innerHTML += tweet.from_user + " : <b><i>" + tweet.text + "</b></i>";

                // append it to tweet div
                tweetDiv.appendChild(div);
            }
        }
    </script>
</head>
<body>
<div id="tweet">
</div>
<!--Specifying search term and callback function-->
<script src="http://search.twitter.com/search.json?q=Sachin%20Tendulkar&rpp=10&callback=getTweets"></script>
</body>
</html>

Bye

Used HTML 5 Geolocation API with Bing Map.

Just created a simple html page that shows my location using the new Geolocation API.

Source Code:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Geolocation HTML5</title>
    <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
    <script>

        window.onload = getMyLocation;

        function getMyLocation() {

        // Check if the browser supports the Geolocation API
            if (navigator.geolocation) {

                // we can specify how the geolocation computes its value
                var postionOptions = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 };

                // call getCurrentPosition method of the API
                // getCurrentPosition(successHander, errorHandler, positionOptions)
                navigator.geolocation.getCurrentPosition(displayLocation, displayError, postionOptions);
            }
            else {
                alert("No geolocation support in the browser");
            }
        }

        function displayLocation(position) {

            // load map if location is found
            map = new VEMap('myMap');
            map.LoadMap(null, 4, VEMapStyle.Hybrid);

            // get the latitude and longitude
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;

            // place the pushpin
            PlacePushPin(latitude, longitude);

            // get location div and show the latitude longitude and the accuracy
            var divLocation = document.getElementById('location');
            divLocation.innerHTML = "I am at Latitude :" + latitude + ", Longitude : " + longitude;
            divLocation.innerHTML += " with " + position.coords.accuracy + " meters accuracy";
        }

        // place the pushpin in the map for the location found

        function PlacePushPin(lat, lon) {
            latlong = new VELatLong(lat, lon);
            myPushPin = new VEShape(VEShapeType.Pushpin, latlong);
            map.AddShape(myPushPin);
            map.SetCenterAndZoom(latlong, 15);
        }

        // error handler
        function displayError(error) {

            var errorTypes = {
                0: "Unknown Error",
                1: "Permission denied by user",
                2: "Position is not available",
                3: "Request timed out"
            };

            var errorMessage = errorTypes[error.code];

            if (error.code == 0 || error.code == 2) {
                errorMessage = errorMessage + " " + error.message;
            }

            var divLocation = document.getElementById('location');
            divLocation.innerHTML = errorMessage;
        }
    </script>
</head>
<body>
    <div id="location"></div>
    <div id='myMap' style='position: relative; width: 600px; height: 250px;'>
    </div>
</body>
</html>

Bye.