Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

Practice exercises CHAPTER 14 551



  1. Under the
    element, add another
    element whose id is message.
    Your HTML page should look like the following.
    <!DOCTYPE html>

    Position Mapper











  2. In the default.css files, add the following style rules to center and size the map and
    message.
    #map {
    width: 800px;
    height: 600px;
    margin-right: auto;
    margin-left: auto;
    border: solid;
    }


#message {
width: 800px;
height: 50px;
margin-right: auto;
margin-left: auto;
border: solid;
}


  1. In the default.js file, add the document ready function. In the document ready func-
    tion, call the getLocation function that you create in the next step.
    Your code should look like the following.
    $(document).ready(function () {
    getLocation();
    });

  2. Add the following code for the getLocation, supportsGeolocation, showMessage, and
    showError functions.
    This is the same code that was covered in Lesson 1.
    function getLocation() {
    if (supportsGeolocation()) {
    watchId = navigator.geolocation.getCurrentPosition(showPosition
    , showError);
    }
    else {

Free download pdf