JSON in HTML Template rendern

Mit der Render-Engine Tempo können Daten aus einem JavaScript-Objekt problemlos in ein HTML-Gerüst (Template) übertragen werden. Die Anwendung ist super simpel und erfordert nur folgende Schritte:

  1. Anlegen eines HTML-Templates
  2. Deklarierung von data-template für die Einträge, die wiederholt werden sollen
  3. Einbinden von tempo.js
  4. Aufruf des Render-Befehls mit Übergabe des Templatenamen und der zu rendernden Daten im JSON-Format

JSON in HTML Template rendern weiterlesen

Externe Links in neuem Tab öffnen

Für externe Links hat man früher gerne das Hyperlink-Attribut target auf _blank gestellt, um zu erreichen, dass diese Links in einem neuen Fenster oder Tab geöffnet werden. Mit dem „XHTML 1.0 Strict“-Standard wurde das Attribut target jedoch begraben, weshalb der W3C Markup Validation Service nur ein there is no attribute "target" anzeigt, sofern dieses Attribut verwendet wird. Begründet wurde dieser Entschluss damit, dass man dem Webseiten-Besucher selber die Entscheidung überlassen möchte, ob er den Link in einem neuen Fenster öffnen möchte oder nicht.

Möchte man trotzdem externe Links in einem neuen Tab öffnen lassen und dabei die W3C Validierung bestehen, so hilft ein Umweg über JavaScript, welcher alle externen Links findet und mit dem Wert target="_blank" auszeichnet:

var links = document.getElementsByTagName('a');
if(links.length > 0){
  for(var i = 0; (link = links[i]); i++){
    if(link.href.indexOf(document.domain) == -1){
      link.setAttribute('target', '_blank');
    }
  }
}

Möchte man die Links von dynamisch generierten Inhalten ebenfalls auf target="_blank" setzen, so hilft folgender PHP-Trick:

$text = str_replace('<a', '<a target="_blank"', $text);

Im aktuellen HTML5-Entwurf wurde das target-Attribut übrigens wieder aufgenommen.

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

Parameter mit JavaScript auslesen

Manchmal möchte man URL-Parameter mit JavaScript auslesen. Für diesen Zweck habe ich im Artikel [post id=3396]Get GET-Parameters with JavaScript[/post] gezeigt, wie man eine Funktion schreibt, die der $_GET aus PHP ähnlich ist. Es geht aber auch noch anders. Es folgt ein zweites Beispiel.
Parameter mit JavaScript auslesen weiterlesen

JavaScript JSON Selector Engine

Daten im JSON-Format können ziemlich komplex sein und die Analyse (Parsing) aufwendig machen. Nicht selten kommt dann der Wunsch nach einer Möglichkeit auf, die gewünschten Daten einfacher zu selektieren. Die erfreuliche Nachricht ist, dass es eine solche Möglichkeit in Form einer „selector engine“ gibt. Mit JSON Select können komplexe JavaScript-Objekte mit CSS-ähnlichen Selektoren durchforstet werden. Ich habe dazu ein kleines Beispiel vorbereitet.
JavaScript JSON Selector Engine weiterlesen

Mäuse, Finger und Stifte unter einen Hut bringen

Wer mit JavaScript arbeitet kennt sicherlicht die Mouse-Events (onmousedown, onmousemove, onmouseup). Diese Events lassen sich jedoch nicht für Touch-Eingaben verwenden, denn dort gibt es: ontouchstart, ontouchmove und ontouchend.

Noch interessanter wird es mit Windows 8 und dem Internet Explorer 10. Windows 8 kann auf vielen unterschiedlichen Geräten (Tablets, Desktop, Laptops) eingesetzt werden und reagiert daher auf Stift-, Maus- und Toucheingaben.

Um diese ganzen Kategorien unter einen Hut zu bringen, habe ich eine geräteübergreifende Lösung entwickelt:
Mäuse, Finger und Stifte unter einen Hut bringen weiterlesen