Archiv nach Autor

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.

jqTransform bug im Firefox

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 – 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.

?View Code JAVASCRIPT
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.

?View Code JAVASCRIPT
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.

?View Code JAVASCRIPT
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.

?View Code JAVASCRIPT
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;

?View Code JAVASCRIPT
1
2
3
4
$('#idDesElements').click(function(){
    window.alert("Click handler");
    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

jQuery – Accessible-RIA – Widgets für jedermann

jquery-accessible-ria
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:

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

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:

?View Code JAVASCRIPT
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

jcryption

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.

?View Code JAVASCRIPT
1
$("#normal").jCryption();

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

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:

?View Code JAVASCRIPT
1
2
3
$('div.class').css ('color', '#000000');
$('div.class').text ('Hier steht Text');
$('div.class').addClass ('highlighted');

sollte man:

?View Code JAVASCRIPT
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.

?View Code JAVASCRIPT
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:

?View Code JAVASCRIPT
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

?View Code JAVASCRIPT
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.