MooTools MenuMatic – Firefox 4 zweizeilig Problem

Die Zeit der neuen Browser. Und auch wenn alles schön und neu ist, heute morgen hatte ich dann auch gleich das erste kleine Problem.

Firefox4 mit MenuMatic wollten nicht ganz so wie ich. In meiner Navigation wurd ein Punkt zweizeilig und somit die ganze Höhe meines Menüs falsch, was zur Folge hatte das unten ein Stück abgeschnitten wurde.

Da sich über CSS keine Lösung finden ließ habe ich die js-Datei (MenuMatic_0.68.3-source.js) wie folgt geändert:
Zeile 737 einfach um +2 erhöht.

?View Code JAVASCRIPT
1
this.width = this.childMenu.getFirst().getCoordinates().width+2;

Ich hoffe das hilft dem ein oder anderen weiter…

jQuery Mobile – Der Seitenaufbau

Bevor man damit beginnt seine ersten mobile Websites zu bauen, gibt es einige grundlegende Punkte die Struktur betreffend zu wissen.
Zunächst einmal arbeiten wir unter dem HTML5 Doctype. Was in mobilen Endgeräten glücklicherweise kein Problem ist, da diese HTML5 in sogut wie allen Fällen verstehen.

Der HTML Head mit den für jQuery Mobile notwendigen JS-Skripten, sieht nun wie folgt aus:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
	<head>
	<title>Meine mobile Website</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
	<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>

Für das Framework benötigen wir im HTML Teil nun ein spezielles Attribut mit der Bezeichnung “data-role”, das den allgemein Aufbau der Seite definiert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div data-role="page">
<body>
 
<div data-role="page">
 
	<div data-role="header">
		<h1>Meine mobile Website</h1>
	</div>
 
	<div data-role="content">
		<p>Hier der normale Seiteninhalt..</p>
	</div>
 
	<div data-role="footer">
		<p>Allgemeine Seiteninfo</p>
	</div>
</div>
 
</body>
</html>
</div>

Der notwendigen Attributausprägungen sind hierbei page, header, content und footer. Jedes einzelne dieser Divs ist frei mit normalen HTML Tags befüllbar.

Damit haben wir nun schon unsere erste statische Seite. Obwohl wir ein Javascript Framework benutzen, brauche wir bisher dafür noch kein Javascript. Alle notwendigen Schritte laufen im Hintergrund ab.

Im nächsten Teil widmen wir uns dann der Verlinkung mittels Ajax und dem Wechsel zwischen verschiedenen Seiten..

jQuery Mobile – Web-Apps mit jQuery

Endlich ist es soweit. jQuery Mobile 1.0 Alpha 2 ist released. Und meiner Meinung nach beginnt damit ein neuer Abschnitt in der Entwicklung mobiler Seiten, bzw. von Web-Apps auf touch-fähigen Smartphones.

jQuery Mobile 1.0 Alpha 2

War der erste Alpha release noch sehr buggy, merkt man dass seit dem rund 200 Tickets berarbeitet wurden und auch viele Wünsche der User aus dem Forum einzug gefunden haben. Das jQuery Mobile Team selbst sagt:
Overall the quality of jQuery Mobile has been greatly improved. A number of subsystems have been rewritten (both for clarity and for performance) and cross-browser compatibility has seen a marked increase in quality.

Die Performance im allgemeinen wurde verbessert, neue CSS-Klassen und statische Methoden hinzugefügt und vieles mehr. Den kompletten Überblick bekommt man in den release notes.

Nachdem schon javascript Plugins wie jqTouch, iUi, jo, SproutCore u.a einen ersten Ausblick auf die Entwicklung Mobiler-Apps gegeben haben und auch von Entwicklern gut angenommen wurden, so ist jetzt mit jQuery Mobile wohl eines der, wenn nicht das, mächtigste Framework zum entwickeln Mobiler-Anwendungen auf dem Markt.

Ich habe heute mal mit meinem iPhone die ersten Tests gemacht und muss sagen, mir gefiel sehr was ich gesehen habe. Gerade die Demos waren sehr vielversprechend.

Die Key-features im Überblick:

  • Basierend auf dem jQuery Core. Somit eine geringe Lernkurve, da die Syntax weitestgehend gleich bleibt.
  • Kompatibel mit allen großen Mobilen Plattformen. – iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo.
  • Leightweight. Mit gereade mal 12k im der komprimierten-Version.
  • HTML5 gestützte Konfiguration.
  • Automatische installation
  • Volle WAI-ARIA Unterstützung
  • Neue Events wie z.B. das unterstützen von Touch-Events
  • Neue Plugins wie z.B. für das Theming

Das Top-Features ist, dass wirklich alle großen Mobilen Plattformen out of the Box unterstützt werden.
Hier gibt es auch noch mal einen schönen Überblick welche Platformen genau unterstützt werden. Mobile Graded Browser Support.
Wir sind gespannt wie es hier weiter geht und werden das Thema jQuery Mobile als festen Bestandteil hier im Blog integrieren und in nächster Zeit auch eine kleine Tutorial-Serie dazu starten.

Links zu den wichtigsten jQuery Mobile Seiten:

Praxistipp: Suchfeld leeren on focus (jQuery)

Gestern hatte ich wieder diesen Fall….
Man hat´s schon x-mal gemacht, aber immer wenn man es wieder braucht findet man das code-schnippselchen nicht.

Ich wollte heute in einem Projekt einfach nur das Suchfeld, welches default als Wert “Suche” drin stehen hat, auf klick ins Feld leeren und, sollte der User nichts anderes eingegeben haben beim Verlassen das Feld wieder mit diesem Standardwert füllen.

Hier der Code:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
$('.search').focus(function() {
	value=$(this).val();
	$(this).attr("value","");
});
 
$('.search').blur(function() {
	if($(this).val()=="") {
		$(this).val(value);
	}
});

Ich hoffe das hilft dem ein oder anderen…

fadeToggle – die Neue in jQuery 1.4.4

Diese Woche ist jQuery in einem neuen Release erschienen. Neben einigen Bugfixes und kleinen Ändererungen gibt es auch die neue Funktion “fadeToogle”. Sie funktioniert vom Prinzip her genauso wie “toggleClass” und “slideToogle” und dient, wie die anderen, dazu möglichst einfach zwischen verschiedenen Zuständen zu wechseln. Wir wollen das an zwei Beispielen verdeutlichen.

Werfen wir vorher einen Blick auf die Signatur der neuen Methode:
.fadeToggle( [ duration ], [ easing ], [ callback ] )

Duration ist die Zeit in der das Fading ausgeführt wird
Easing ist die Art des Effektes, wobei es standardmäßig hier keine relevanten Änderungsoptionen gibt
Eine Callback Funktion um nach der Animation beliebigen Code auszuführen.

Der Javascript Code sieht nun wie folgt aus:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    // Variable um aktuellen Sichtbarkeitsstatus zu speichern
    var toogleState = "visible"
 
    $(document).ready(function() {
        //Beispiel 1
        $("button:first").click(function() {
          $("div#fadingBox").fadeToggle("slow", "linear");
        });
 
        //Beispiel 2
        $("button:last").click(function () {
          $("p:first").fadeToggle("fast", function () {
 
            if(toogleState == "visible"){
                $("button:last").text("zeigen");
                toogleState = "invisible";
            }
            else{
                $("button:last").text("verstecken");
                toogleState = "visible";
            }
 
          });
        });
 
    });

Das erste Beispiel ist ein Box die einfach aus- und wieder eingeblendet wird. Ohne, dass der aktuelle Anzeigestatus sichtbar oder abrufbar wäre.

Das zweite Beispiel zeigt einen einfachen Workaround, um mit dem aktuellen Anzeigemodus zu arbeiten. Also ist das Element gerade sichtbar oder nicht. Die hier vorgestellte Variante ist einfacherer Natur. Es wäre natürlich auch möglich, direkt den Sichtbarkeitsstatus des Objektes selbst abzufragen und entsprechend zu reagieren. Die vorgestellte Möglichkeit wurde wegen der besseren Nachvollziehbarkeit so gewählt. Allerdings wäre sie für größere Projekte wegen einer schlechteren Wartbarkeit weniger zu empfehlen.

Eine Demo dazu findet ihr hier.
Weder das CSS noch das JS sind ausgelagert, also einfach rechte Maustaste und Quelltext anzeigen lassen.

Typeface mit font-weight:bold

Als Webentwickler kennt man das Problem mit kommerziellen Schriftarten, die aus dem Corporate Design stammen, aber nicht als Webfont zur Verfügung stehen. Beliebt sind dafür immer verschiedenste Formen des Image-Replacements. Die Nachteile davon liegen auf der Hand:

  • Keine optimale Suchmaschinerkennung
  • Hoher Änderungs- und Verwaltungsaufwand
  • Text nicht kopierbar
  • Problem der Barrierefreiheit

Neben der Bilderlösung dürfte sIFR eine bekannte Methode sein. Hier wird der Text aus einem bestimmten HTML-Tag gelesen und durch einen Flashfilm mit eingebettem Font ersetzt. In der Theorie gut, in der Praxis schwierig wegen eines enorm hohen Konfigurationsaufwands.

Nach dem gleichen Prinzip funktioniert das js-Plugin Typeface. Nur ist es etwas praktischer in der Handhabung.
Der folgende Code bindet einen normalen Font und einen später beschriebenen Bold-Font ein:

?View Code JAVASCRIPT
1
2
3
<script src="typeface-0.14.js"><!--mce:0--></script>
<script src="mysrcFont.typeface.js"><!--mce:1--></script>
<script src="mysrcFontBold.typeface.js"><!--mce:2--></script>

Um dem Text die entsprechende Schriftart zuzuweißen, benutzt man einfach die CSS Anweisung font-family.

1
2
<div id="text" style="font-family: mySrc Font;">
Lorum ipsolum...</div>

Den Namen des im syle-Attribut verwendeten Fonts kann man in den jeweiligen js-Dateien nachlesen.
Das Ganze hat zwei Nachteile, wie sie auch schon auf der Website beschrieben werden. Performanceprobleme bei größeren Textmengen und Standard-CSS Hovereffekte funktionieren nicht mehr.
Damit der Font in eine Javascript Datei umgewandelt werden muss er in einem Truetype oder Opentype Format vorliegen. Nicht immer ist bei diesen Schriften auch die fette Variante integriert. Um das in den Griff zu bekommen, kann man mit einem Font Bearbeitungstool nur die Bold-Variante exportieren und diese ebenfalls umwandeln. Bindet man nun diese beide JS-Dateien ein und weist die Bold-Schrift einem einem HTML-Element zu, passiert abgesehen von einer Fehlerausgabe in der Firebug Konsole nichts.
Die Lösung dafür ist ganz einfach. Der Font-Converter auf der Typeface Website integriert auch Informationen über Schriftschnitte weshalb der CSS-Selektor diese Info auch benötigt:

1
2
3
4
5
6
7
8
#text{
  font-family: mySrc Font, Verdana, Arial;
}
 
#boldFont{
  font-family: mySrc Boldfont, Verdana, Arial;
  font-weight: bold;
}

Damit ist der Workaround für die Einbettung von normalen und bold Schriften perfekt.

Cufón – Eine Javascript alternative zu sIFR
sIFR 3 r436 – scroll-Problem im Firefox 3, ie6/7

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 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:

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

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

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