HTML5 and CSS3 authoritative guide. Pdf6

Source: Internet
Author: User

11th. Obtaining Geo-location information

HTML5 adds a Geolocation property to the Window.navigator object

Get Current Location

void GetCurrentPosition (onsuccess,onerror,options);

The first parameter is the callback function that gets executed successfully, the second is the callback function executed on failure, and the third is a list of optional properties (the second and third optional)

Navigator.geolocation.getCurrentPosition (function (position) {

Get processing when successful (parameter position is a position object)

})

The second parameter of the GetCurrentPosition method is the function called when it gets failed, which can be a prompt box, etc.

When the browser asks the user whether to share the location information, select No also throws an error, the callback function has an Error object with two properties

Code attribute: User denied location service (value 1) gets no location information (value 2) gets information timeout error (value 3)

Message property: Is a string that contains the error message and is useful when debugging

The third parameter of the GetCurrentPosition method can be:

Enablehighaccuracy: Whether high-precision geo-location information is required, it is necessary to consider the power of the equipment, the specific geographical situation, in most cases the default

Timeout: A time-limited operation (in milliseconds) to get operations on geo-location information, which returns an error if not obtained in the specified period

Maximumage: The effective time (in milliseconds) to cache geo-location information and try to get information again after it expires

Navigator.geolocation.getCurrentPosition (

function (position) {...},

Function (Error) {...},

{maximumage:60*1000*2,timeout:5000}

)

Continuous monitoring of current geo-location information (automatically acquired on a regular basis)

int watchcurrentposition (onsuccess,onerror,options);

The parameter is the same as the GetCurrentPosition method, and returns a number that can be used by the Clearwatch method to stop monitoring

Stop void Clearwatch (Watchid);

Position object: After obtaining a successful location, the callback function called to access the properties of the Position object

Latitude: Dimensions

Longitude: Longitude

Altitude: altitude, cannot be fetched or null

Accuracy accuracy of longitude and latitude (m)

Altitudeaccurancy altitude accuracy (m)

Heading device's forward method, which is the clockwise angle of the true north, which cannot be obtained is NULL

Speed device advance, cannot be obtained or null (M/s)

Timestamp time when acquiring a location

12th Chapter CSS3 Overview

In the CSS3, the overall structure is not adopted, but the modular structure of division and cooperation is adopted.

The advantage of modular is to prevent some browsers from not fully supporting some features, split into multiple modules to gradually support

3rd Chapter Selector

The disadvantages of specifying class in a style are: class itself has no semantics; use confusion

Property selector [Att*=val][att^=val][att$=val]

Structural pseudo-Class selectors

A pseudo-class selector is a selector that is already defined in the CSS and cannot be renamed (":")

A:link a:visited a:hover a:active first-line First-letter before after

Root selector: Binds a style to the root element of the page (entire <HTML>)

Not selector: Excludes sub-structure elements below this structure element

Empty selector: Specifies the style used when the content of the element is blank

Target selector: <a href= "#text1" > Text </a>, and jump to the style of change when ID equals Text1

First-child last-child Nth-child (: Nth-child (3) 3rd element if odd is odd) and Nth-last-child (: Nth-last-child (3) The 3rd element if even is an even number)

Nth-of-type and Nth-last-of-type, sorted by type, the above example refers to one of the odd elements of all elements, which refers to one of the all odd elements

Only-child selector: Apply a style when there is only one child element

UI element state pseudo class Selector

In addition to the structural pseudo-class selectors, there are UI element State pseudo-class selectors

: hover:active:focus:enabled (available):d isabled(not available): read-only (read-only readonly= "ReadOnly"): Read-write (not read-only): The Checked (Radio checkbox or CheckBox check box is selected, Firefox must be written as-moz-checked):d Efault (the radio or check box is selected by default): Indeterminate (any single box is not set to the overall style when selected, the user selects one of the styles is canceled): Selection (element is selected)

Universal Sibling Element Selector

< child elements >-< sibling elements after child elements >{}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.