Archiv für die Kategorie ‘JavaScript’

01. Dezember 2008

Webdesign-Hingucker: CSS-Attribute mittels JavaScript animieren

Um das Webdesign einer Seite aufzupeppen bietet JavaScript Webentwicklern unzählige Möglichkeiten. Allerdings ist die händische Programmierung meist recht aufwendig; gerade DHTML verlangt häufig nach Browser-spezifischen Lösungen, was die Umsetzung ungemein verkompliziert.

Daher liegt der Gedanke nahe, stattdessen auf eines der zahlreichen JavaScript-Frameworks zurückzugreifen. Besonders interessant sind dabei die Möglichkeiten, CSS-Attribute zu animieren. Neben hochwertigen Animationsroutinen sind dazu aber ebenso leistungsfähige Selektions- und Event-Handler-Routinen vonnöten.

Für die Entwicklung von Webdesign-Hinguckern haben wir daher verschiedene JavaScript-Frameworks intensiv auf ihre Fähigkeiten hinsichtlich der Animation von CSS-Eigenschaften und Webdesign-Elementen hin getestet.

(weiterlesen …)

23. November 2008

Kommentarsymbole für HTML, CSS, JavaScript, PHP und TypoScript

Mit jeder neuen Programmiersprache kommen zumeist auch neue Symbole für die Kommentierung von Codefragmenten hinzu. Die wichtigsten Kommentarsymbole für HTML, CSS, JavaScript, PHP und TypoScript haben wir im Folgenden zusammengestellt.

Wir werden diese Liste künftig kontinuierlich pflegen und um Kommentarzeichen für weitere Programmiersprachen ergänzen.

HTML:
Einzeilige und mehrzeilige Kommentare: <!—— Kommentar ——>

CSS:
Einzeilige und mehrzeilige Kommentare: /* Kommentar */

JavaScript:
Einzeilige Kommentare: // Kommentar
Mehrzeilig Kommentare: /* Kommentar */

PHP:
Einzeilige Kommentare: // Kommentar oder  # Kommentar
Mehrzeilige Kommentare: /* Kommentar */

TypoScript:
Einzeilige Kommentare: # Kommentar oder  / Kommentar oder  // Kommentar
Mehrzeilige Kommentare: /* Kommentar */

.htaccess-Dateien:
Einzeilige Kommentare: # Kommentar

19. November 2008

Scrollen von DIV-Elementen per JavaScript

Eine Möglichkeit, Werbung effektiv auf einer Webseite unterzubringen, besteht darin, mit Werbebannern zu arbeiten, die beim Scrollen im Browserfenster automatisch mitlaufen und so – in Bezug auf das Browserfenster – an einer bestimmten Stelle fixiert bleiben.

Der Effekt ähnelt in etwa der CSS-Eigenschaft position:fixed. Allerdings mit dem Unterschied, dass diese CSS-Eigenschaft vom Internet Explorer bis Version 6 gar nicht unterstützt wird und sich die Position zudem stets am Browserfenster (Viewport) orientiert. Um Werbebanner beim Scrollen mitzubewegen ist sie daher nur bedingt geeignet.

Mehr Flexibilität bietet der Einsatz von JavaScript. Einziger Pferdefuß wie so oft bei DHTML: Die Browser speichern die entscheidenen Informationen in verschieden benannten Eigenschaften. Es führt also kein Weg daran vorbei, im Script zwischen dem Internet Explorer und den übrigen Browsern zu unterscheiden.

(weiterlesen …)

03. November 2008

Fehlerhafte Darstellung deutscher Umlaute bei der Einbindung externer Scripte

Falscher Zeichensatz: So sieht es aus, wenn der Zeichensatz eingebundener Scripte nicht zum Zeichensatz der Zielseite passt

Falscher Zeichensatz: So sieht es aus, wenn der Zeichensatz eingebundener Scripte nicht zum Zeichensatz der Zielseite passt

Gelegentlich kommt es vor, dass Content- und Werbebanneranbieter ihre bereitgestellten JavaScript-Codeschnipsel nicht ausreichend auf den verwendeten Zeichensatz der Zielseite hin überprüfen.

Verwendet die Zielseite beispielsweise UTF-8 als Zeichensatz, der extern eingebundene JavaScript-Code liegt hingegen in ISO-8859-1-Codierung vor, kommt es beim Einbetten von HTML-Code per Script zu hässlichen Fehldarstellungen bei der Anzeige deutscher Umlaute und Sonderzeichen.

Für Abhilfe sorgt das wenig bekannte charset-Attribut: Wann immer externe Scripte per <script>-Tag und dem Attribut src eingebunden werden, besteht die Möglichkeit, dem Webbrowser mit dem Attribut charset mitzuteilen, welcher Zeichensatz dem eingebundenen Script zu Grunde liegt.

Im obigen Beispiel würde die folgende Codezeile das Problem beheben:

<script type=”text/javascript charset=”ISO-8859-1 src=”http://Pfad zum Script></script>