kloeschen.com >> » Javascript

Valide Formulare per Knopfdruck

Administrator — Mon, 18 Jul 2005 18:23:58 +0000

Mit dem FormBuilder baut man sich recht schnell ein Formular zusammen und vergisst mit Sicherheit nicht, den Inhalt zu validieren, die entsprechenden Felder als notwendig zu markieren oder eine Feldbeschreibung hinzuzufügen.
Das Ganze wird dann noch durch eine Vorschau vervollständigt.

Selbst unobtrusive DOM Javascript kann man per Knopfdruck hinzufügen. Ich bin begeistert. Meine nächsten Formulare werde ich damit erstellen.
Hier ein Screenshot dazu:

Ruhig mal ausprobieren

Mouseover DOM Inspector Favelet

Administrator — Sat, 02 Jul 2005 07:48:40 +0000

Ein Bookmarklet oder Favelet, welches bei der Analyse einer Webseite hilft. Es zeigt alle Informationen eines Elements an, wenn man mit der Maus darüber fährt. MouseOver DOM Inspector Favelet

standard konforme links in ein neues fenster (wordpress plugin)

Administrator — Sat, 02 Jul 2005 07:30:10 +0000

Ich weiss, dass es auch mit wordpress nur schwer gelingt, validen XHTML Code rauszuschmeissen, aber man sollte sich doch bemühen, so nah daran zu sein, wie nur irgend möglich. Das Tutorial geht davon aus, das externe Links mit rel="external" gekennzeichnet sind. Um dies zu erreichen, kann man das natürlich in seinem Post selbst erledigen, oder aber man nimmt sich das bereits vorhandene Plugin Identify External Links.
Dort gibt es eine Funktion, die man leicht für diese Zwecke editieren kann:

function parse_external_links($matches){
if ( wp_get_domain_name_from_uri($matches[3]) != wp_get_domain_name_from_uri($_SERVER["HTTP_HOST"]) ){
return '‘ . $matches[5] . ‘‘;
} else {
return ‘‘ . $matches[5] . ‘‘;
}
}
?>

man tausche einfach das class="extlink" mit rel="external" und schon sind die Links richtig markiert.

Nun gilt es noch das Javascript richtig einzubinden und mit dem Onload Event zu verbinden. Das Einbinden nimmt man entweder per Hand im header seines Themes vor, oder benutzt eine kleine WordPress Action:

function insert_externallinks_script(){
echo '';
}
add_action('wp_head','insert_externallinks_script');
?>

Natürlich muss die Datei externallinks.js dann im Stammverzeichnis des Webservers liegen. Jetzt muss in dieser Datei unter Umständen der Onload Event verbessert werden. Je nachdem, ob schon weitere Javascripts eingebunden wurden, überschreibt man sonst so den OnloadHandler.

var oldonload = window.onload;

if (typeof window.onload != 'function') {
window.onload = function() {
externalLinks();
liveSearchInit();
}
} else {
window.onload = function() {
oldonload();
liveSearchInit();
externalLinks();
}
}

Es wird erst ausgelesen, ob schon eine Funktion mit dem OnloadHandler verknüpft wurde. Wenn nein, wird die neue Funktion damit verbunden, sonst wird eine neue Funktion erstellt, welche die alte aufruft und anschliessend die externalLinks(). Der Autor des livesearch-plugins wollte z.B. dass die livesearchInit per onload geladen wird:

Da dies aber jede vorher konfigurierte OnLoad Funktion überschreiben würde, habe ich sie kurzerhand hierhin verlagert. Und was soll ich sagen, externe Links öffnen sich in einem neuen Fenster und die LiveSuche funktioniert auch noch.

Mit Hilfe von CSS (Ja, auch CSS unterstützt Attribute Selektoren) kann man die externen Links dann auch noch gesondert stylen.

Bildunterschriften semantisch korrekt?

Administrator — Thu, 30 Jun 2005 10:15:42 +0000

Wichtig ist, dass das Ganze semantisch korrekt bleibt und mit möglichst wenig zusätzlichen Tags auskommt. Hier nun der Ansatz von Ulrike Häßler:
Wir benutzen eine Definitions-Liste, die ja bekanntlich dazu dient, einen Begriff mit entsprechenden Definitionen oder Erklärungen in Verbindung zu bringen. Wenn man nun das Bild als Begriff sieht, kann man eine Definitionsliste benutzen, um die Definition als Bildunterschrift zu setzen. Mit ein Wenig Style sieht das Ganze auch aus wie gewollt und floated sogar…
(Beispiel von der Entdeckerin!)

: Bildlegende

Passendes CSS:

dl.meImgLeft { float: left; margin-right: 1em; }
dl.meImgLeft dt { margin-bottom: 0; }
dl.meImgLeft dd { margin: 0; } // verhindert das Einrücken und den Abstand nach oben

So und der gewagte DOM Hacker könnte das Ganze dann noch automagisch regeln, indem er den TitleTag ausliest und dann das entsprechende XHTML um das Bild herum erstellt. Aber diese Arbeit soll denen überlassen sein, die es können.

neue Nutzeroberfläche für del.icio.us dank AJAX

Administrator — Mon, 27 Jun 2005 15:42:15 +0000

Bei diesem Besuch ist mir heute der del.icio.us direc.tor aufgefallen.
Warum diese Seite so beliebt ist, ist schnell klar. Eine neue leicht zu bedienende und intuitive Benutzeroberfläche (UI – User Interface)
die Johnvey Hwang da per AJAX zusammengebaut hat, überzeugt schnell.

Da mich auch immer interessiert, wie solche Sachen funktionieren, habe ich mich mal daran gemacht, und habe mir den Quelltext angeschaut.
Hier sind meine Ergebnisse:

Johnvey bietet ein Bookmarklet, welches die ganze Sache startet:

javascript:void((function() {
var element=document.createElement(‘script’);
element.setAttribute(‘src’, ‘http://johnvey.com/features/deliciousdirector/dboot.js’);
document.body.appendChild(element)})())

Im Prinzip ganz einfach, wenngleich ich selbst nie auf solche Ideen kommen könnte. Es wird ein Element "script"
mit dem Attribut "src" mit dem Wert "http://johnvey.com/features/deliciousdirector/dboot.js" erzeugt nud
dem body-element angehangen. Dies ergibt also quasi folgenden Code: