Archiv:

Latest photoblog

photoblog

Blog » JavaScript

Geolib.js

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

Linkdump #4

4

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/

Geolocation 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

function alertMyPosition(position) {
	alert("Your position is " + position.coords.latitude + ", " + position.coords.longitude);
}
 
function noLocation(error) {
	alert("No location info available. Error code: " + error.code);
}
 
$('#getPositionButton').bind('click', function() {
	$.geolocation.get({win: alertMyPosition, fail: noLocation});
});
 
$('#watchPositionButton').bind('click', function() {
	// alertMyPosition is called each time the user's position changes
	myPosition = $.geolocation.watch({win: alertMyPosition}); 
});
 
$('#stopButton').bind('click', function() {
	$.geolocation.stop(myPosition);
});

Demo

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

Download

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

Styleform jQuery-Plugin


[English version below!]

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 jQuery-Plugin

[English version below!]
Da ich die Funktion aus der iPhone-Safari Adressleiste schon immer sehr praktisch fand, und mir diese schon oft für Eingabefelder auf Websites gewünscht habe, habe ich mich gestern kurz hingesetzt und ein kleines jQuery-Plugin gebaut, welches mir diese Funktionalität abbildet.

„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

Debugging: DOM Exception 7 am iPad

Gestern habe ich mir beim Entwickeln einer WebApp für das iPad die Zähne ausgebissen an einem Problem das so simpel schien, ich aber trotzdem lange gebraucht habe um des Rätsels Lösung zu finden. Ich wollte dynamisch per XMLHttpRequest() einen <style>-Knoten nachladen und in mein aktuelles Dokument einfügen. Dazu nutzte ich den folgenden Code:

(function() {
	var style = document.createElement('style');
	style.innerHTML = 'body {background: #ACC;}';
	document.getElementsByTagName('head')[0].appendChild(style);
})();

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:

(function() {
	var style = document.createElement('style');
	var text = document.createTextNode('body {background: #ACC;}');
	style.appendChild(text);
	document.getElementsByTagName('head')[0].appendChild(style);
})();

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