Mit dem sehr kompakten JavaScript spryMap lassen sich Kartenausschnitte in einem kleinen Container einbinden und verschieben. Das Script sollte auch bei Verwendung von JavaScript Frameworks funktionieren und kann mit einigen Parametner individuell angepasst werden.
Website: http://candrews.net/sandbox/spryMap/
Popularity: 2% [?]
Manchmal kommt es vor, dass zur Eingabe von Passwörtern oder zum Verschicken von Formulardaten ein Input-Text-Feld dynamisch in ein Passwortfeld (type=”password”) oder ein Hidden-Feld (type=”hidden”) geändert werden muss. Leider unterstützt der Internet Explorer in allen Versionen die Änderung von “type” per JavaScript nicht. Also folgendes ist im IE nicht möglich:
<input onclick="this.type='hidden';" name="blabla" type="button" value="blabla" />Ein Workaround ist es, das Feld per JavaScript zu entfernen und mit den gleichen Attributen neu zu erstellen. Hierzu kann man eine Funktion nach folgendem Schema verwenden:
function changeInputType(oldObject, Type) {
var newObject = document.createElement('input');
newObject.type = Type;
if(oldObject.size) newObject.size = oldObject.size;
if(oldObject.value) newObject.value = oldObject.value;
if(oldObject.name) newObject.name = oldObject.name;
if(oldObject.id) newObject.id = oldObject.id;
if(oldObject.className) newObject.className = oldObject.className;
oldObject.parentNode.replaceChild(newObject,oldObject);
return newObject;
}In unserem Beispiel von oben würde das dann so funktionieren:
<input onclick="changeInputType(this,'hidden');" name="blabla" type="button" value="blabla" />
Popularity: 1% [?]
Per Hotlink lädt man die CSS-Dateien direkt von Google.com.
Anhand der URL-Parameter werden die Schriftarten sowie die Variationen dieser Schriftarten bestimmt.
Einfaches Beispiel:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">Etwas aufwändiger:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=
Inconsolata:italic,bolditalic|Droid+Sans">
Im eigenen CSS-File können diese Schriftarten für jedes beliebige Element festgelegt werden:
body { font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; }
Anstelle auf das CSS bei Google.com zu verlinken, kann der JavaScript WebFont Loader verwendet werden. Dies hat Vorteile wie z.B. die Kontrolle über das “Flash of Unstyled Text” (FOUT), aber auch Nachteile, wie die Tatsache, dass die Schriftarten bei deaktiviertem JavaScript nicht geladen werden.
<script type="text/javascript">// <![CDATA[
WebFont.load({
google: {
families: ['Cantarell']
}
});
// ]]></script>
Klassennamen wie .wf-loading werden auf die entsprechenden HTML-Elemente angewendet.
Wenn die Schriftarten geladen werden, können diese Klassennamen verwendet werden, um den Text zu verstecken/auszublenden. Dann wenn sie fertig geladen sind, müssen sie wieder sichtbar gemacht werden. So funktioniert FOUT.
Websites: http://paulirish.com/2010/details-on-the-new-google-webfont-api/
http://code.google.com/webfonts
Popularity: 3% [?]
jQuery.popeye ist ein Bildergalerie-Script basierend auf der JavaScript-Bibliothek jQuery. Hiermit kann platzsparend eine ganze Sammlung von Bildern angezeigt werden. Außerdem können Bilder vergrößert werden, ohne das Layout der Seite zu verlassen.
Es wurde als Alternative zu der oft gesehenen JavaScript Image Lightbox entworfen. Alle Lightbox Versionen benutzen jedoch ein modales Fenster um die großen Bilder anzuzeigen, sodass sie die Interaktion auf der Website stören. jQuery.popeye nimmt einen anderen Ansatz: Es erlaubt alle Thumbnails sowie die großen Bilder an einer festen Position zu durchsuchen und ermöglicht so ein weniger störendes Benutzererlebnis als bei modalen Fenstern.
Demo: http://dev.herr-schuessler.de/jquery/popeye/demo.html
Popularity: 2% [?]
