TheGeek.de » javascript

Empfehlung: typeface.js – TTF und OTF Schriften im Browser verwenden

Marc — Tue, 29 Dec 2009 17:49:23 +0000

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.

Der Einsatz ist relativ einfach: Auf der Webseite von typeface können beliebige Schriften (TTF/OTF) in JavaScript Dateien konvertiert werden, die zusammen mit der typeface.js im Header der Seite nach den eigenen CSS-Definitionen eingebunden werden.

Hier ein Beispiel:


	Beispiel

Anhand dieses HTML-Codes wird ein wichtiges Detail bereits deutlich: Jede Schriftvariante (Fett/Kursiv/…) muss gesondert in eine JavaScript Datei konvertiert werden, denn nur so ist es typeface möglich auch CSS-Angaben wie “font-weight: bold” richtig zu interpretieren. Fehlt die Fettschriftvariante der Schriftart, wird der Text nicht umgewandelt. Ein kleiner Stolperstein, aber wer es weiß, für den ist es kein Problem.

Ansonsten ist der weitere Einsatz von typeface einfach: Headline-Tags können per Stylesheet formatiert werden, bei anderen Tags muss eine Style-Angabe im Tag direkt gesetzt sein, Kind-Elemente werden nicht beachtet.

Beispieldefinition eines Headline-Tags:

#middle h2 {
	font-size:20px;
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing:1px;
	margin-bottom:18px;
	font-family:'RKM Headline',Arial,Helvetica,sans-serif;
	font-weight:bold;
}

Der Tag wird erstmal wie gewöhnlich formatiert, so dass die Überschrift auch schön aussieht, wenn typeface nicht funktioniert. Dann wird per “font-family” einfach unsere selbst erzeugte Schriftart “RKM Headline” gesetzt, um den Rest kümmert sich das JavaScript.

Möchtest du ein anderes Element als eine Headline mit der Schriftart anzeigen, kann dies auch über das Style-Attribut des Tags gelöst werden:

	Dies ist ein schöner Link
	

	

	Dies ist ein schöner externer Link

Hier nur wichtig: Im Class-Attribut des Tags muss “typeface-js” vorkommen, der Rest läuft über das Style-Attribut, aber auch die CSS-Attribute – wie z.B. die Schriftgröße – die auf das Element wirken werden berücksichtigt.

Schon klasse muss ich sagen… und OpenSource noch dazu! Daumen hoch für typeface!

Tab-Menüs mit Prototype generalisieren

Marc — Fri, 27 Nov 2009 14:37:56 +0000

Wer kennt es nicht: Mehrere Datentabellen oder -abschnitte auf einer Seite und der Benutzer verliert schnell den Überblick. Die Lösung: Ein wenig JavaScript, mit ein wenig CSS und ein paar DIVs garniert, das ganze kräftig durchkneten und fertig ist der Tabbed-Content für jeden Einsatzzweck.

Hier ein wenig HTML:


Datenblatt 1
Datenblatt 2
Datenblatt 3
Datenblatt 4
Datenblatt 5

Jede Menge Daten (1)
Jede Menge Daten (2)
Jede Menge Daten (3)
Jede Menge Daten (4)
Jede Menge Daten (5)

Oben findet sich unser Tab-Menü, dass die insgesamt 5 Daten-Layer per Klick einblenden soll. Die DIVs mit den Daten sind per Style-Definition erstmal nicht sichtbar, bis auf den ersten DIV, da davon auszugehen ist, dass ohne einen Klick auf etwas das erste Datenblatt angezeigt werden soll. Damit das Tab-Menü auch ansprechend aussieht, brauchen wir noch folgende CSS Definitionen:

#tabmenu {
	overflow:hidden;
	border-bottom:1px solid #FFF;
}
#tabmenu .tab {
	float:left;
	border:1px solid #660000;
	border-bottom:none;
	margin-left:3px;
	padding:3px;
	background-color:#F4F4F4;
	font-weight:bold;
}
#tabmenu .active {
	background-color:#FFFFFF;
	color:#000099;
}
#tabmenu .tab:hover {
	background-color:#FFFFFF;
	cursor:pointer;
}

Damit wir nun nicht für jeden einzelnen Tab eine “onclick” Aktion schreiben müssen, habe ich mir überlegt ein auf Prototype aufsetzendes JavaScript zu schreiben, dass anhand der verwendeten IDs der Tabs und der Daten-DIVs (die nur zueinander passen müssen) eine generell einsetzbare Lösung schafft. Das Skript kann im Head-Bereich der Seite eingebunden werden und durchsucht beim Aufruf, ob Tabs vorhanden sind und behandelt diese entsprechend.

/**
 * Render a tabbed menu
 */
var tabids = [];
var containerids = [];
function create_tabs()
{
	$$('.tab').all( function( el ) {
			tabids.push( el.id );
			containerids.push( el.id.replace( 'tab_', '' ) );
			el.observe( 'click', handle_tab_click );
			return true;
	} );
}
/**
 * Hande a clicked tab
 */
function handle_tab_click( event )
{
	// Get container id
	containerid = this.id.replace( 'tab_', '' );
	// Set active tab menu point
	tabids.all( function( tab ) {
		$(tab).removeClassName( 'active' );
		return true;
	} );
	this.addClassName( 'active' );
	// Set active tab content container
	containerids.all( function( container ) {
		$(container).hide();
		return true;
	} );
	$(containerid).show();
}
/**
 * Init tabbing
 */
Event.observe( window, 'load', create_tabs );

Die erste Funktion “create_tabs” sucht alle DIV-Layer innerhalb der Seite, die mit der CSS-Klasse “tab” versehen sind. Die gefundenen Tabs werden danach zur weiteren Verarbeitung in einem Array gespeichert und mit einer String-Ersetzung der zugehörige Daten-Layer ermittelt. Die IDs der Datenlayer werden ebenfalls in einem Array gespeichert. Zu guter letzt wird dem Tab-Menüpunkt noch eine Handler-Funktion zugewiesen.

Die zweite Funktion ist diese Handler-Funktion. Beim Klick wird zuerst ermittelt, welcher Daten-Layer angezeigt werden soll, indem durch eine Zeichenersetzung das “tab_” in der ID des Tab-Menüpunkts entfernt wird. Übrig bleibt dann z.B. “datasheet1″, wenn der erste Menüpunkt ausgewählt wurde. So weiß die Funktion für den späteren Verlauf, welcher DIV angezeigt werden muss.

Nun geht es daran, das Tab-Menü entsprechend zu verändern, denn es soll ja der angeklickte Menüpunkt hervorgehoben werden. Dazu entfernen wir per Prototype-Methode “all”, die auf das bei der Initialisierung erstellte Array angewendet wird, bei allen Tabs die CSS Klasse “active”. Danach wir die Klasse “active” dann beim angeklickten Punkt gesetzt und das Menü ändert sich so entsprechend dem Nutzerverhalten.

Dann durchlaufen wir ebenfalls mit “all” das Array, das die IDs der Datenblätter enthält und verstecken mittels “hide” alle DIVs. Nun wird nur noch das richtige DIV eingeblendet und das Tabbing ist komplett.

Großes Finale im Skript ist dann noch ein Event-Observer, der nach dem Laden der Seite die Funktion “create_tabs” aufruft und so alle auf der Seite gefundenen Tabs initialisiert.

Wichtig für den Einsatz des Skripts ist nur folgendes: Die IDs der Tab-Menüpunkt und der Layer mit den Daten müssen auf einander abgestimmt sein und ein Tab-Menüpunkt muss immer mit “tab_” beginnen. Lege ich also einen Tab mit der ID “tab_datentabelle123″ an, dann muss das DIV mit den Daten die ID “datentabelle123″ haben, sonst funktioniert es nicht. Natürlich müssen die Tab-Menüpunkte auch die richtigen CSS-Klassen haben, aber das versteht sich wohl von selbst.

Und so könnte es aussehen:

Datenblatt 1

Datenblatt 2

Datenblatt 3

Datenblatt 4

Datenblatt 5

Jede Menge Daten (1)

Parallax Scrolling Effekt mit Prototype/Scriptaculous JavaScript

Marc — Wed, 11 Nov 2009 10:09:57 +0000

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.

Das HTML Grundgerüst besteht lediglich aus 3 DIV Layern:

Auf diese DIVs werden ein paar einfache CSS Regeln angewendet, um die Hintergrundgrafiken zu setzen. Zudem wird noch die Breite und Höhe definiert und der “overflow” auf “hidden” gesetzt. So wird es möglich per CSS Anweisung “background-position” den Hintergrund, also unseren Parallax-Layer, zu verschieben und einen Scroll-Effekt zu realisieren.

#layer_bg {
	border:10px solid #FFF;
	width:1150px;
	height:400px;
	margin:auto auto;
	background-image:url( 'layer_bg.png' );
	background-repeat:repeat-x;
	background-position:0px 0px;
	overflow:hidden;
}
#layer1 {
	background-image:url( 'layer1.png' );
	background-repeat:repeat-x;
	background-position:0px 0px;
	width:1150px;
	height:400px;
	overflow:hidden;
}
#layer2 {
	background-image:url( 'layer2.png' );
	background-repeat:repeat-x;
	background-position:0px 0px;
	width:1150px;
	height:400px;
	overflow:hidden;
}

Die Bewegung der Hintergrundgrafiken übernimmt eine kleine JavaScript-Funktion, an welche die Art der Bewegung übergeben wird.

var position_index1 = 0;
var position_index2 = 0;
var position_index3 = 0;
var effect_running = false;
function run_effect( $move_type )
{
	if( !effect_running )
	{
		effect_running = true;
		if( $move_type == 'move_left' )
		{
			position_index3 += 200;
			position_index2 += 200;
			position_index1 += 200;
		}
		if( $move_type == 'move_right' )
		{
			position_index1 -= 200;
			position_index2 -= 200;
			position_index3 -= 200;
		}
		if( $move_type == 'rotate_left' )
		{
			position_index3 += 200;
			position_index2 += 50;
			position_index1 -= 200;
		}
		if( $move_type == 'rotate_right' )
		{
			position_index3 -= 200;
			position_index2 -= 50;
			position_index1 += 200;
		}
		new Effect.Morph( 'layer_bg', { style:'background-position:' + (position_index3 * 1) + 'px 0px;' } );
		new Effect.Morph( 'layer2', { style:'background-position:' + (position_index2 * 2) + 'px 0px;' } );
		new Effect.Morph( 'layer1', { style:'background-position:' + (position_index1 * 3) + 'px 0px;', afterFinish:function() { effect_running = false; } } );
	}
}

Bei Eintritt in die Funktion wir zuerst geprüft, ob eine Bewegung nicht bereits läuft, falls das nicht der Fall ist, werden für die unterschiedlichen Bewegungs-Arten die neuen Werte für die Hintergrund-Position des Hintergrundbildes berechnet und anschließend mit dem Effekt “Morph” gesetzt. Je näher der Layer an der “Kamera” ist, um so mehr (schneller) wird er bewegt, wodurch dem Betrachter eine dritte Dimension vorgegaukelt wird.

Wer das vollendete Versuchsobjekt betrachten möchte, der kann das nun gerne tun und noch einen Blick in den Quellcode der Seite werfen. Ich habe den Code noch um einige Kleinigkeiten erweitert, z.B. um die Steuerung per Pfeiltasten.

Natürlich ist das mal wieder sinnloses eyecandy, denkbar wäre aber, ein schickes Menü damit zu realisieren.

E-Mail Adresse vor Spam-Robots schützen

Marc — Tue, 03 Nov 2009 12:16:39 +0000

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( 'post'+'@'+'thegeek'+'.'+'de' );

	// Oder auch so [prototype]
	$('my_mail_adress').update( 'post'+'@'+'thegeek'+'.'+'de' );

Wichtig ist noch folgendes:

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. :-)

AJAX loading Grafik neben dem Mauszeiger anzeigen

Marc — Tue, 27 Oct 2009 12:31:07 +0000

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.

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.

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. ;-)

WordPress dazu bringen Seiten per AJAX zu laden

Marc — Fri, 23 Oct 2009 13:37:48 +0000

Wer im Browser sein Javascript aktiviert hat, der wird sicherlich sehen, dass beim Klicken eines Links der Content hier dynamisch geladen wird. Um das in meinem WordPress Theme zu realisieren, habe ich zwei einfache JavaScript Funktionen geschrieben. Als JS Bibliotheken nutze ich dafür Prototype und Scriptaculous, es ginge aber auch sicherlich mit JQuery.

Vorteil der Lösung: Wenn ein Fehler auftritt, oder im Browser kein JavaScript aktiviert ist, dann funktioniert die Seite ganz normal, was nebenbei auch sehr Suchmaschinen freundlich ist.

Die erste Funktion “fixLinks” die ich nutze, hat den Zweck an alle Links, die nicht bestimmten Kriterien entsprechen – z.B. Links auf Bilder, externe Links oder aber Links in WordPress Backend – eine “onclick” Aktion anzufügen. Die neue “onclick” Aktion des Links ruft dann die zweite Funktion “get_page” auf, welche die Seite läd und mit einem netten Effekt dann anzeigt.

function fixLinks()
{
	var myLinks = document.links;
	var myBrowserType = (window.attachEvent ? 1 : (window.addEventListener ? 2 : 0));
	var myDomain = 'thegeek.de';
	for( var i = 0; i < myLinks.length; i++ )
	{
		// Get the href
		myHref = myLinks[i].href.toString();
		// Get the onclick action
		myOnClick = myLinks[i].onclick ? myLinks[i].onclick : '';
		// Only attack onclick action, if not jscript links, images, wp-admin features and internal link
		if( 	myOnClick == ''
			&& myHref.indexOf( "#" ) != (myHref.length - 1)
			&& myHref.indexOf( "javascript:" ) == -1
			&& myHref.indexOf( "wp-admin" ) == -1
			&& myHref.indexOf( "#respond" ) == -1
			&& myHref.indexOf( "/trackback" ) == -1
			&& myHref.indexOf( "/feed" ) == -1
			&& myHref.indexOf( "/wp-login" ) == -1
			&& myHref.indexOf( ".jpg" ) == -1
			&& myHref.indexOf( ".gif" ) == -1
			&& myHref.indexOf( ".png" ) == -1
			&& myHref.indexOf( myDomain) != -1
		)
		{
			switch( myBrowserType )
			{
				case 1:
					Event.observe( myLinks[i], 'click', function( e ) { if( !get_page( this.href ) ) e.stop(); } );
					break;
				case 2:
					myLinks[i].setAttribute( "onclick", "return get_page( this.href );" );
					break;
				default:
					// Do nothing
			}
		}
	}
}
// body onload="fixLinks()" und die Sache läuft. :-)

Die zweite Funktion bewegt zuerst den Inhalt an die beim Init ermittelt Position außerhalb des Bildschirms und läd dann per asynchronem HTTP Request die neue Seite. Der Inhalt der Seite ist im Theme mit einem HTML Kommentar gekennzeichnet und wird mittels Regular Expression ermittelt, dann in den Layer eingefügt, um die Seite danach wieder an die ursprüngliche Position zu bewegen. Keine Ahnung, ob's im IE klappt, ist mir allerdings auch ziemlich egal. :-)

Sollte etwas schief gehen, dann gibt die Funktion "true" zurück, womit der Klick auf den Link ganz normal ausgewertet wird. Hat alles geklappt, liefert die Funktion "false" zurück und der Browser folgt dem angeklicktem Link dann nicht. So ist auf jeden Fall gewährleistet, dass die neue Seite angezeigt wird - auf die synchrone oder asynchrone Art.

	var	c_w = $('content').getWidth();
	var	c_x = $('content').viewportOffset()[0];
	var	c_leave = (c_x + c_w) * -1;
	var	c_come = c_leave * -1;
	var	c_search = /()((?:.|[\r\n])*?)()/mgi;
	var	get_page_return_code = false;
	var	effect_running = false;
	function get_page( uri )
	{
		get_page_return_code = false;
		if( effect_running == false )
		{
			effect_running = true;
			new Effect.Move( 'content', { x: c_leave, y: 0, mode: 'relative', duration:0.5,
				afterFinish:function() {
					new Ajax.Request(	uri, {
									method:'get',
									onSuccess: function( r ) {
											$('content').update( '' );
											SearchResult = c_search.exec( r.responseText );
											while( SearchResult != null )
											{
												if( SearchResult[ 2 ] )
													$('content').update( SearchResult[ 2 ] );
												SearchResult = c_search.exec( r.responseText );
											}
											new Effect.Move( 'content', { x: c_come, y: 0, mode: 'relative', duration:0.5, afterFinish:function () {effect_running = false;} } );
											fixLinks();
									},
									onFailure: function( r ) {
										get_page_return_code = true;
										effect_running = false;
									}
					});
				}
			});
		}
		return get_page_return_code;
	}

Klar handelt es sich hier um ziemliches sinnfreies Eyecandy. Ich mag Eyecandy.