Ich habe die letzten zwei Tage für ein Kundenprojekt ein Screendesign in XHTML und CSS umgesetzt. Wichtiger Wunsch des Kunden war dabei, dass die extra für den Kunden entworfene Hausschrift Verwendung in der Webseite findet. Und das nicht zu knapp: Überschriften und vorallem das Menü sollte in der Schriftart “RKM Headline” ausgegeben werden.
Um TrueType/OpenType Schriften in eine Webseite zu integrieren, gibt es verschiedene Möglichkeiten. Einmal wäre da sIFR, was ich aber nicht verwenden wollte, da ich Flash eher mit Abneigung gegenüberstehe und es zudem Probleme mit AdBlockern geben kann. Die nächste Möglichkeit wäre gewesen, es mit CSS3 zu lösen, was aber ebenfalls ausschied, da dies von zu wenig Browsern unterstützt wird.
Nach ein wenig Recherche fand ich allerdings eine mir zusagende Lösung: typeface.js – ein kleines JavaScript, dass mittels SVG/VML die als TTF oder OTF gelieferte Schriftart im Browser verfügbar macht. Weiterlesen…
Tags: fonts, javascript, opentype, schriftarten, truetype, typeface | 1 Kommentar »
Wer sich an Spiele wie “Shadow of the Beast” erinnert, der muss sich auch zwangsweise an diesen netten Pseudo-3D Effekt erinnern, mit dem diese Spiele ihren coolen Look erhielten. Parallax Scrolling nennt man diese Technik übrigens, bei der verschiedene Layer aus Grafiken übereinander gelegt und unterschiedlich schnell horizontal oder auch vertikal bewegt werden.
Weil mir gestern Abend langweilig war, habe ich mich damit beschäftigt den Parallax Effekt versuchsweise in JavaScript umzusetzen. Als Bibliotheken verwende ich dabei PrototypeJS und Scriptaculous. Nachdem ich mit einem Grafikprogramm meine 3 Layer gezeichnet und PNGs mit Transparenz exportiert hatte, ging es an die Umsetzung. Schnell wurde mir klar, wie simpel es im Grunde ist mit ein wenig CSS und JavaScript diesen Effekt zu erzeugen. Weiterlesen…
Tags: eyecandy, javascript, parallax, prototype, scriptaculous, scrolling | Keine Kommentare »
Wenn man mal eben fix eine E-Mail Adresse vor Spam-Robots sichern will, dann geht das ganz einfach mit ein wenig JavaScript.
// Entweder so
document.write( '<a h'+'ref="ma'+'ilto'+':post'+'@'+'thegeek'+'.'+'de">post'+'@'+'thegeek'+'.'+'de</a>' );
// Oder auch so [prototype]
$('my_mail_adress').update( '<a h'+'ref="ma'+'ilto'+':post'+'@'+'thegeek'+'.'+'de">post'+'@'+'thegeek'+'.'+'de</a>' );
Wichtig ist noch folgendes:
<noscript>
post AT thegeek . de
</noscript>
Sollte JavaScript nicht verfügbar sein, wird einfach die E-Mail Adresse ohne “@”-Zeichen und Domain ausgegeben, was die Spam-Robots nicht dekodieren können.
Siehe hier (mit Protype umgesetzt, da document.write bei asynchron geladenem Content nicht sinnvoll ist):
PS: Die Mail-Adresse existiert nicht und wurde wirklich dynamisch mit JavaScript eingefügt. :-)
Tags: email, javascript, spam | Keine Kommentare »
Um dem Benutzer zu visualisieren, dass gerade ein asynchroner HTTP Request ausgeführt wird, hat die AJAX Welt das ajax-loading.gif erfunden. Diese kleine animierte Grafik gibt es in vielen Varianten und bittet den Benutzer optisch darum zu warten, bis der Inhalt geladen wurde. Sinnvolle Sache, sonst klickt er sich nämlich doof und dusselig, falls es doch mal ein wenig länger dauert. Kurzerhand habe ich das auch mal hier in Form des springenden Punktes im Blog eingebaut.
Zuerst habe ich meinen Body-Tag mit einer ID versehen, damit ich mit Prototype einfach auf das Body-Element zugreifen kann.
<body id="body">
Dann habe ich ein kleines DIV samt Bild mit den CSS Eigenschaften “position:absolute” und “display:none” hinzugefügt. Das DIV kann mit Prototype so nämlich frei positioniert werden, wird aber vorerst nicht angezeigt.
<!-- Create hidden bouncing ball layer (ajax-loading.gif or similar) -->
<div id="bouncer" style="position:absolute;display:none"><img src="/images/ball.gif" alt=""/></div>
Als nächstes wird ein Event-Handler an den Event “onmousemove” des Body-Tags geklebt. Der Handler ermittelt die aktuellen Maus-Koordinaten und platziert das (noch immer versteckte) DIV versetzt neben der Maus.
// Move the bouncing ball next to mouse cursor position
$('body').onmousemove = function( e ) {
mouseX = Event.pointerX( e );
mouseY = Event.pointerY( e );
$('bouncer').setStyle( { left: (mouseX+15) + 'px', top: (mouseY+15) + 'px' } );
return true;
}
Danach habe ich meine AJAX-Load Funktion noch so abgeändert, dass mit Beginn des Requests das DIV mit der Grafik angezeigt wird und bei Erfolg oder Fehler wieder versteckt wird. Anbei eine kleine Beispiel-Funktion.
// Example function to use the bouncer
function ajax_load( uri )
{
$('bouncer').show();
new Ajax.Request( uri, {
onSuccess: function( r ) {
$('bouncer').hide();
},
onFailure: function( r ) {
$('bouncer').hide();
}
});
}
Wirklich einfach, aber ein toller und ausnahmsweise auch mal sinnvoller Effekt. ;-)
Tags: eyecandy, grafik, javascript, prototype | Keine Kommentare »
