Follow Me On The Web!
Archiv für die Kategorie ‘JavaScript’
Link-Aufbau zum Ausführen von JavaScript-Code
Gelegentlich benötigt man Links, deren einzige Funktion darin besteht, JavaScript-Code zur Ausführung zu bringen. Häufig stößt man in diesem Zusammenhang auf den Tipp, Links wie folgt aufzubauen:
<a href=”#” onclick=”jsFunc();”>Link mich</a>
Dies hat allerdings einerseits den Nachteil, dass mit dem Klick und bei gesetztem <base>-Tag die angegebene Base-URL aufgerufen wird. Aber auch bei nicht gesetztem <base>-Tag springt die Ansicht im Browser-Fenster zum Seitenkopf.
Vielversprechender ist folgender Lösungsansatz, der völlig ohne “Nebenwirkungen” funktioniert:
<a href=”javascript:void(0)” onclick=”jsFunc();”>Link mich</a>
jQuery: Werte eines Checkbox-Arrays abfragen
Um mittels jQuery nicht nur auf den ersten Wert eines Checkbox-Arrays zugreifen zu können ( jQuery(‘input:checkbox:checked’).val() ), sondern auf das komplette Array, bietet sich die each()-Methode an:
jQuery(‘input:checkbox:checked’).each(function() {
alert (jQuery(this).val());
});
JavaScript: unterminated string literal error
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
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
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 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
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