30. Dezember 2012
von Uwe Chardon
Keine Kommentare

Den Browser in den Vollbild-Modus schalten!

Mit folgendem kleinen Javascript kann ein beliebiges DOM-Element in den Vollbildmodus geschalten werden. Zum Beispiel kann man damit ein Video im Fullscreen Modus anzeigen lassen.

function vollBildModus(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}

Um die Beispielsweise die ganze Seite nach dem Laden im Vollbild anzuzeigen nutzt man:

  vollBildModus(document.documentElement);

aus Sicherheitsgründen kann man den Vollbildmodus nicht automatisch starten z.B. mit dem onLoad Event.

Am besten verknüft man die Funktion mit einem onClick Event.

Ein DOM Element mit der id ‘video’ wird mit folgendem Befehl im Vollbild angezeigt.

  vollBildModus(document.getElementById("video")); 

Um den Vollbildmodus zu beenden dient folgendes Script:

function vollBildBeenden() {
  if(element.exitFullScreen) {
    element.exitFullScreen();
  } else if(element.mozCancelFullScreen) {
    element.mozCancelFullScreen();
  } else if(element.webkitCancelFullScreen) {
    element.webkitCancelFullScreen();
  }
}

Leider unterstützen bisher nur Firefox und die Webkit-Browser die RequestFullScreen Anweisung.

Weiterführende Informationen:
Mozilla
W3C

15. September 2012
von Uwe Chardon
3 Kommentare

Unterschreiben auf dem Tablet!

Unterschreiben auf dem iPad

Einer meiner Auftraggeber wollte auf einer Messe Kundendaten mit dem iPad erfassen. Dabei sollte der Kunde auf dem Tablet eine Einverständniserklärung unterzeichnen. Damit die Kunden nicht mit dem Finger unterzeichnen mussten wurden spezielle Stifte für die Bedienung des Touchpads angeschafft. Die Unterschrift sollte als Bild auf dem Server gespeichert werden.

Zur Erfassung der Unterschrift im Browser sollte ein Canvas-Element dienen. Der Inhalt des Canvas-Elements wird in ein Bild umgewandelt und dann per Ajax an den Server übertragen und per PHP-Script gespeichert.

Weiterlesen →

26. Juli 2012
von Uwe Chardon
Keine Kommentare

Erweiterungen für Twitter Bootstrap!

Twitter Bootstrap ist ein, in meinen Augen, geniales “Web-Design-Kit” für die Erstellung von Cross-Browser-kompatiblen Internetseiten.

Twitter Bootstrap

Das Framework gewinnt inerhalb kürzester Zeit immer mehr Anhänger, so soll z.B. die neue Version von Joomla Bootstap enthalten.

Mit einer flexiblen und gut durchdachten HTML / CSS / Javascript-Struktur bietet er viele der populären UI-Komponenten, ein Grid-System (ähnlich 960gs) und JavaScript-Plugins für gängige Szenarien.

Inzwischen habe ich einige Seiten mit Bootstrap gebaut und bin immer noch begeistert. Das Framework ist extrem flexibel. Im einfachsten Fall baut man nur die Standard CSS Datei von Bootstrap ein oder man konfiguriert sich die für das anstehende Projekt benötigten Komponenten und Plugins auf den Download-Seiten von Bootstrap.

Weiterlesen →

5. Juli 2012
von Uwe Chardon
Keine Kommentare

Cooler 3D Effekt mit CSS

Mauszeiger über das Bild bewegen.(funktioniert nicht im IE)

Ein “Wackelbild” nur Mithilfe von CSS erzeugt – einfach nur Cool.

Ich gebe zu das die neuen CSS 3D Effekte auf den wenigsten Webseiten sinnvoll eingesetzt werden können. – Aber sie machen einfach was her.

Weiterlesen →

5. Mai 2012
von Uwe Chardon
3 Kommentare

Transitions, Transform und Animationen Teil 2.

Im vorigen Artikel habe ich gezeigt wie man mit den neuen CSS Eigenschaften transform:skew, rotate, und scale in Verbindung mit der transition funktion umgeht. Im zweiten Teil des Tutorials geht es jetzt in die dritte Dimension.
Die 3D Transformationen entsprechen denen in der Ebene, translate3d verschiebt, scale3d skaliert und rotateX, rotateY, rotateZ dreht ein HTML Element im Raum. Die Funktion rotate3d rotiert ein Element um einen selbstdefinierten Vektor. Wenn man Mathematisch begabt ist kann man auch mit der Funktion matrix3d arbeiten diese Funktion benötigt als Argument 16 Werte, das entspricht einer 4 x 4 Matrix mit der alle Bewegungen im Raum definiert werden können.
Weiterlesen →

20. April 2012
von Uwe Chardon
1 Kommentar

Transitions, Transform und Animationen Teil 1.

Mit HTML5 kommt Bewegung auf Internetseiten auch ohne den Einsatz von Flash. Dabei sind Transitions kann man am einfachsten einsetzen. Sie werden von fast allen Browsern unterstützt – prefixe nicht vergessen (-o-, -webkit-, -moz-, -ms-). Transitions werden durch ein mouseOver Event ausgelöst und animieren den Übergang zwischen den standard CSS-Eigenschaften eines Elements und den mit :hover ausgezeichneten Eigenschaften des Elements.
Weiterlesen →

5. April 2012
von Uwe Chardon
2 Kommentare

Tooltips ohne Javascript

Tooltip nur mit CSSDieser Artikel soll zeigen wie einfache es ist Tooltips ohne Javascript zu erstellen Mithilfe der CSS-Pseudoelemente :after und :hover sind einfache Tooltips mit wenig Aufwand machbar. Und das beste es ist kein Javascript benötigt.
Weiterlesen →

20. März 2012
von Uwe Chardon
Keine Kommentare

Kann man HTML5 schon einsetzen?

Einsatzmöglichkeit von HTML5 und CSS3
Die Seite html5please gibt einen Überblick über die neuen Features von HTML5 und CSS3. Zu jedem Feature gibt’s einen kleinen Überblick in wie weit das Feature heute schon von den Browsern unterstützt wird. Es werden Empfehlungen zu Polyfills (Javascripte welche die neuen Features in älteren Browsern ‘nachrüsten’) und Fallbacks gegeben.
Alles in allem eine unverzichtbare Seite für alle Webdesigner die schon mit HTML5 arbeiten wollen.

22. Januar 2012
von Uwe Chardon
Keine Kommentare

Neue Pseudoelemente in CSS3 erklärt.

CSS Pseudoelmente werden zum erweitern der selektoren benutzt. Das bekannteste Pseudoelement ist wohl :hover. Weniger bekannt sind Elemente wie :before und :after.
In CSS3 kommen neue Elemente wie :nth-child dazu. Leider werden die verschiedenen Pseuduelemente noch nicht von allen Browsern unterstützt.
Weiterlesen →