umgedrehte floats mit jQuery Masonry

masorny1Ich möchte euch noch kurz ein schönes weiteres Plugin zum Layouten mit an die Hand geben. jQuery Masonry.
Während float´s Elemente horizontal und dann vertikal anordnen, habt ihr mit Masnory die Möglichkeit das genau andersrum zu machen. Erst vertikal, dann horizontal.

Das Plugin kommt ohne weiter Einstellmöglichkeiten oder Optionen daher. Alles was man noch benötigt ist etwas CSS.

Hier ein einfaches Beispiel in welchem alle Elemente im container “wrap” neu ausgerichtet werden.

?View Code JAVASCRIPT
1
$('.wrap').masonry();

Eine Demo sowie weiter Infos und die Dateien zum Download findet Ihr auf der offiziellen Website.

Flip! – jQuery Plugin

flipbox

Ich möchte euch heute über den Tag verteilt kurz ein paar nette neue Plugins vorstellen.
Los geht´s mit Flip! einem jQuery Plugin welches euer Element in alle Richtungen drehen kann.

Das Plugin beitet verschiedene Optionen wie z.B. einstellen der Richtung, definieren der Start- und Endhintergrundfarbe bei der Animation, die Geschwindigkeit, aufruf von Funktionen am Start oder nach Abschluss der Animation usw.
Das Ganze läuft mit jQuery 1.3.1.

Eingebunden wird das ganze einfach so:

?View Code JAVASCRIPT
1
$("#flipBox").flip({ direction: 'tb', color: '#B34212', content:$("#myId") });

Eine Demo sowie alle Dateien zum Download findet ihr auf der offiziellen Website des Plugins.

jQuery noConflict Mode

Des öftern ist man gezwungen mehrere JS-Frameworks auf einer Website zu nutzen. Das geschieht wenn man eine Vielzahl von Plugins einbauen möchte und diese eben nicht für ein einziges Framework vorhanden sind. Natürlich mit dem Nachteil verbunden, dass bei jedem Aufruf einer Seite eine relativ große Menge an Daten mitgesendet werden muss, nämlich mindestens die verschiedenen Framework Core Dateien.

Die beiden Kerne einbinden bringt uns aber noch nicht ganz zum Ziel. jQuery bietet hierfür den noConflict-Mode an. Diese wird nach einbinden der Bibliothek aufgerufen und sorgt dafür, das jQuery unter einem anderen Namespace ansprechbar ist.

Ein Beispiel:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript" src="_js/mootools-release-1.1.2.js"></script>
<script type="text/javascript" src="_js/jquery.js"></script>
 
//domready-event von mootools 
window.addEvent('domready', function() {
    //jQuery Syntax zum Ansprechen eines Elementes
    var jq = $('#someid');
    alert(jq.attr('class')) ;
 
   //mootools
    var moot = $('moot');
    alert(moot.getProperty('class')) ;
 
});

Dieses Skript wirft bei installiertem Firebug nun ein Fehler. Javascript kann das $-Zeichen nicht referenzieren und findet in obigem Fall die Methode “attr” nicht. Nun kommt der noConflict-Mode ins Spiel.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript" src="_js/mootools-release-1.1.2.js"></script>
<script type="text/javascript" src="_js/jquery.js"></script>
<script>
     jQuery.noConflict();
 
//domready-event von mootools 
window.addEvent('domready', function() {
    //jQuery Syntax zum Ansprechen eines Elementes
    var jq = jQuery('#someid');
    alert(jq.attr('class')) ;
 
   //mootools
    var moot = $('moot');
    alert(moot.getProperty('class')) ;
 
});
 </script>

Will man nun über jQuery ein Element ansprechen ersetzt man das “$” durch “jQuery” und behält für MooTools den $-Syntax bei. Ein friedliche Koexistenz.
Auf diese Weise lässt sich jQuery mit sogut wie jedem anderen Framework benutzen. Leider gehört jQuery zu den wenigen Frameworks die einen solchen Modus besitzen. Möchte man bspw. Prototype in Verbindung mit MooTools einsetzen gibt es keine Option dieser Art.

jQuery Formulare validieren – Ein Überblick

Wie im vorigen Post angekündigt starten wir heute mit unserer Post-Reihe “Formulare mit jQuery – Die umfassende Serie“.

Heute wollen wir mit Teil 1 – “Übersicht über aktuelle Form-Validaton Scripts” beginnen.
Da es zahlreiche dieser Scripts gibt, und diese sich Teilweise nur minimal voneinander unterscheiden da sie meist auf dem bassistance-Plugin von Jörn Zaefferer basieren, werden wir versuchen euch hier nur die vorzustellen welche besonders im Bezug auf Funktionalität, Größe oder Einfachheit der Implementierung sind.



bassistance – jQuery plugin: Validation

Beim validation Plugin von bassistance kann man wohl vom offiziellen validation Plugin von jQuery sprechen. Dieses Plugin lässt nahezu keine Wünsche offen.
Das Plugin ist, für die vielzahl an Möglichkeiten die es bietet, mit nur 24KB in der minified-Version nicht sonderlich groß. Es ist ab jQuery 1.2.6+ verfügbar und kompatibel mit Version 1.3.2.

Es bietet alle nur erdenklichen Arten der Formular Überprüfung.

  • Validierung on the fly (beim Wechsel in das nächste Feld), validieren auf submit, validieren von Textfeldern, Textareas, radiobuttons und checkboxen.
  • Es besteht z.B. auch die Möglichkeit diese in Abhängigkeit voneinander zu prüfen. Bei einer Gruppe von checkboxen kann z.b. geprüft werden wieviele ausgewählt sein müssen usw.
  • Auch das prüfen von Selects und multiple-Selects ist ohne weiteres möglich.
  • Eingaben können auf Länge, Typ (E-Mail, Number, String…), Anzahl der gewählten Elemente usw. validiert werden.
  • Die Ausgabe der Error-Messages ist sehr flexibel gehalten. So können diese direkt am entsprechenden Formular-Element oder gesammelt, z.B. in einem div, ausgegeben werden. Ändert der User eine fehlerhafte Eingabe reagiert die Validierung und ändert die Error-Messages on the fly.
  • Mit dem Plugin können richtig ausgefüllte Formulare, auf submit, auch direkt per AJAX verarbeitet werden.

Das einbinden des Scripts ist auch denkbar einfach.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$().ready(function() {
	$("#FormularID").validate({
		rules: {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 2
			},
			password: {
				required: true,
				minlength: 5
			},
			confirm_password: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			}
	});
});

Nun müsst ihr nur noch euren Formular-Elementen die entsprechende ID geben.

Eine Vielzahl von Demos und die Dateien zum Download findet ihr auf der offiziellen Website.
ganzen Artikel lesen

Formulare mit jQuery – die umfassende Serie

Wie wichtig das Thema Fomulare und jQuery ist, fällt uns beim regelmäßigen überfliegen unserer Blog Statistiken immer wieder auf. Viele der Suchanfragen über Google beinhalten Keywords die mit jQuery und Formularen zu tun haben.
Auch die Seiten welche mitunter die meisten Zugriffe haben gehen in diese Richtung.
Wir wollen dem ganzen Rechnung tragen und starten heute eine langfristige und ausführliche Serie zum gesamten Thema “Formulare und jQuery”.
Die Serie wird aus mehreren Teilen bestehen und sich wie folgt aufgliedern:

  • Übersicht über aktuelle Form-Validaton Scripts.
  • Überblick über die wichtigsten Funktionen die jQuery für die Validierung bietet.
  • Tutorial “Eigenes Validation-Script mit jQuery erstellen”.
  • Übersicht über aktuelle jQuery-Plugins zum verarbeiten von Formulardaten per AJAX.
  • Tutorial “Eigenes jQuery-Plugin zum verarbeiten von Formulardaten per AJAX inkl. Dateiupload”.
  • Überblick über die wichtigsten Funktionen die jQuery zum modifizieren von Formularen bietet.
  • Übersicht zum Thema “customized Forms”. Schönere Formulare mit jQuery.
  • Übersicht zum Thema “weiterführende Formulartechniken”.  Autocomplete, In Place Editing, Date Picker, ToolTips, doppeltes versenden verhindern und ein paar weitere Kleinigkeiten.

Zum Abschluss der Serie werden wir euch noch unser neues Formular-Plugin vorstellen an dem wir momentan mit Hochdruck arbeiten. Soviel vorab.

Heute wollen wir gleich mit Teil 1 – “Übersicht über aktuelle Form-Validaton Scripts beginnen.

Ajax Datei-Upload mit jQuery

Eine geschickte und schnelle Methode um den Upload von Dateien in Formularen zu erledigen ist wie so oft Ajax. Ein nettes Plugin dafür gibt es auf http://valums.com/ajax-upload/, welches zudem auch Multiple Uploads unterstützt.
Das Plugin glänzt nicht nur durch seine einfache Handhabung, auch lässt sich damit das lästige Problem der Gestaltung von Uploadformularfeldern, also “input type=”file”..” in den Griff bekommen. Auf diese Felder greift das CSS oft nicht wie es sollte usw.

Auf was ihr allerdings achten solltet ist, dass die Dateien, die mit dem Plugin schon hochgeladen wurden, bevor der Submit abgesetzt, bzw. vor dem Abschicken des Formulars auf dem Server liegen, während die restlichen POST Daten eben erst auf Click eines Absenden Buttons an ein Skript weitergereicht werden. Kurz gesagt, wenn Upload mit Ajax und das Formular als Method Attribut GET/POST hat, muss man aufpassen. Das heißt es sollte überprüft werden ob die hochgeladenen Bilder auch tatsächlich genutzt werden und der User nicht nur einfach wild Dateien hochgeladen hat ohne Das Formular auszufüllen.

Screeshot der Demo:
ajax_upload

Kurz zu den Bestandteilen des Codes:

- Der HTML Teil

1
2
3
 
<!-- Anlegen eines einfachen Divs auf das später die Upload Funktion gelegt wird -->
<div id="upload_button">Upload</div>

- Der Javascript Teil (weitere js-Dateien werden nicht benötigt)

?View Code JAVASCRIPT
1
2
3
4
5
6
7
 
<script src="ajaxupload.3.1.js" type="text/javascript">
<script type="text/javascript">
    $(document).ready( function() {
         new AjaxUpload('upload_button', {action: 'upload.php'});
    });
</script>

Der Ajaxupload kann auch durch Callback-Funktionen und andere Parameter eingestellt werden. Der Code auf der englischen Website ist selbsterklärend. Fragen könnt ihr auch hier stellen.

- Nach abesenden der Daten an “upload.php” geht es an die serverseite Verarbeitung

1
2
3
4
5
6
7
8
9
10
11
 
$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
 
//move_uploaded_file ist die Standard PHP-Funktion um Dateien auf dem Server zu verarbeiten
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "success";
} else {
  // Als echo keinesfalls false benutzen. Führt zu Konflikten mit dem Ajax-Request
  echo "error";
}

Auf der Valums Website gibt es ebenfalls Beispiele für Ruby sowie Coldfusion.

Die Demo findet ihr hier

jQuery ifixpng – Plugin für Transparenz-Problem

jQuery ifixpng

Wer kennt das Problem nicht. Man will ein transparentes png einbinden und bekommt Probleme in den älteren Versionen des Internet Explorer.
Klar gibts dafür schon Lösungen wie den pngfix von TwinHelix etc.

Allerdings fand ich bisher keine so einfach und geschickt wie jQuery.ifixpng.
Das Plugin lässt sich allgemein auf alle Dateien eines Typs oder auch gezielt auf id´s angewendet werden.

Es gibt momenta noch zwei, drei Probleme die aber im Normalfall nicht ins Gewicht fallen.
Unter anderem müssen die Elemente auf die der Hack angewandt wird visible sein.
Background positionierung und repeating gehen leider auch nicht. Wird aber normal eh weniger ein Thema sein wenn man den Hack braucht.

Hier wie immer ein simples Beispiel:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
// apply to all png images
$('img[@src$=.png]').ifixpng();
 
// apply to all png images and to div#logo
$('img[@src$=.png], div#logo').ifixpng();
 
// apply to div#logo, undo fix, then apply the fix again
$('img[@src$=.png], div#logo').ifixpng().iunfixpng().ifixpng();
 
// apply to div#logo2, modify css property and add click event
$('div#logo2').ifixpng().css({cursor:'pointer'}).click(function(){ alert('ifixpng is cool!'); });;

Alle weiteren Infos, sowie das Plugin zum Download findet Ihr auf der offiziellen Homepage.

Lazy – jQuery Plugins on-demand laden

lazy - jQuery Plugins on demand laden

Die Tage schon bin ich über ein schönes kleines jQuery-Plugin names Lazy gestolpert.
Bei lazy handelt es sich um ein nur 530Byte großes Plugin das gerade bei großen Projekten einen gehörigen Vorteil, was das Laden von anderen jQuery-Plugins angeht, bringen kann.

Lazy tut nämlich nichts anderes, als Plugins nur dann zu initialisieren wenn auch irgendwo wirklich ein Aufruf für die Funktion erfolgt.
Sprich ihr könnt über lazy einbinden was ihr wollt, geladen wird es nur wenn es auch wirklich gebraucht wird.

Hier noch ein kleines Code-Beispiel:

?View Code JAVASCRIPT
1
2
3
4
5
6
$.lazy('jquery.elastic.js','elastic');
$.lazy('jquery.validation.js','validate');
$.lazy('jquery.ajaxdotnet.js','ajaxDotNet');
 
// And then you use you plugins as you always do
$('textarea').elastic();

Weiter Infos sowie eine Demo und die Files zum Download findet Ihr auf der offiziellen Seite:
http://www.unwrongest.com/projects/lazy/

Formulare ausrichten mit jQuery und CSS

Formulare lassen sich gut mit Tabellen oder Label layouten. Allerdings sind Tabellen zum Anzeigen von Daten gedacht und nicht um Oberflächelemente zu positionieren. Bei der CSS Variante mit Div’s und Label steht man vor dem Problem, dass sich die Länge des Formularfeld beschreibenden Textes ändern kann und ab einer bestimmten Breite zu einem Zeilenumbruch oder zu einer unterschiedlichen Ausrichtung der Formularfelder führen.
Diese kleine Schwierigkeit lässt sich mit jQuery elegant umgehen.

Zunächste einmal brauchen wir ein einfaches HTML-Grundgerüst:

1
2
3
4
5
6
7
8
<div class="input_div">
   <label for="name">Name:</label>
  <input type="text" id="einName" name="derName" />
</div>
<div class="input_div">
   ...
   ...
</div>

Das CSS ungefähr in dieser Form:

1
2
3
4
5
6
7
8
9
10
11
12
13
label, input[type="text"]{
    float:      left;
    display:  block;
}
 
label{
    margin-right: 5px;
}
 
.input_div{
    width:100%;
    overflow:auto;
}

Im Normalfall gibt man dem Label noch eine fixe “width” Eigenschaft mit. Aber damit die Texte in jedem Fall in das Label passen und immer den gleichen Abstand zum Formularfeld haben, benutzen wir jQuery um die notwendige Breite bestimmen zu lassen:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
  $(document).ready(function() {
      var max = 0;
      //prüfe die Breite jedes Labels und speichere die größte Zahl in der Variable max
      $("label").each(function(){
          if ($(this).width() > max)
              max = $(this).width();
       });
      //setze jedes Label-Tag auf die gleiche Breite
      $("label").width(max);
});

So, das wäre es dann schon gewesen und das Ergebnis sieht wie folgt aus:

Form

jQuery Address – Deep linking mit jQuery

Denen unter euch die auch mit Flash, Flex oder Air arbeiten dürfte swfaddress von asual durchaus ein Begriff sein. Ermöglicht swfaddress doch das deeplinken innerhalb von Flash-Anwendungen.
Meiner Meinung nach war swfaddress in den letzten Jahren eine der besten Zusatzentwicklungen im Bereich Flash und hat sich, nicht zu letzt durch die leichte Implementierung, schnell durchgesetzt.

Die Jungs von asual haben jetzt ein weiteres Deeplinking-Plugin entwickelt. Diesmal für jQuery.
Mit dem Plugin ist es Möglicht jetzt auch direkt den Status einer Applikation oder einen speziellen Bereich der Website zu verlinken.

Das Plugin ermöglicht unter anderem:

  • Bookmarken in die Favoriten oder einer Social-Website
  • Versenden von Links via E-Mail oder Messenger
  • Das auffinden von speziellem Inhalt mit den großen Suchmaschinen
  • Verarbeiten der Browser-History und des Refresh-Buttons

Eine vom Plugin erzeugte URL könnte so aussehen:

http://www.domain.de/#/section/?id=1&name=jQuery

Eine Möglichkeit ist nun z.B. das verlinken in Tabs. Mit dem Plugin könnt Ihr nun z.B. direkt gezielt Bereiche einer Tab-Komponente ansteuern.
Ein Beispiel dafür findet Ihr hier.

Die Seite von asual zum Plugin findet ihr unter: http://www.asual.com/jquery/address/
Dort findet Ihr das Plugin zum Download sowie die API und Beispiele.