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 – 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;
});

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.

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.

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

Schöne Schriften – FontEffect Plugin für jQuery

Wer kennt das nicht, bettet man eine Schrift nicht als Bild ein hat man mit CSS allein so gut wie keine Möglichkeiten grafische Effekte auf die Schrift anzuwenden.
Gerade bei Headlines kann dies aber doch ab und an ganz schön sein.
Dem ganzen kann jetzt Abhilfe geschaffen werden mit diesem schönen jQuery Plugin habt ihr nun die Möglichkeit Outlines, Schatten, Verläufe und Spiegelungen an eurem Text zu verankern.
Das Plugin ist nur 7kb groß und kommt gänzlich ohne Bilder aus, so wie es z.B. manche PHP-Funktionen tun wenn sie mit Text arbeiten.

Das Plugin ist denkbar einfach zu nutzen. Einfach die Files downloaden und einbinden.

1
2

<script src="jquery-1.3.2.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery-FontEffect-1.0.0.min.js" type="text/javascript"><!--mce:1--></script>

und anschließend aufrufen

1
2

$('#id1').FontEffect({ outline:true, shadow:true })
$('#id2').FontEffect({ gradient:true, mirror:true, mirrorColor:"#298d79" })

Das Plugin kommt mit über 20 versch. Einstellmöglichkeiten für Farbe, Position, Transparenz usw… daher.
Eine vollständige Liste der Optionen, jede Menge Demos, einen Konfigurator sowie alle Dateien zum Download findet Ihr auf der Plugin Homepage.
Auf der Seite werden auch Mögliche Fragen bzgl. User resizing, Fonts, Box model, Divs usw angesprochen.

MouseEvents mit jQuery auf beliebigem Element erfassen

Vor ein paar Tagen musste ich im Zuge eines Projektes MouseEvents auf beliebigen DOM-Elementen abfangen und auswerten können. Mit jQuery und event.type kein Problem.

1
2
3
4
5
6
7
8

 $(document).ready(function() {
       $('#id').bind('mousedown mouseenter mouseleave click dblclick ',
                    functionForMore);
 
        function functionForMore(e) {
            $('p').text('Mausaktion: ' + e.type);
        }
    });

Einfach die gewünschten Events mittels bind dem oder den Elementen (ID oder Klasse), oder man baut das ganze aus und automatisiert für alle Elemente auf der Seite, andocken und im anschluss die weiterführende Funktion auslösen.