HTML5

Drag & Drop of Images with HTML50

Von bennyn am 28. Mai 2014 in JavaScript

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.
Weiterlesen …

Grid Layout mit CSS30

Von bennyn am 18. August 2013 in CSS

Mit dem durch CSS3 eingeführtem Grid Layout lassen sich Elemente in einem Raster (ähnlich einer Tabelle) anordnen. Die Gestaltungsmöglichkeiten eines Grid Layouts sind sehr reichhaltig, weshalb ich mit dem Aufbau eines einfachen Beispiels beginnen möchte.
Weiterlesen …

Templating mit Knockout.js0

Von bennyn am 17. August 2013 in JavaScript

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.
Weiterlesen …

Chrome Remote Debugging mit Google Nexus 70

Von bennyn am 25. April 2013 in HTML

1. Google USB-Treiber installieren

2. Einstellungen im Goole Nexus 7 vornehmen

Chrome for Mobile – Settings > Developer Tools > Enable USB Web debugging
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 zentrieren0

Von bennyn am 16. Februar 2013 in HTML

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:

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

Uncaught ReferenceError: HTMLAudioElement is not defined0

Von bennyn am 23. Oktober 2012 in JavaScript

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(){};
}

Search