Schlagwort: HTML5

Drag & Drop of Images with HTML5

This is just a basic code snippet which shows how you can handle Drag & Drop interactions with a web browser and HTML5. If you select multiple images and drag them into the drop target, then the file names of the dropped images will be logged.
Drag & Drop of Images with HTML5 weiterlesen

Templating mit Knockout.js

Knockout.js unterstützt das MVVM-Entwurfsmuster von Microsoft und lässt sich sehr gut für das Templating in HTML5-Webprojekten nutzen. Über das data-Attribut lassen sich View-Elemente an ein ViewModel binden, welches die Anzeige dann mit entsprechenden Daten befüllt. Es folgt ein Beispiel für den Einsatz von Knockout.js zum Befüllen von Listen.
Templating mit Knockout.js weiterlesen

Chrome Remote Debugging mit Google Nexus 7

1. Google USB-Treiber installieren
google-usb-driver

2. Einstellungen im Goole Nexus 7 vornehmen

  1. Chrome for Mobile – Settings > Developer Tools > Enable USB Web debugging
  2. Device – Settings > Developer options > USB debugging

3. Google Nexus 7 über USB am PC anschließen

4. Windows-Kommandos in der Eingabeaufforderung

cd C:\Android\adt-bundle-windows-x86_64-20130219\sdk\platform-tools
adb forward tcp:9222 localabstract:chrome_devtools_remote

5. Aufruf im Chrome-Webbrowser
Danach „Inspectable pages“ im Chrome Browser über die Adresse http://localhost:9222/ aufrufen.

Update:
In neueren Chrome-Versionen können Seiten auch über chrome://inspect inspiziert werden. Man braucht dann nicht mehr http://localhost:9222/ öffnen. Der Vorteil von chrome://inspect ist außerdem, dass man dann HTML-Elemente in die Zwischenablage des inspizierenden PCs kopieren kann.

Bild in einem SVG-Element zentrieren

Man kann ein Bild in einem SVG-Element wie folgt zentrieren:

<svg id="box" width="200" height="200">
<image 
  width="114" 
  height="158" 
  xlink:href="images/card.png"
 
  x="50%" 
  y="50%" 
  transform="translate(-57, -79)"
  >
</image>
</svg>

In Worten:

  1. Obere linke Ecke des Bildes in der Mitte der Fläche ansetzen (x="50%", y="50%")
  2. Bild um die Hälfte der Bildgröße nach links verschieben (-57)
  3. Bild um die Hälfte der Bildhöhe nach oben verschieben (-79

Uncaught ReferenceError: HTMLAudioElement is not defined

Das „Audio“-Element ist neu in HTML5 und wird bei älteren Browser nicht unterstützt. Deshalb kann es beim Einsatz vom Audio-Element in Browsern ohne HTML5-Unterstützung zu einem ReferenceError mit der Meldung: „HTMLAudioElement is not defined“ kommen.

Wenn man mit der fehlenden Audio-Unterstützung leben kann aber trotzdem nicht möchte, dass der JavaScript-Code an dieser Stelle im Browser stoppt, ist es hilfreich, dass HTMLAudioElement einfach vorzutäuschen:

1
2
3

if(typeof window.HTMLAudioElement === 'undefined'){
  window.HTMLAudioElement = function(){};
}