Schlagwörter-Archiv: html

JPlayer dynamische Multi-Instanzen

Veröffentlicht am von — Keine Kommentare ↓

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

Veröffentlicht am von — Keine Kommentare ↓

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

Veröffentlicht am von — Keine Kommentare ↓

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

Veröffentlicht am von — Keine Kommentare ↓

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>

Photoshop Maße in HTML (pt und px)

Veröffentlicht am von — Keine Kommentare ↓

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.