münster-webdesign.net

Archiv für die Kategorie ‘JavaScript’

JavaScript: unterminated string literal error

Mittwoch, 25. November 2009

JavaScript gibt sich recht unkooperativ, wenn Strings Zeilenumbrüche enthalten. In der JavaScript-Fehlerkonsole gibt’s dann meist ein Error: “unterminated string literal”.

Sofern JavaScript-Code dynamisch per PHP erzeugt werden soll, ist man also gut beraten, vorher etwaige Zeilenumbrüche zu entfernen. Recht komfortabel gelingt das mit der PHP-Funktion “preg_replace()”. Ein entsprechender Beispiel-Code, der alle Zeilenumbrüche aus einem String entfernt, könnte beispielsweise wie folgt aussehen:

$string = preg_replace(‘/\n|\r\n|\r/’,”,$string);

Neue Typo3-Extension: Layer Ads for Typo3

Donnerstag, 15. Oktober 2009
Typo3-Extension: Layer ads for Typo3 (EXT: cglayerads)

Typo3-Extension: Layer ads for Typo3 (EXT: cglayerads)

Online-Werbung mittels Layer Ads erfreut sich wachsender Beliebtheit. Mit “Layer Ads for Typo3″ (EXT: cglayerads) haben wir eine neue Typo3-Extension entwickelt, die das Einblenden von Layer Ads ermöglicht. Der benötigte HTML-Code lässt sich per TypoScript individualisieren. Als Basis für die JavaScript-Overlay-Funktion kommt das JavaScript-Framework jQuery zum Einsatz.

Die Häufigkeit der Einblendung lässt sich über die IP-Adressen der Besucher in Verbindung mit TypoScript steuern.

Hier eine Beispiel-Site, auf der unsere Typo3-Extension “Layer Ads for Typo3″ (EXT: cglayerads) zum Einsatz kommt.

Bilder mit und ohne JavaScript vorladen

Dienstag, 18. August 2009

Wer kennt das nicht: Beim Klick auf eine Miniaturvorschau oder beim Überfahren von grafischen Navigationsschaltflächen dauert es eine kleine Ewigkeit, bis die angeforderten Bilddateien im Webbrowser beziehungsweise im Browser-Cache bereitsteht – insbesondere bei Navigationsschaltflächen kann das mitunter sehr nervig sein.

Als Lösung für Navigationsschaltflächen kommen vor allem zwei Techniken in Frage. Die erste Möglichkeit besteht darin, die entsprechenden Bilddateien beim Laden der Seite via JavaScript im Hintergrund vorzuladen.

Dazu genügt ein kurzes JavaScript-Snippet, das wie folgt aussehen könnte:

var bildernamen = new Array(“bild1″, “bild2″);
var bilderverzeichnis = “images/”;

for(var zaehler = 0; zaehler < bildernamen.length; zaehler += 1) {
pic = new Image();
pic.src = bilderverzeichnis + bildernamen[zaehler] + ‘.jpg’};

Ist JavaScript allerdings im Browser des Besuchers deaktiviert, funktioniert die Lösung nicht. Zudem bedeutet das Implementieren und Anpassen des JavaScript-Codes zusätzliche Arbeit.

Als Alternative bietet sich für grafische Menüschaltflächen die so genannte “Sprite”-Technik an. Hier genügt ein einzelnes Master-Bild sowie etwas CSS, um den gleichen Effekt zu erreichen.

WordPress-Plugin: Link-Hover-Effect

Donnerstag, 04. Dezember 2008

WordPress-Plugin Link-Hover-Effect: Farbanimationseffekte für Hyperlinks

Name des WordPress-Plugins: Link-Hover-Effect

Ziel: Das Plugin dient als technische Demonstration für einen Grundlagenartikel für das PC-Praxis-Sonderheft zu WordPress von Data Becker.

Beschreibung: Das WordPress-Plugin “Link-Hover-Effect” fügt den Hyperlinks im Blog einen Farbanimationseffekt hinzu: Sobald der Mauszeiger sich über einem Link befindet, ändert sich die Farbe des Links nicht wie gewöhnlich schlagartig sondern stufenlos, bis die eingegebene Zielfarbe erreicht ist. Beim Verlassen läuft die Animation in umgekehrter Richtung ab.

Eine Variation dieses WordPress-Plugins ist auf dieser Seite installiert, und vermittelt einen Eindruck vom Effekt.

Start- und Zielfarbe der Animation können in der Pluginverwaltung angepasst werden. Der Animationseffekt wurde mit dem JavaScript-Framework jQuery realisiert.

Download: Link-Hover-Effect Version 1.0

Webdesign-Hingucker: CSS-Attribute mittels JavaScript animieren

Montag, 01. Dezember 2008

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…)

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

Sonntag, 23. November 2008

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