I created a small JavaScript library to provide some basic geo functions like distance calculation, conversion of decimal coordinates to sexagesimal and vice versa, etc.

Usage:

To calculate distance between two geo coordinates
geolib.getDistance({"latitude": 51.511928, "longitude": 7.463536}, {"latitude": 51.510318, "longitude": 7.524133}, 10); // -> 4200 (Accuracy 10m)

Takes 2 or 3. First 2 arguments must be an object with a latitude and a longitude property (e.g. {latitude: 52.518611, longitude: 13.408056}). Coordinates can be in sexagesimal or decimal format. 3rd argument is accuracy (in meters). So a calculated distance of 1248 meters with an accuracy of 100 is returned as 1200.

Return value is always an integer and represents the distance in meters.

To convert it into miles use:
geolib.convertUnit('mi', value)

Convert sexagesimal to decimal
geolib.sexagesimal2decimal("51° 29' 46\" N"); // -> 51.49611111

Convert decimal to sexagesimal
geolib.decimal2sexagesimal(51.49611111); // -> 51° 29' 46.00

Download:
https://github.com/manuelbieh/geolib

Demo:
http://www.manuel-bieh.de/publikationen/scripts/geolib/demo.html

18 mistakes that kill startups
– http://www.paulgraham.com/startupmistakes.html

7 lovely things about HTML5
– http://www.elated.com/articles/7-lovely-things-about-html5-markup/

Lists are cool. So here is another one: 15 HTML5 Canvas Applications Developers Should Know About
– http://smashinghub.com/15-html5-canvas-applications-developers-should-know-about.htm

CSS3 @font-face design guide
– http://webdesignerwall.com/tutorials/css3-font-face-design-guide

Published more than a year ago but still worth reading: Signs of a poorly written jQuery plugin:
– http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/

I created a small jQuery plugin which acts as a simplification of the Geolocation API.

Instead of using navigator.geolocation.getCurrentPosition you can now just use the jQuery methods $.geolocation.get() or $.geolocation.watch().

Contrary to the standard API the only parameter the functions expect is a JSON object with three properties in no particular order: success, error, options. For success and error you can also use their alias properties „win“ and „fail“:
$.geolocation.get({win: function() {}, fail: function() {}, options);

You can also use $.geolocation.getCurrentPosition(success, error, options) to get native API feeling if this makes you happier. In conjunction with my Geolocation API polyfill script this also works with some non-standard Geolocation APIs like Google Gears or Blackberry Location.

Usage

$.geolocation.clearWatch(watchID)

Stops tracking of the user for the according watchID.

watchID (Integer)

$.geolocation.get(options)

Get the current position of the user

options (Object)

• error
  Function to call if geolocation request failed
• fail
  Alias for error
• options
  Options for the geolocation request
  • enableHighAccuracy
  • maximumAge
  • timeout
• success
  Function to call if geolocation request was successful
• win
  Alias for success

$.geolocation.getCurrentPosition(success, error, options)

Get the current position of the user (API standard behavior)

success Function to call if geolocation request was successful

error Function to call if geolocation request failed

options Options for the geolocation request

• enableHighAccuracy
• maximumAge
• timeout

$.geolocation.stop(watchID)

Stops tracking of the user for the according watchID.

watchID (Integer)

$.geolocation.stopAll()

Stops all watchPosition callbacks.

$.geolocation.watch(options)

Track the movement of the user

Returns: watchID (Integer)

options (Object)

• error
  Function to call if geolocation request failed
• fail
  Alias for error
• options
  Options for the geolocation request
  • enableHighAccuracy
  • maximumAge
  • timeout
• success
  Function to call if geolocation request was successful
• win
  Alias for success

$.geolocation.watchPosition(success, error, options)

Track the movement of the user (API standard behavior)

Returns: watchID (Integer)

success Function to call if geolocation request was successful

error Function to call if geolocation request failed

options Options for the geolocation request

• enableHighAccuracy
• maximumAge
• timeout

Examples

Demo

http://manuel-bieh.de/publikationen/scripts/jquery/geolocation/

Download

https://github.com/manuelbieh/jQuery-Geolocation

Mit diesem Plugin ist es möglich Checkboxen und Radiobuttons zu stylen.

Anwendung:

Einfach jedem Form-Element dessen Checkboxen und Radiobuttons gestyled werden sollen die Klasse „styleform“ anhängen. Alternativ kann das Styling auf alle oder nur ausgewählte Formulare angewandt werden:
$('form').styleForm();
$('#myForm').styleForm();

Styling:

Es kann entweder ein eigenes Stylesheet erstellt werden mit eigenen Eigenschaften für die klassen .styleRadio und .styleCheckbox was allerdings recht kompliziert ist, da es kein sauberes Standard-Stylesheet ist das angewandt werden kann. Daher empfiehlt es sich, einfach die mitgelieferten Bilder im images-Ordner so zu bearbeiten wie man es wünscht.

Bonus!

Ein iPhone Theme wird in drei größen mitgeliefert.

Bekannte Probleme:

• Opera ignoriert die disabled Eigenschaft komplett

Wünsche:

• Styling von select Elementen ermöglichen

Demo

http://www.manuel-bieh.de/publikationen/scripts/jquery/styleform
http://www.manuel-bieh.de/publikationen/scripts/jquery/styleform/iphone.html

Download

http://plugins.jquery.com/project/Styleform

English description

You can use this plugin if you want to change the default look of checkboxes and radiobuttons.

Usage:

Just add the class „styleform“ (all lowercase) to any form you want to be styled. Or you can alternatively use:
$('form').styleForm();
to apply the styling of checkboxes and radiobuttons in all forms inside a document.

Styling:

You can either create a new stylesheet with your own properties styling the .styleRadio and .styleCheckbox classes which is however quite complicated since there is no default stylesheet that can be applied yet. Or you can (the easy way) use the provided themes and edit the files inside the images folder the way you want it.

Bonus:

iPhone theme included in three different sizes (small, normal, big)!

Known issues:

• Opera ignores the disabled state completely

Wishes:

• Add styling of select elements

Demo

http://www.manuel-bieh.de/publikationen/scripts/jquery/styleform
http://www.manuel-bieh.de/publikationen/scripts/jquery/styleform/iphone.html

Download

http://plugins.jquery.com/project/Styleform

„Xify“ erzeugt einen X-Button zu einem Textfeld wie man ihn aus der Adressleiste des iPhone-Safari kennt. Ein Klick auf das Symbol löscht den kompletten Text des dazugehörigen Textfelds. Benötigt jQuery ab Version 1.2.3.

Die Anwendung

$('input:text').xify();
$('input:password').xify({color: "red"});

Parameter

color

Hintergrundfarbe des Buttons

Typ: CSS Farbangabe

Standardwert: #bbb

size

Größe des Buttons

Typ: integer

Standardwert: 12

left

Angabe um wieviel Pixel der Button im Eingabefeld nach links gerückt werden soll

Typ: integer

Standardwert: 4

callback

Callbackfunktion die aufgerufen wird, wenn das X geklickt wird. Muss true oder false zurückgeben.

Typ: function

Demo

http://www.manuel-bieh.de/publikationen/scripts/jquery/xify/

Download

http://plugins.jquery.com/project/xify

English description

You can use this plugin to automatically add a small „X“ to each input field to remove the current value by clicking or touching the X. You may know this function from the iPhone Safari URL bar. Requires jQuery 1.2.3+

Usage

$('input:text').xify();
$('input:password').xify({color: "red"});

Parameters

color

Backgroundcolor of the button.

Type: CSS color value

Default: #bbb

size

Size of the button.

Type: integer

Default: 12

left

Amount of pixels the button is moved to the left within the input field.

Type: integer

Default: 4

callback

Callback which is executed when the X is clicked. Must return true or false.

Type: function

Demo

http://www.manuel-bieh.de/publikationen/scripts/jquery/xify/

Download

http://plugins.jquery.com/project/xify

Einfach, logisch, funktioniert. Sollte man denken. Funktioniert am Desktop und am iPhone auch fantastisch, das iPad schmeißt mir hingegen den Fehler NO_MODIFICATION_ALLOWED_ERR DOM Exception 7 und fügt keinen neuen style-Knoten in mein Dokument ein. Des Rätsels Lösung ist hier einfach und liegt am innerHTML. Diese Anweisung scheint das iPad bei Styles nicht zu interpretieren. Nutzen sollte man hier stattdessen:

Dann fügt auch das iPad ohne zu murren den Style ins Dokument.