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.
(more…)

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

(more…)

endlich eine live suche auch hier

Administrator — Wed, 15 Jun 2005 21:14:14 +0000

zwar kein plugin, aber trotzdem sehr nett: livesearch für wordpress. Die Idee dahinter ist recht einfach, während man im Suchfeld einen Begriff eintippt, wird bereits die Datenbank durchsucht und einige Vorschläge präsentiert. Einfach mal ausprobieren. Achja, die Anleitung zum Einbau gibt es hier: LiveSearch for WordPress 1.5.1.2

Die wichtigsten Bookmarks für Webdesigner und Webentwickler

Administrator — Mon, 30 May 2005 10:48:18 +0000

Was kann man da noch mehr zu sagen? Wichtiger Link! Die wichtigsten Bookmarks für Webdesigner und Webentwickler

Über den Einsatz von Javascript

Administrator — Thu, 19 May 2005 14:09:05 +0000

(more…)