JPlayer dynamische Multi-Instanzen

JPlayer ist eine kostenlose Medienbibliothek für Javascript (JQuery Plugin), welche das Einbinden von Mediendateien (insbesondere Musik und Videos) einfach und Browser-übergreifend ermöglicht.

Allerdings ist JPlayer bei der Verwendung mehrerer Instanzen auf einer Seiten vergleichsweise unflexibel. Die Optionen (Mediendateien, der Verweis auf den visuellen Musik-/ Videoplayer: cssSelectorAncestor, …) müssen während der Instantiierung dem Konstruktor übergeben werden und können nicht während der Laufzeit editiert werden.
Für jede einzelne Instanz von JPlayer bräuchte man also unnötige, redundante (vorausgesetzt die Player sollen alle gleich sein) Javascript-Zeilen.
weiterlesen JPlayer dynamische Multi-Instanzen

Leeräume zwischen vertikalen Listen entfernen

Bei der Verwendung von Listen (ul) kann es bei einer vertikalen Anordnung via display: inline-block; zu Leerräumen zwischen den Listenelementen kommen. Dieses Verhalten ist insbesondere in Kombination mit Rahmen oder Hintergrundfarben störend.

Die Leerräume entstehen durch unsichtbare Leerzeichen zwischen den Listenelementen. Sie lassen sich umgehen, indem die Schriftgröße des übergeordneten Elements auf „0“ gesetzt wird. Anschließend muss den einzelnen Listenelemente wieder die eigentliche Schriftgröße zugeordnet werden.

#menu ul {
    font-size: 0;
}
#menu ul li {
    font-size: 14px;
}

Android border-radius Antialiasing

Beim Experimentieren mit HTML5-Apps unter Android bin ich auf einen störenden Grafik-Bug gestoßen: Verwendet man (wie mittlerweile in vielen modernen Webseiten üblich) die CSS3-Eigenschaft border-radius erkennt man mit dem Standard-Browser auffällige Pixelfehler an den Rundungen. Nach meinen aktuellen Erkenntnissen gibt es bis dato leider kein Work-Around für diesen Fehler. Allerdings gibt es einen Lichtblick: Unter Android 4 wurde der Fehler scheinbar behoben und für ältere Android-Versionen gibt es die Alternative auf bessere Browser zurückzugreifen.

Formular nach Dropdown-Auswahl absenden

Um dem Benutzer umständliche Klicks auf den Submit-Button zu sparen, erweist es sich als praktisch, ein Formular direkt nach der Auswahl eines Wertes abzusenden (wie z.B. nach der Auswahl eines Wertes aus einer Dropdown). Mithilfe von Javascript ist das ziemlich simpel möglich:

<select name="dropdown" onchange="this.form.submit()">
        <option value="value01">value01</option>
        <option value="value02">value02</option>
        <option value="value03">value03</option>
</select>

Tabellenzeilen dynamisch einfärben

Im WorldWideWeb findet man immer wieder den typischen “Zebra-Stil” bei Tabellen. Gemeint ist damit, dass jede zweite Zeile eingefärbt ist. Wie du diesen Effekt per CSS erzeugst, erfährst du in diesem Tutorial:

dynamisch gefärbte Tabelle

weiterlesen Tabellenzeilen dynamisch einfärben

Photoshop Maße in HTML (pt und px)

Die Photoshop Maße (pt) können nicht für einen HTML-Umsetzung verwendet werden, da die Schriftgröße auf einer Webseite wesentlich größer herauskommt, als in Photoshop selbst. Eine gute Alternative bietet folgender Grundsatz:

Xpt = Xpx

Hierbei kommen vergleichbare Schriftgrößen zustande.