Praxistipp – jqTransform width bug

Wer jqTransform schon einmal benutzt hat wird sicherlich festgestellt haben, dass der Internet Explorer und der Firefox Browser die Textfelder in einer unterschiedlichen Breite darstellen.
Das ist zurückzuführen auf das size-Attribut, dass selbst wenn nicht im input Feld verankert im IE mitberücksichtigt wird.

Ein kleiner Workaround dafür ist, die Berechnung des Size-Attributs im js-Code zu entfernen. Selbstverständlich mit der Folge, dass dieses Attribut nicht mehr zu diesem Zweck eingesetzt werden kann. Was ich persönlich als nicht weiter schlimm erachte, da zur Best Practice des Webprogrammieres gehört, die Festlegung von Oberflächeneigenschaften über das CSS zu definieren.

Nun zum Workaround:

1
2
3
4
5

// Z. 107 in der jquery.transform.js
	if($input.attr('size')){
		inputSize = $input.attr('size')*10;
		$input.css('width',inputSize);
	}

Diesen Codeteil könnt ihr einfach löschen, da es zur falschen Berechnung der Breite für die Textfelder führt. Ich konnte keine ungewollten Seiteneffekte feststellen. Wenn ihr etwas findet, wäre ich dankbar für Kommentare.

jQuery – Accessible-RIA – Widgets für jedermann

Heute morgen bin ich auf was nettes gestoßen das ich hier kurz erwähnen möchte.
jQuery – Accessible-RIA ist eine Sammlung von mehreren einfach zu implementierenden Widgets, welche alle 100% WAI WCAG 2.0 und WAI AIRA konform sind.
Besonders für Frontend Entwickler ist das ganze interessant. Macht es eine Seite doch für jedermann vollständig zugänglich.

Das ganze basiert auf jQuery UI und beinhaltete folgende Widgets:

• Lightbox (Demo)
• Formular (Demo)
• Tabs (Demo)
• sortierbare Tabellen (Demo)

Alle Infos zum Projekt, sowie Demos, Doku usw findet man im Wiki von github.

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.

jQuery Form Plugin – Do some AJAX magic easily

Neulich bin ich über ein Plugin gestoßen, dass Entwicklern auf einfachstem Wege die Möglichkeit bietet ihre Formulare AJAX gestützt umzusetzen.

Mitentwickelt wurde es von John Resig, einem der Urväter von jQuery.

Es überzeugt durch seine Funktionsvielfalt, sowie seine einfache Umsetzung. Es genügt ein Standard HTML Formular zu schreiben und danach das Plugin mit den gewünschten Optionen aufzurufen.
Das könnte dann wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<head>
    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript" src="path/to/form.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function() {
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() {
                alert("Formular wurde gesendet!");
            });
        });
    </script>
</head>
<body>
<form id="myForm" action="comment.php" method="post">
    Name: <input type="text" name="name" />
    Kommentar: <textarea name="kommentar"></textarea>
    <input type="submit" value="Abschicken" />
</form>
</body>

Dieses Beispiel sendet die beiden Formularfelder Name und Kommentar als Ajax Request an das im form-tag angegebene Skript.
Dies ist nur ein einfaches Beispiel. Weiterhin gibt es noch Methoden zur Formularberarbeitung wie reset, manueller submit, Erstellung eines querystring, etc.

Das Plugin besitzt auch noch einige Optionen. Ein Auszug daraus:

• target
• url
• success
• …

Altgedienten Ajaxianer sollten diese Parameter bekannt sein. Benutzt werden sie dann so:

1
2
3
4
5
6
7
8
9
10
11

// Optionobjekt mit gesetzten Attributen
var options = {
    target:     '#divToUpdate',
    url:        'comment.php',
    success:    function() {
        alert('Erfolgreich abgeschickt!');
    }
};
 
// Options einfach der Mehthode ajaxForm als Parameter übergeben
$('#myForm').ajaxForm(options);

Einfacher lässt sich ein Ajaxformular kaum umsetzen. Also viel Spaß beim Testen. Zu finden ist das Ganze in englischer Doku und kleinen Beispielen bei Malsup.

Tipp! Den gleichen Selektor nicht mehrmals aufrufen

Und noch ein kleiner Tipp! Oftmals kommt es vor das man einem Element mehrere Methoden mitgeben muss.
Hier sollte man vermeiden den Selektor nicht zu oft zu verwenden.

Anstatt:

1
2
3

$('div.class').css ('color', '#000000');
$('div.class').text ('Hier steht Text');
$('div.class').addClass ('highlighted');

sollte man:

1
2
3
4

var $div = $('div.class');
$div.css ('color', '#000000');
$div.text ('Hier steht Text');
$div.addClass ('highlighted');

verwenden.

Alternativ kann man das ganze auch chainen.

1

$('div.class').css ('color', '#000000').text ('Hier steht ein Text').addClass ('highlighted');

Tipp! – Highlighten eins li´s innerhalb einer Liste mit jQuery

Anbei nur ein kleiner Tipp! wie man einfach ein li auf klick highlighten kann und dem aktiven li die Klasse wieder entzieht.

CSS:

1
2
3

        .active{
	      color: red;
        }

HTML:

1
2
3
4
5
6

<ul id="liste">
	<li>eins</li>
	<li>zwei</li>
	<li>drei</li>
	<li>vier</li>
</ul>

jQuery:

1
2
3
4
5

$(document).ready(function() {
		$('#liste li').click(function(){
			$(this).closest('li').addClass('active').siblings().removeClass('active');
		});
	});

Eine kleine Demo des ganzen

Formularfelder vorausfüllen und leeren mit jQuery Clearfield

Nur kurz möchte ich dieses kleine Plugin hier erwähnen.
Gerade bei Suchfeldern kennt man es das im Feld  “Suche:” steht und verschwindet sobald das Feld den Focus bekommt.

Das ganze kann man jetzt sehr elegant und einfach mit diesem kleinen jQuery Plugin lösen.

Datei einbinden

1

<input type="text" class="clearField" value="What's your name?" />

Funktion hinzufügen

1
2
3
4
5
6

$(document).ready(function() {
	$('.clearField').clearField({
		blurClass: 'myBlurredClass',
		activeClass: 'myActiveClass'
	});
});

und das input Field entsprechend einbinden.

1

<input type="text" class="clearField" value="What's your name?" />

Fertig!

Alle Dateien zum Downlad findet Ihr auf der offiziellen Plugin Seite.