jMediaelement – jQuery HTML5 Audio-Video Kit

Nach langer Zeit hab ich heute mal wieder ne Kleinigkeit für euch.
Meiner Meinung nach der momentan wohl beste HTML-5 Mediaplayer.
jMediaelement spielt sowohl Audio, als auch Video-Dateien ab und hat für alle Browser die kein HTML-5 unterstützen nen Fallback auf Flash und VLC.

Der Player ist über CSS komplett stylebar und unterstützt alle großen Dateiformate wie z.B.: ogg (theora/vorbis), mp4/mov (h.264), WebM (VP8/vorbis), flv, Youtube videos und mehr.

Die implementierung des Players ist kinderleicht und gut dokumentiert.

Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2

Wer von euch jqTransform nutzt wird evtl. nach dem letzten Firefox Update festegestellt haben das der Text in den Inputs nicht mehr sauber mittig sitzt.
Gilt für Firefox ab 3.5.2.

Das ganze liegt an der neuen Render Engine die Firefox spendiert bekommen hat.
Um das Problem in den Griff zu bekommen, ohne sideeffects für andere Browser zu bekommen macht Ihr einfach folgendes.

Eure jqtransform.css auf, in Zeile 90 (.jqTransformInputInner div input {) änder Ihr die height jetzt von 31px auf auto.

Das war´s schon….

jQuery load function – Ajax the simple way (Part 1)

Mit der load Funktion lassen sich einfach HTML-Elemente einer Datei in die Aktuelle einfügen. Diese Funktion ist in erster Linie für den “import” von HTML-Code gedacht und entspricht damit nicht dem typischen Ajax-Request bei dem bspw. ein PHP Skript angesprochen wird, das Daten aus der Datenbank liest und/oder andere serverseitige Prozesse anstösst.

Soviel erstmal zur Theorie, der Funktionsaufruf sieht wie folgt aus:

1

 $('#someElement').load('/someFile #mydiv');

So kurz so einfach. In das Element mit der id “someElement” wird der gesamte Inhalt eines divs mit der id “mydiv” geladen. Das geniale dabei ist, dass sich “mydiv” überhaupt nicht im aktuellen Dokument befindet, sondern in der Datei “someFile”.
Als zweiten Parameter kann man der load Funktion auch noch Daten als sogenanntes Key/Value Paar übergeben.

1

 $('#someElement').load('someFile.php',{'param': 'someValue'});

Das enspricht allerdings jetzt schon eher dem normalen Ajax-Request. Das oder die Key/Value Paare werden dem php-Skript als post-Paramter übergeben. Natürlich verliert man damit den Vorteil des vorigen Beispiels sich einfach DOM-Elemente aus einem anderen HTML-Skript zu holen. Aber falls man das Ergebnis eines Request einfach direkt ohne weitere Verarbeitung in ein Element einfügen möchte, ist das eine sehr einfache und komfortable Variante.

Im nächsten Teil wird es dann um die anderen fortgeschritten jQuery Ajax Varianten wie get, getJSON, etc. gehen.

jQuery – Click Handler Elementen zuordnen und entfernen

Click handler sind wohl eine der meistgenutzen Funktionen wenn man mit jQuery arbeitet. Selten kommt man ohne sie aus.
Ich will euch heute mal kurz ein paar Feinheiten hierzu vorstellen.

Einen Click handler einem Element hinzufügen
Einem Element einen Click handler mitzugeben ist wohl mit das einfachste.

1
2
3

$('#idDesElements').click(function(){
    window.alert("Click handler ausgelöst!");
});

Mehrer Click handler einem Element hinzufügen
Einem Element kann übrigens mehr als nur ein Click handler zugewiesen werden.
Wird das Element geklickt, werden alle handler der Reihe nach ausgeführt.

1
2
3
4
5
6

$('#idDesElements').click(function(){
    window.alert("Click handler 1!");
});
$('#idDesElements').click(function(){
    window.alert("Click handler 2");
});

Click Handler entfernen
Um Click Handler wieder zu entfernen reicht ein einfaches unbind.

1

$('#idDesElements').unbind('click');

Click Handler hinzufügen und gleichzeitig entfernen
Da wir mit jQuery ja die wunderschöne Methode des Chainings zur verfügung haben, können wir einem einem Element alle Ihm bisher zugeordneten Click Handler entziehen und gleichzeitig einen neuen hinzufügen.

1
2
3

$('#idDesElements').unbind('click').click(function(){
    window.alert("neuer Click handler ausgelöst!");
});

Click Handler und Anker
Wenn man einen Click Handler an einen Linkanker aufruft, aber nicht will das der Browser dem Link folgt, nachdem der Handler aufgerufen wird muss zusätzlich einfach ein return false;

1
2
3
4

$('#idDesElements').click(function(){
    window.alert("Click handler");
    return false;
});

jQuery HowTo: Traversing

Travesieren gehört zum grundlegenden Handwerkszeug, wenn man fortgeschrittene Animationen mittels jQuery durchführen möchte. Hier ein kleine Anleitung zum Auffinden bestimmter Elemente.

Was passiert hier? Basis ist diese HTML Struktur:

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

<div id="someParent" style="border: 1px dotted #ccc">Parent
<div>
 Child1
</div>
<div class="move">
 Child2
</div>
<div>
 Child3
</div>
<div class="move not">
 Child4
</div>
</div>
 
<div id="someWrapper">
<a  id="testone" href="#">Move all</a>
<a id="testtwo" href="#">Move filtered</a>
</div>

Folgender Javascript-Code führt die Animation aus. Ausgehend von dem Link wird mit den Methoden parent das div “someWrapper” selektiert, prev wählt das vorige Element mit der id “someParent” und schlussendlich werden mit children alle Elemente innerhalb von “someParent” selektiert.
Die id’s im Beispiel dienen nur der Veranschaulichung. Die zu animierenden Elemente werden ausschließlich über die Struktur des DOM gefunden.

jQuery Code für “Move all”:

1
2
3
4

jQuery("#testone").click(function () {
    jQuery(this).parent().prev().children().animate({'paddingLeft':'20px'},200);
     return false;
});

Nun zur fortgeschrittenen Variante. Basis dafür sind die jQuery Funktion, filter und not.
jQuery Code für “Move filtered”:

1
2
3
4

jQuery("#testtwo").click(function () {
   jQuery(this).parent().prev().children().filter(".move").not(".not").animate({'paddingLeft':'20px'},200);
    return false;
});

jQuery Präsentationen für ein besseres Verständnis

Immer wieder stolper ich über interessante Präsentationen zum Thema jQuery im Netz.
Heute möchte ich euch ein paar meiner Favoriten vorstellen.

ganzen Artikel lesen

Praxistipp: jqTransform Button width einstellen

So nett und schön das jqTransform Plugin auch ist, macht es i.A. doch ein paar kleine Probleme. Neben der unterschiedlichen Interpretation der Breite von Textfeldern in FF und IE, lässt sich auch die Breite der Standardbuttons nicht aus dem eigenen CSS einstellen.

Wer dies tun möchte und die entsprechende Einstellung nicht finden kann, dem sei hier eine kleine Hilfe geboten. Dazu müsst ihr die jqtransform.css öffnen und in Z.36 dem Selektor “button.jqTransformButton span span” die neue Eigenschaft width zuweisen.
Das kann dann beispielsweise wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13

button.jqTransformButton span span {
	background: transparent url(img/btn_left.gif) no-repeat top left;
	color: #333;
	padding: 10px 4px 0px 8px;
	font-weight: normal;
	font-size: 12px;
	line-height: 13px;
	display: block;
	text-decoration: none;
	height: 33px;
	width:auto;
	min-width: 100px;
}

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.