What I know is what you get

Busy at work - new things coming up

Jérôme — Wed, 15 Oct 2008 06:52:33 +0000

I am currently quite busy with my projects - three of them, to be precise and that is the reason it is so quiet here at the moment. But - one of them wil enable me to introduce to you an amazing technology to provide server data pushes without the use of Flash, a Java applet or whatsoever fancy plugin for your browser.

Some keywords, just to tease you: Orbited, Morbid, JavaScript, PHP, greatness :).

I have found it quite difficult to get into the subject and I’d like to share my experiences with you in the next days.

Automatic Footnotes with MooTools

Jérôme — Fri, 15 Aug 2008 06:22:41 +0000

I have found a script to generate automatic website footnotes (with jQuery) that I liked so much that I did it the MooTools way and added some additional features.

The script pulls quotes from blockquote and q elements, parses the cite and title attribute and automagically generates footnotes that will be added to or after a specified element on your page.

In addition to that you can jump back and forth between the quote and the corresponding footnote.

Embed the class AutomaticFootnotes into the head of your web page.
Load and configure the class:
window.addEvent(’domready’, function() { var config = { ‘id’: ‘footnotes’, // the footnotes list will receive this ID ‘elSource’: ‘container’, // observe only block(quotes) in this div ‘elTarget’: ‘container’, ‘appendMode’: ‘bottom’ // Insert the list at the ‘bottom’, ‘top’ or ‘after’ elTarget } this.AutomaticFootnotes = new AutomaticFootnotes(config); this.AutomaticFootnotes.enable(); }); 
- id (optional, defaults to ‘footnotes’): The footnotes list will receive this ID
- elSource (optional, defaults to document.body): The DOM element the quotes will be pulled from
- elTarget (optional, defaults to document.body): The DOM element the footnotes will be added to
- appendMode (optional, defaults to ‘bottom’): ‘top’, ‘bottom’, ‘after’

You’re finished :). Look at the example.

As always, feedback is highly appreciated.

Seiten-Inhalte inline bearbeiten

Jérôme — Sun, 29 Jun 2008 19:50:56 +0000

David Walsh hat mit Hilfe der MooTools die Möglichkeit geschaffen, Elemente einer Web-Seite direkt zu bearbeiten und zu speichern.

Ich finde die Idee sehr schön, die Umsetzung jedoch nicht ganz nach meinem Geschmack, darum habe ich eine konfigurierbare MooTools Klasse entwickelt, die wie folgt eingesetzt wird.

Die Klasse EditableContent Im -Bereich der HTML-Seite einbinden
Im HTML die bearbeitbaren Elemente mit IDs versehen:
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet…¦ Lorem ipsum dolor sit amet…¦
Die Klasse konfigurieren und initialisieren:
 window.addEvent(’domready’, function() { var config = { defaultTargetUrl: ’save.php’, defaultEditMode: ‘input’ } this.EditableContent = new EditableContent(config); this.EditableContent.observeElements([ {id: 'p1', dbId: 1, editMode: 'textarea'}, {id: 'p2', dbId: 2, targetUrl: 'save2.php'}, {id: 'p3', dbId: 3, targetUrl: 'save3.php'} ]); }); 
- id: HTML-ID des bearbeitbaren Elements
- dbId: ID des Datensatzes in der Datenbank, der beim Speichern geändert werden soll
- targetUrl: URL des Scripts, das den geänderten Inhalt verarbeiten wird
- editMode: (’input’, ‘textarea’) Darstellung des Bearbeiten-Felds

save.php

echo json_encode(array( ’success’ => true ));

save2.php

echo json_encode(array( ’success’ => false, ‘error’ => ‘Content could not be saved (whatever error)’ ));

Fertig :). Eine Demonstration könnt ihr euch hier ansehen.

Feedback und Verbesserungsvorschläge sind willkommen!

Pimp My User Form - Teil 1: Passwort-Felder

Jérôme — Sat, 21 Jun 2008 01:19:19 +0000

Fast jede Web-Anwendung bietet den Usern die Möglichkeit, die eigenen Daten auf einer Profilseite zu bearbeiten. Mit JavaScript und CSS kann man diesen Vorgang angenehmer gestalten, indem man das Eingabeformular durch Stil und Swoosh-Effekte aufhübscht.

Dabei sollte aber auch beachtet werden, dass JavaScript und CSS nicht immer aktiviert sind - das Formular sollte also auch funktionieren, wenn beides ausgeschaltet ist.

In dieser Tutorial-Reihe werden wir Schritt für Schritt ein User-Formular mithilfe der MooTools veredeln. Der sich daraus ergebende Code sollte möglichst wiederverwendbar sein. Den Anfang machen wir mit den Passwort-Feldern.

Passwörter sind für User sehr wichtig: sie schützen die eigenen Daten vor unbefugtem Zugriff. Bei der Bearbeitung der Daten wird das Passwort jedoch in den meisten Fällen nicht geändert - es hat also keinen Sinn, die entsprechenden Felder jedes Mal anzuzeigen. Stattdessen wollen wir das Formular so einrichten, dass die Felder erst auf Anfrage angezeigt werden; so wird das Formular schlanker und der User muss sich keine Gedanken darüber machen, ob er die Felder jetzt ausfüllen muss oder nicht.

Das fertige Ergebnis findet sich hier.

Wir werden mit dem folgenden Formular arbeiten:

<form id="f_user" action="" method="post"> <div class="row"> <label for="username">Username:</label> <input type="text" id="username" name="username" /> </div> <div class="row"> <label for="email">E-Mail:</label> <input type="text" id="email" name="email" /> </div> <div class="password-container"> <div class="row"> <label for="password">Password:</label> <input type="password" id="password" name="password" /> </div> <div class="row"> <label for="password_repeat">Repeat Password:</label> <input type="password" id="password_repeat" name="password_repeat" /> </div> </div> <div class="row"> <label> </label> <input type="submit" id="submit" name="submit" value="Save Changes" /> </div> </form>

Damit wir später per JavaScript auf die zu versteckenden Elemente zugreifen können, schließen wir sie in ein Container-Element ein (”password-container”). Damit sind die Vorbereitungen auf HTML-Seite bereits vollendet. Auch mit ausgeschaltetem JavaScript kann der User das Formular ohne Probleme verwenden.

Das dazugehörige CSS sieht folgendermaßen aus:

*, html * { margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; } body { margin: 2em auto; width: 50em; } div.row { margin-bottom: 1em; clear: both; } label { width: 12em; display: block; float: left; text-align: right; margin-right: 1em; white-space: nowrap; font-weight: bold; }

Für die Verarbeitung der Passwort-Felder ergibt sich dieser Workflow:

Direkt nach dem Laden der Seite:
1. Ausblenden der Passwort-Felder bzw. des Passwort-Containers
2. Einblenden eines Links “Passwort ändern”
Beim Klick auf den “Passwort ändern”-Link:
1. Einblenden des Passwort-Containers
2. Ausblenden des “Passwort ändern”-Links

Um die Wiederverwendbarkeit dieses Features zu gewährleisten, setzen wir die Funktion in einer konfigurierbaren Klasse um. Beim Instanziieren eines neuen Objekts wird ein Konfigurations-Objekt übergeben, das alle benötigten Informationen enthält, um dieses oder andere Formulare um die Möglichkeit bereichert, einen Bereich beim Aufruf der Seite auszublenden und ihn per Klick auf einen Link wieder einzublenden

In diesem Fall ist dies unser Konfigurationsobjekt:

var config = { frm: ‘f_user’, passwordContainer: ‘.password-container’, divChangePasswordClass: ‘row’, showPasswordLabel: ‘Change password’ };

frm: ID des Formulars, das gepimpt werden soll
passwordContainer: CSS-Klasse des Passwort-Containers
divChangePasswordClass: CSS-Klasse, die dem DIV-Element zugewiesen werden soll, in dem sich der “Passwort ändern”-Link befindet. In diesem speziellen Fall ist das “row”, aber in anderen Formularen werden sicherlich andere Klassen-Namen benötigt, die nicht fest in den Code der JavaScript-Klasse geschrieben werden sollten.
showPasswordLabel: Text, der als Link dargestellt werden soll

Und hier ist endlich die Klasse, die es mit dem Konfigurationsobjekt aufnehmen wird:

Zum Schluss führen wir noch alles zusammen, denn im Moment stehen die einzelnen Komponenten noch einzeln da und bewirken gar nichts. In den -Bereich der HTML-Datei kommen nun die Aufrufe, um die Klasse nach dem Seitenaufruf auf das Formular anzuwenden:

Und so sieht das fertige Ergebnis aus.

Über Verbesserungsvorschläge und sonstige Rückmeldungen freue ich mich natürlich - die Kommentare stehen euch offen!