Praxistipp – position absolute – parent height anpassen mit MooTools

Gestern bin ich auf ein kleines Problem mit einem absolut positionierten Div gestoßen.
Ich musste ein Div absolut positionieren doch sein parent Container sollte die Höhe entsprechend anpassen.
Da man ja mit absolute das Div aus dem Dokumentenfluß reißt geht das mit herkömmlichem CSS leider nicht.

Da für die Seite MooTools im Einsatz ist hab ich das ganze mit folgenden 2 Zeilen code gelöst:

1
2

var height = new Number($$('#content').getStyle('height').map(function(it){ return it.toInt();}));
$$('#container').setStyle('height', height + 420);

wobei +420 die Höhe des oberen Bereichs (Header, Navi, Newsblock) darstellt.
Liest man mit MooTools getStyle(‘height’) die Höhe des Containers aus so bekommt man z.b. 800px raus, daher wird die Funktion toInt() benötigt welche aus diesem String die Number 800 macht.

jCryption – HTML-Form Encryption Plugin

Wer von euch, gerade im kommerziellen Bereich, sich mit der Sicherheit von Formularen auseinandersetzt wird das kennen.
Nicht jedes Webpaket des Providers hat SSL und wenn ja, so ist es nicht immer ganz einfach einzurichten.

Hier setzt jCryption an, welches als kleines einfach zu installierendes Plugin eine gewisse Grundsicherheit bei der Übermittlung von Formulardaten schaffen will.
jCryption ist sicher kein Ersatz für SSL aber gerade bei nicht 100% Sicherheitsrelevanten Dingen eine praktische Lösung.

jCryption verschlüsselt Daten Clientseitig und entschlüsselt diese anschließen auf dem Server (PHP).

Um das ganze zum laufen zu bringen müsst Ihr nichts weiter tun als die .js downloaden und einbinden und anschließend jCryption auf euer Formular aufzurufen.

1

$("#normal").jCryption();

Für weiter Infos, Beispiele, Doku usw besucht doch die offizielle Website.

Praxistip – jqTransform und display:none

Wenn jemand schon einmal versucht hat ein, mit jqTransform umgewandeltes Formularfeld, in einem auf display:none gesetzten HTML-Element anzuzeigen, dürfte er auf Probleme gestossen sein.
Das lässt sich mit einem kleinen Workaround, ohne in das Original js ändern zu müssen, leicht beheben.

Zuerst die display Eigenschaft wieder sichtbar setzen

1
2
3
4
5
6

<form action="some.php" id="myForm" method="post">
  <div style="display:block" id="status">
     <input type="text" value="content" />
  </div>
</form>
</div>

Wäre die CSS-Eigenschaft display auf none gesetzt, würde das eingebaute jqTransform zur fehlenhaften Anzeige führen. Um dieses Element jetzt trotzdem nicht anzuzeigen kann man einfach folgendes Codestück im “document ready” Event von jQuery einbauen

1
2
3
4
5
6

<script type="text/javascript">
jQuery(document).ready(function($) {
     //some code...
 
     jQuery('#status').hide('fast');
 });

Das Prinzip lässt sich mit entsprechenden jQuery Selektoren natürlich auch auf mehrere Elemente übertragen.

IxEdit – jQuery the easy way

Mit IxEdit ist es möglich JQuery Funktionen ohne JS-Programmierung direkt on-the-Fly im Browser den gewünschten HTML Elementen zuzuweißen. Statt vieler weiterer Worte das Demo Video:

Wenn ihr es ausprobieren wollt, so gehts:

1. Als erstes die notwendigen IxEdit Dateien von IxEdit herunterladen

2. Das das Google Gears Firefox Addon Google Gears Portable installieren und Browser neu starten

3. Im entpackten IxEdit Ordner die index.html aufrufen

Nun könnt ihr den bestehenden HTML Elementen nach belieben jQuery Events zuweißen. Das Tool ist ideal zum Experimentieren mit verschiedenen Effekten und auch allgemein um sich einen besseren Überblick über die Möglichkeiten von JQuery zu verschaffen.

Nachdem alle gewünschten Effekte integriert sind, wird mit der Deploy-Funktion der entsprechende jQuery Code angezeigt, der dann in das Quelldokument kopiert werden kann.

Easy oder!?

Praxistip: Output Element des jQuery Validate Plugin ändern

Das allseits bekannte jQuery Plugin um Formularfelder zu validieren funktioniert im Standardszenarion sogut wie problemlos.

Schwieriger wird es schon wenn mehrere Plugins auf ein Formular angewendet werden, bei denen die Plugins eigene DOM-Elemente hinzufügen. Beispielsweise jqTransform

Glücklicherweise bietet das validate Plugin dafür eine wunderbare Funktion, nämlich errorPlacement.
Die Funktion sieht so aus:

1
2
3

 errorPlacement: function(error, element) {
     error.appendTo( element.TRAVERSINGFUNKTION );
   },

Nehmen wir ein Formular:

1
2
3
4
5
6
7

<form action="somescript.php" id="form" method="get">
   <input type="text" name="user">
   <label><label>
   <input type="text" name="pw">
   <label><label>
</form>
 <div id="error"></div>

Per Default wird vom validate Plugin ein Label-Tag hinter jedes input-Feld eingefügt. Will man nun den error an einer anderen Stelle zeigen kann man die Funktion folgendermaßen umschreiben:

1
2
3
4
5

$("#form").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.next() );
   }
});

Die Fehlermeldungen würde nun ausgehend vom input (element) in das nächste DOM Element, in unserem Fall das label-Tag, geschrieben werden.
Natürlich haben wir mit diesem Beispiel nur wieder das Ausgangsverhalten des Plugins erreicht. Dieses Prinzip lässt leicht auf komplexere Anwendungsfälle übertragen. Wie beispielsweise bei erwähntem jqTransform, bei dem um das input-Feld mehrere Divs gelegt werden. Die Fehlermeldung des Validate Plugins wird dann unterhalb (auf z-Ebene) der Felder angezeigt. Durch travesieren durch den DOM-Baum können die Fehlermeldungen beliebig positioniert werden.