scrollleiste.de

Artikel mit dem Schlagwort "javascript"

Links der Woche 19

Prezi – the zooming editor for stunning presentations
Zoomende Präsentationen auf Basis von Flash sind spektakulär.
Recreating the button
So sind die reinen HTML/CSS-Buttons von GMail aufgebaut.
Fancybox
Kostenlose FancyZoom-Alternative, die dazu noch als jQuery-Plugin daherkommt.
A Mac OS X-style Dock in JavaScript
Das Dock von OS X in JavaScript nachgebaut für die eigene Website. Hatte ich früher schonmal gesehen, jetzt sieht der Zoom aber wesentlich flüssiger und die Zwischengrößen der Icons geglättet aus.
MooFlow
Und hier CoverFlow von OS X fürs Web. Diesmal allerdings für MooTools. Auch schön flüssig und ohne Aliasing-Effekte. Sogar skinable für verschiedene Looks.
Hex Color Picker
Erweitert den Farbauswahl-Dialog in OS X um eine Hexadezimal-Anzeige für den Farbeinsatz im Webdesign.

Bewegungsparalaxe mit JavaScript

Unter Bewegungsparallaxe versteht man in der Wahrnehmungspsychologie den Effekt, der sich optisch ergibt, wenn verschiedene Objekte unterschiedlich von einander entfernt in einer Landschaft verteilt sind und sich der Beobachter parallel zu diesen Objekten seitlich fortbewegt und dabei in Richtung Horizont blickt. Dieser Effekt tritt beispielsweise auf, wenn man aus dem Seitenfenster eines fahrenden Autos oder Zuges schaut.
Wikipedia

Das JavaScript-Widget „jParallax“ simuliert den Parallaxe-Effekt durch teiltransparente Bilder, die sich in unterschiedlicher Geschwindigkeit zueinander bewegen, wenn man mit der Mause darüber fährt. Ganz anzuschauen, außer um es ins Layout zu integrieren, fällt mir eine geeignete Verwendung im Augenblick nicht ein. Was man zumindest feststellen kann ist, dass heutzutage immer mehr Dinge mit JavaScript gelöst werden, für die früher nur Flash in Frage kam. Schön.

Da es auf der Basis von jQuery geschrieben ist, lässt sich das Widget leicht nutzen, anpassen und erweitern.

Performantes Syntaxhighlighting per JavaScript

Bei Google Code gibt es das Syntaxhighlighter-Projekt, eine JavaScript-API die Quellcode-Syntax verschiedenster Sprachen auf Websites farbig darstellt (siehe Artikel „SyntaxHighlighter macht Quellcode schön„). Das Parsen des Code, um diesen einfärben zu können läuft dabei in der JavaScript-Engine des Browsers, also beim Client ab. Das spart zwar Rechnenkapazität auf dem Server, jedoch ist JavaScript in den Browsern der Generation vor Chrome nicht sehr performant. Am ehesten merkt man dies beim Einsatz des Google Syntaxhighlighters im Internet Explorer kleiner 7 beim Parsen mittelgrößer Code-Stücke. Fehlermeldungen, dass Skripte nicht zum Ende kommen und einfrierende Browserfenster sind die Folge.

Eine brauchbare Alternative stellt highlight.js von Software Maniacs dar. Diese JavaScript-Bibliothek funktioniert analog zu der von Google Code, jedoch ist sie weit performanter. Zwar lassen sich die Browsermeldungen nicht ausschließen, jedoch treten diese erst bei weit größeren Codeblöcken auf. Highlight.js ist mittlerweile auch Bestandteil des JavaScript-Framework Dojo.

Silbentrennung in HTML

Hyphenator ist ein Google Code Projekt, das per JavaScript eine Silbentrennung in die eigene Website bringt. Einfach API in die Seite einfügen und Silbentrennung starten:

<script src="http://hyphenator.googlecode.com/svn/trunk/Hyphenator.js" type="text/javascript">
</script>

<script type="text/javascript">
   Hyphenator.run();
</script>

Jetzt muss man nur noch den Elementen der Seite, auf die die Silbentrennung angewendet werden soll, die CSS-Klasse class="hyphenate" zuweisen. Explizit verhindern lässt sich die Trennung per class="donthyphenate".

Weiterlesen »

Traffic sparen mit AJAX Libraries API

Google bietet den kostenlosen Dienst „AJAX Libraries API“ an, mit dessen Hilfe sich über JavaScript automatisch ein oder mehrere bekannte JavaScript-Frameworks laden lassen. jQuery, prototype, script.aculo.us, mootools oder dojo lassen sich somit mit einer Zeile JavaScript-Code vom Google-Server laden.

Der Vorteil ist: Der Webbrowser des Besuchers meiner Seite lädt sich die gewünschten JavaScript-APIs direkt vom Google-Server anstatt meinen eigenen Webserver mit dem verhältnismäßig hohen Traffic der JavaScript-Dateien zu belasten. Zudem lässt sich die gewünschte Version des einzubetteten Scriptes einfach per Parameter bestimmen und schnell austauschen oder upgraden.

Weiterlesen »

Verläufe im Text mit CSS

Web 2.0 Verläufe im Text per CSS – ohne Flash oder eingebettes Bild unmöglich?

Verlauf im Text per CSS

Nicht mit Hilfe dieses CSS-Tricks: Das Geheimnis ist in den Tag um den Text, z.B. <H1> am Anfang einen weiteren <span>-Tag einzufügen: Weiterlesen »

SyntaxHighlighter macht Quellcode schön

Der „syntaxhighlighter“ von Google Code ist ein freies Skript, um die Syntax der Sprachen C++, C#, CSS, Delphi, HTML, Java, JavaScript, PHP, Python, Ruby, SQL, VB und XML iauf Websites farbig darzustellen. Der Highlighter ist vollständig in JavaScript geschrieben, arbeit rein clientseitig und lässt sich per CSS anpassen.

Hier ein Beispiel in der Sprache CSS zur Demonstration der Auszeichnung. Weiterlesen »

Highslide Integration in WordPress

Mit Hilfe dieser Erweiterung für das Weblog-System „WordPress“ lassen sich eingebundene Bilder mit dem von Torstein Honsi bekannten JavaScript Tool „Highslide JS“ vergrößern.
Kein aufwändiges Hinzufügen irgendwelcher Quicktags, von JavaScript o.ä. – einfach eine Null-Klick-Lösung! Weiterlesen »