Thema ‘jQuery’

Hoch- oder Querformat in WebApps verbieten

In einer perfekten Welt würde sich jedes Interface an den verfügbaren Platz perfekt anpassen. Es würde auch niemand mit $.browser rausfinden welcher Browser benutzt wird, sondern mit Feature Detection die benötigte Funktion überprüfen. jQuery wird uns da in eine Richtung zwingen und den Support für die Funktion in jQuery 1.9 entfernen. Aber es gibt ja Plugins.

Und es gibt Entscheidungen die den geneigten Webentwickler zwingen seine WebApp nur für den Landscape Modus oder den Portrait Modus freizugeben. Zum Beispiel wegen knapper Zeitpläne oder unbedachten Designern, egal! Es gibt eine Lösung.

Das Problem

Ein Interface für eine neue Webapplikation soll nur im Querformat (Landscape Modus) benutzt werden. Im Gegensatz zu nativen Applikationen steht mit Javascript keine Möglichkeit zur Verfügung die geänderte Darstellung zu verhindern. Aber es gibt die globale Eigenschaft window.orientation mit der abgefragt werden kann wie das mobile Gerät gehalten wird.

Das Event

Die Eigenschaft window.orientation steht nur in Umgebungen zur Verfügung die eine unterschiedliche Darstellung ermöglichen (also iPad, iPhone usw.). Wenn sich der Wert ändert, der Benutzer das Gerät dreht, wird das Event orientationchange gefeuert. Damit haben wir alle Informationen für den ersten Ansatz:

$('body').bind('orientationchange', function(e) {
    alert("Ui, ich wurde gedreht!");
});

Mit diesem Konstrukt wird mit Hilfe von jQuery ein Eventhandler an das Event orientationchange gebunden, welcher bei jeder Änderung eine Alert Box anzeigt. Einfach mal probieren.

Die Lösung

Mit diesem Wissen ist die letztendliche Lösung kein Problem mehr. Wenn das Gerät in einer Lage gehalten wird, die nicht unterstützt wird, wird das Interface gesperrt.

jQuery(function($) {
    $('body').bind('orientationchange', function(e) {
        check_orientation();
    });
    check_orientation();
});

Ist das DOM bereit jQuery(function($) { /* bereit */ }), wird der Event gebunden und an die Funktion check_orientation() weitergeleitet. Damit auch beim ersten Aufruf der Seite (hier ändert sich nichts) die Ansicht geprüft wird, wird anschließend die Funktion einmal aufgerufen.

Die Funktion check_orientation() prüft also ob sie arbeiten muss, falls ja ob das Gerät "falsch" gehalten wird und ggf. gesperrt wird.

var check_orientation = function() {
    if(typeof window.orientation == 'undefined') {
        //not a mobile 
        return true;
    }
    if(Math.abs(window.orientation) != 90) {
        //portrait mode
        $('#orr').fadeIn().bind('touchstart', function(e) {
            e.preventDefault();
        });
        return false;
    }
    else {
        //landscape mode
        $('#orr').fadeOut();
        return true;
    }
};

Was passiert hier?

  1. Wenn die Eigenschaft window.orientation nicht existiert, braucht die Funktion nicht zu arbeiten.
  2. Mit Math.abs(window.orientation) wird 0 = Landscape Mode oder 90 = Portrait Mode zurück gegeben.
  3. Wurde der Portrait Modus erkannt, wird der Container div#orr eingeblendet und das Event touchstart verhindert. Damit ist ein Zoomen oder Scrollen nicht mehr möglich.
  4. Andernfalls im Querformat ist alles in Ordnung und der div#orr wird nicht mehr benötigt.

Sehr schön! Jetzt braucht man noch ein Container im HTML:

<div id="orr">Bitte drehen Sie Ihr Gerät!</div>

Und ein paar Zeilen CSS:

#orr {  
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:rgba(0,0,0,0.75);
    z-index:1999;
}

Mit der Hintergrundfarbe rgba(0,0,0,0.75) wird ein halbtransparenter Hintergrund dargestellt, der über dem kompletten Interface liegt.

Fazit

Als verantwortungsvoller Entwickler plant man sein Projekte so, dass sie unabhängig von Auflösung und Verhältnis funktionieren. Zur Not bedient man sich diesen Tricks und verschiebt die Lösung in die 2.0 Version.

Viel Spaß!

Schönes Javascript mit Callbacks

Callbacks sind jedem jQuery Anweder bekannt. Von onClick bis zu onResize bindet der Webentwickler jede Menge Logik an festgelegte Events. Meiner Meinung nach eine angenehme Art zu programmieren und gut nachvollziehbar, da der Code gut lesbar bleibt, sofern man nicht übertreibt.

Wenn man selbst Applikationen programmiert die auf Javascript basieren und später noch diverse Erweiterungen ermöglichen sollen, dann macht es durchaus Sinn eigene Callbacks anzubieten. Sei es in einer jQuery Extension oder einer eigenen Applikation.

Zum Eintrag Schönes Javascript mit Callbacks →

jQuery Deferred verstehen und bessere Scripte schreiben

jQuery 1.5 ist schon eine Weile draußen und hat ein neues tolles Konzept mitgebracht das ich unbedingt vorstellen möchte, denn damit schreibt man bessere Scripte, die übersichtlicher sind und zuverlässiger funktionieren. Es heißt: Deferred und ist eigentlich sehr leicht zu verstehen.

Mit jQuery.Deferred lassen sich Objekte erzeugen, die beim erreichen eins Zustandes bescheid geben, damit andere Objekte darauf reagieren können. Klingt verworren ist aber ganz einfach, zum Beispiel sollen die Bilder angezeigt werden wenn sie fertig geladen sind.

Zum Eintrag jQuery Deferred verstehen und bessere Scripte schreiben →

Die eine Zeile zum jQuery Tab

jQuery ist ein großartiges Javascript Framework. Mit einer einzigen Zeile kann man ein komplettes Tab Widget bauen.

In meinem aktuellen Projekt kann der Benutzer unter einer großen Auswahl Elementen wählen. Jedes Element gehört in eine Kategorie. Also wäre es doch nett oben eine Kategorie anzuklicken und anschließend nur die Einträge dieser Kategorie zu sehen.

Nichts leichter als das! Es gibt natürlich großartige und weniger gute Plugins zu dem Thema, aber es ist in einer Zeile selbst geschrieben. Macht Spaß und verdeutlicht die Verkettung in jQuery.

Zum Eintrag Die eine Zeile zum jQuery Tab →

Mein jQuery Plugin: movingLabels

Ich mag Projekte bei denen jQuery Plugins rausspringen. Aktuell haben wir ein super Projekt welches in Cake realisiert wird und natürlich jQuery im Frontend benutzt. Wäre nicht unendliche Arbeit damit verbunden, würde noch viel mehr für den Blog rum kommen.

Eins gibt es heute: movingLabels! Der Name sagt alles, mit diesem Plugin kann man nach belieben seine Labeltags rumwirbeln lassen, sobald das zugehörige Formularfeld den Focus erhält. Am besten direkt die Demo ansehen, downloaden und den erklärenden Artikel lesen.

Zum Eintrag Mein jQuery Plugin: movingLabels →

TYPO3 Klickvergrößern durch eine jQuery Lightbox ersetzen

Wenn jQuery auf einer Seite eingebunden ist (z.B. durch die coole Extension Kiwi Slider) dann beißt sich das Javascriptframework mit anderen wie MooTools oder Prototype. Insgesamt sollte man bevorzugt ein Framework einsetzen, wenn man unbedingt beide braucht, dann lohnt sich die Suche nach dem NoConflict Mode von jQuery.

Wenn aber das unbedingt nur von einer Lightbox kommt, dann sollte man sich kurz hinsetzen, einen geeigneten Klon aussuchen (hier ist die große Lightbox Matrix) und die Klickvergrößerung von TYPO3 damit ersetzen. Das ist schnell, effektiv und in diesem Beitrag erklärt. Zum Eintrag TYPO3 Klickvergrößern durch eine jQuery Lightbox ersetzen →

Ajax in Webapplikationen mit CakePHP und jQuery

Jeder Webentwickler weiß, dass kein Benutzer mehr auf das Neuladen einer Seite warten will. Vorallem nicht, wenn es in Webapplikationen darum geht Elemente hinzuzufügen, zu bearbeiten oder zu entfernen.

Zum Beispiel in einem Tool welches umfangreiche Exportmöglichkeiten besitzt und gerade von einer jungen, dynamischen Agentur entwickelt wird. In dem Programm legt man ein Exportscript an und kann diesem verschiedene Exportdateien zuweisen die beim durchlaufen dynamisch erstellt werden.

Diese einfache 1:n Beziehung ist mit Cake schnell gebacken, mit ein paar Zeilen erweitert und läuft. Allerdings verteilt auf mehreren Seiten. Zum Glück gibt uns Cake einfache Möglichkeiten an die Hand um das zu verhindern.

In diesem Artikel will ich aufschreiben wie man praktisch jedes Cake Projekt zusammen mit dem Lieblings-Javascriptframework jQuery in eine coole Web 2.0 Anwendung verwandeln kann.

Zum Eintrag Ajax in Webapplikationen mit CakePHP und jQuery →

Select Boxes dynamisch verändern

Die praktische Auswahl von Daten über eine Selectbox ist immer wieder ein Thema. Vorallem bei den ganzen neuen Beta-Ajax-Web-Applications kommen sie einem immer wieder unter.

Das Problem mit den Dingern, ist die dynamische Veränderung. Ein einfaches $("select").find("option:first").remove(); funktioniert zwar zum entfernen, aber das hinzufügen von Options ist schon schwieriger (-böser Blick zum Internet Explorer-). Und wenn die Selectbox sich dann an einer weiteren orientieren soll, dann wirds haarig.

Die Lösung ist das Klonen und verstecken der "originalen" Box. Aus dem Klon kann man dann die überflüssigen Auswahlmöglichkeiten entfernen.

Und jetzt folgt der Artikel wie man das effizient anstellen könnte. Natürlich Hand in Hand mit jQuery.

Zum Eintrag Select Boxes dynamisch verändern →

CakePHP HABTM mit automatischer Vervollständigung

Wenn man für ein beliebiges Model Posts speichern und eingeben kann, vielleicht weil man dieser Anleitung gefolgt ist, dann ist das schon ein schöner Fortschritt. Allerdings passieren immer wieder Tippfehler, und ähnlich klingende Begriffe finden sich in der Tagcloud.

Da hilft nur eins: während der Eingabe dem Benutzer direkt passende Tags vorschlagen. Eine automatische Vervollständigung wie beim Mailen in den großen sozialen Netzwerken oder beim suchen bei Google.

Zum Glück haben sehr schlaue Leute schon diverse Plugins erstellt, welche einen JSON String oder eine simple Textliste verarbeiten können. Zum Beispiel Autobox2. Gleich mal die Demo angucken, runterladen und dann ins eigene Projekt integrieren.

So funktionierts... Zum Eintrag CakePHP HABTM mit automatischer Vervollständigung →

Nette Erweiterung für jedes Menü mit jQuery

Es gibt kaum noch ein Menü, welches den Nutzer nicht mit einem Mouseover-Status über seine aktuelle Position informiert. Soweit so gut. Meistens sieht es so aus: Der Nutzer klickt auf den Menüpunkt, der Mouseover-Status verschwindet, die Seite verschwindet, die Seite baut sich wieder auf und der eben geklickte Menüpunkt ist dauerhaft hervorgehoben.

Ganz normal. Aber: Mit ein bisschen jQuery lässt sich der Mouseover-Status schon bei einem Klick festsetzen. Das sieht gut aus und wirkt fast wie ein dynamisches nachladen der Seite.

Ansehen kann man sich diesen Effekt zum Beispiel hier im Hauptmenü oder auf der Seite von Isabel von Roon. Wie der Effekt eingebaut wird, was find(), filter() und siblings() bedeutet und wie man den aktiven Menüpunkt hervorhebt wird in diesem Artikel besprochen.

Zum Eintrag Nette Erweiterung für jedes Menü mit jQuery →