Jan 14 2008

DHTML Tooltip mit nicht auslesbaren Texten

Tag: JavascriptTobi @ 12:11 am

Im letzten Blogpost stellte ich das DHTML Tooltip Script vor. Ich wurde jedoch vor die Aufgabe gestellt, die Tooltip-Texte nicht mehr direkt in den Quelltext abzulegen, sodass sie von Suchmaschinen wie Google nicht ausgelesen werden können. Das bestehende Script wollte ich nicht anrühren, sondern ein eigenes Script (infobox.js) schreiben, welche die gewünschte Funktionalität realisiert.

Im Header der Seite müssen also folgende Dateien eingebunden werden:

<link rel="Stylesheet" type="text/css" href="tooltip.css" media="screen" />
<script language="javascript" type="text/javascript" src="toolTip.js"></script>
<script language="javascript" type="text/javascript" src="infobox.js"></script>

Die Elemente, auf die das Tooltip angewendet werden soll, müssen sich innerhalb eines Elementes mit der ID „boxes“ befinden. Jedes Element, das einen Tooltip anzeigen soll, wird mit genau dem Klassennamen versehen, welches das anzuzeigende Element als ID besitzt.

<div id="boxes">
<a class="t_0"><img class="png" src="qmbox.png" alt="Box1" /></a> <!-- gibt "Tooltip 1" aus -->
<a class="t_1"><img class="png" src="qmbox.png" alt="Box1" /></a> <!-- gibt "Tooltip 2" aus -->
</div>

Das Script infobox.js ist wie folgt aufgebaut:

codeToAdd = Array();
codeToAdd[0] = '<div class="tooltipsammlung">';
codeToAdd[1] = '<div class="tooltip" id="t_0"><b>Tooltip 1</b></div>';
codeToAdd[2] = '<div class="tooltip" id="t_1"><b>Tooltip 2</b></div>';
codeToAdd[7] = '</div>';

function bindTooltip() {
	document.getElementsByTagName("body")[0].innerHTML += codeToAdd.join('');

	path = document.getElementById("boxes").getElementsByTagName("a");

	for ( var i = 0; path[i] ; i++ ) {
		if ( path[i].className ) {
			path[i].onmouseover = function() { initTooltip(this.className); };
			path[i].onmouseout = function() { hideTooltip(); };
		}
	}
}

if ( window.addEventListener ) {
	addEventListener( "load", bindTooltip, false );
} else {
	attachEvent( "onload", bindTooltip );
}

Die Funktion bindTooltip() bindet zuerst das Array „codeToAdd“ (also die anzuzeigenden Tooltips) in den <body> der Seite ein. Danach werden alle <a> Elemente innerhalb von „boxes“ ermittelt. Den gefundenen Elementen werden die Javascript Funktionen initTooltip() und hideTooltip() zugewiesen.

Zur Demoseite

Hier die benötigten Dateien:

Hier gibt es die benötigten Dateien:

tooltip.css
infobox.js
toolTip.js


Jan 11 2008

DHTML Tooltips

Tag: JavascriptTobi @ 12:49 pm

Für Tooltips über HTML Elementen nutze ich gern das DHTML Tooltip Script von Mikko Mensonen. Der Vorteil ist, dass sich innerhalb des Tooltip beliebiger HTML Code befinden darf. Das Script lässt sich außerdem sehr einfach einbinden und anwenden.

Zunächst eine kurze Einführung:

Man fügt zuerst das Script im Seitenheader ein, zusammen mit einem Stylesheet, welches das Tooltip und dessen Inhalt formatiert, sowie die Ausgabe der Tooltip Texte auf der Seite verhindert:

<script src="toolTip.js" language="javascript" type="text/javascript"></script>
<link href="tooltip.css" rel="Stylesheet" type="text/css" media="screen" />

tooltip.css sieht wie folgt aus:

.tooltip {
	position:absolute;
	display:none;
	border:1px #000000 solid;
	padding:5px;
	width:350px;
	z-index:2000;
}
.tooltipMouseover {
	position:absolute;
	display:block;
	border:1px #000000 solid;
	padding:5px;
	width:350px;
	z-index:2000;
	top: -100px;
	left: -500px;
}

Als nächstes werden die Tooltip Element innerhalb von <body> eingebunden:

<div class="tooltipsammlung">
<div class="tooltip" id="t_1"><b>Mein Tooltip</b><p>Dies ist mein Beispiel Tooltip</p></div>
</div>

Es werden Elemente definiert (in unserem Fall ein Bild), die beim onmouseover Event einen Tooltip anzeigen und beim onmouseout Event den Tooltip wieder ausblenden sollen:

<a onmouseout="hideTooltip();" onmouseover="initTooltip('t_1');"><img src="images/qmbox.png" height="128" width="128" /></a>

Zuletzt wird noch diese Zeile vor dem schließenden body-Tag </body> eingebunden:

<div id="tooltipMouseover" class="tooltipMouseover"></div>

Und schon funktioniert das Tooltip!

Hier gibt es die benötigten Dateien:

toolTip.js
tooltip.css

Screenshot:

DHTML Tooltip Beispiel

Jan 08 2008

Neue ImageFlow Version 0.8

Tag: Javascript,ToolsTobi @ 3:01 pm

Nach der Version 0.7 ließ ein Update nicht lange auf sich warten. In der aktuellen Version sind folgende Neuerungen enthalten:

  • Kompatibilität für Safari 1.x
  • unbedeutende Performance-Steigerung
  • es wurden die Javascript-Ereignisse onclick und ondblclick für die Bilder hinzugefügt (der Link befindet sich direkt im longdesc Attribut des Image-Tag)
  • verbesserte Bildskalierung, jetzt bleiben alle Bildformate im Haupt-div-Container „imageflow“

ImageFlow runterladen

Einfach auf das folgende Bild klicken, um zu einer von mir erstellten Demo zu gelangen.

ImageFlow 0.8


Jan 05 2008

flot – Diagramme via Javascript erstellen

Tag: Google,Javascript,jQueryPatrick @ 10:41 pm

Flot ist eine Javascript-Bibliothek zum Erstellen von ansprechenden Diagrammen auf einfache Weise. Das dänische Web-Studio Iola entwickelte flot als Plugin für das Ajax-Framework jQuery. Aktuell ist flot in der Version 0.3 verfügbar und wird auf einer Projektseite bei Google Code publiziert.Ich habe ein paar Beispiele erstellt, anhand derer ich die Funktionsweise und die Möglichkeiten von flot aufzeigen will.

Im html-Header müssen zuerst die Javascript-Dateien eingebunden werden. Das wäre zum einen die jQuery- und zum anderen die Flot-Bibliothek. Da Flot die erst mit HTML5 und bisher nur von Firefox unterstützte Canvas-Zeichenoberfläche verwendet, muss zusätzlich die Bibliothek angehangen werden, die Canvas für den Internet Explorer verfügbar macht.

<!--&#91;if IE&#93;><script type="text/javascript" src="excanvas.pack.js"></script><!&#91;endif&#93;-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>

Anschließend kann man beginnen die Diagramme zu positionieren. Dies geschieht über das div-Element, in dem auch gleich die Ausmaße des Plots angegeben werden. Wichtig ist hierbei das id-Element zum eineindeutigen identifizieren des div.

<div id="dia1" style="width: 500px; height: 200px"></div>

Der „Zaubertrick“ zum einfachen Erstellen von Diagrammen geschieht in einer Javascript-Funktion. Zu aller erst legt man einen oder mehrere Datensätze fest (das können festgelegte Werte sein oder Datenpaare, die man mittels einer Schleife sich erzeugen lässt, sein). Im Anschluss ruft man über die plot-Methode des $-Operator die Funktion zum Erstellen des Diagramms auf und gibt dabei alle benötigen Variablen. Hier ein Beispielaufruf:

$(function () {
	var d1 = [[0, 6], [1, 2], [4, 5], [7, 8], [9, 10]];

	$.plot($("#dia2"), [
	{
		color: "rgb(0, 0, 255)",
		data: d1,
		bars: { show: true }
	}
	]);
});

Wie bereits beschrieben, legt man zuerst den Datensatz fest – im Beispiel d1. Ein Datensatz besteht aus einem Array mit beliebig vielen Elementen, wobei jedes Element ein zweidimensionales Array ist. Das erste Datenpaar lautet [0,6], d.h. für x = 0 ist y = 6.

Der Aufruf der $.plot-Methode erwartet bis zu 3 Parameter. Der erste Parameter enthält die id des div, in das der Plot geschrieben werden soll. Mit zweiten Parameter werden der Funktion sowohl die Daten als auch die Art der Darstellung übergeben. Dies geschieht ebenfalls in einem Array. Würde man also 2 Kurven in ein Diagrammm zeichen wollen, würde ein solcher Aufruf etwa die Form $.plot($(„#dia2“), [{data: d1, lines: { show: true }}, {data: d2, lines: { show: true }} ]); haben. Der dritte Parameter ist optional, also keine Pflicht. Über diesen ist es möglich, das Diagramm an die eigenen Bedürfnisse genauer anzupassen.

Folgende Möglichkeiten zur Darstellungen der Daten (2. Parameterteil) sind verfügbar:

  • color – legt Farbe des Graphen fest
  • data – die zu übergebenden Daten
  • label – Bezeichnung / Titel des Graphen (z.B. in der Legende)
  • lines – Darstellung der Daten als Linie
  • bars – Darstellung der Daten als Balken
  • points – Darstellung der Daten als Punkte
  • shadowSize – Größe des vom Graphen erzeugten Schattens

Zum Formatieren der Legende wurden folgende Optionen implementiert (Auszug):

  • show – erwartet true oder false, je nachdem ob die Legende zu sehen sein soll oder nicht
  • noColumns – Anzahl der Legendenspalten
  • position – erwartet als Parameter „ne“, „nw“, „se“ oder „sw“ um festzulegen in welcher Ecke die Legende stehen soll
  • margin – Abstand der Legende vom Diagrammrand
  • backgroundColor – definiert die Hintergrundfarbe
  • backgroundOpacity: setzt den Transparenzwert (zwischen 0.0 und 1.0)

Es existieren noch unzählige weitere Möglichkeiten zum individuellen Anpassen des Diagramms wie zum Beispiel das Fixieren der Achsenausmaße oder das Festlegen eines Rastes. Wer mehr dazu erfahren will, sollte die Dokumentation lesen.

Verglichen mit der Google Chart API bietet Flot zwar weniger Diagrammarten, läuft dafür aber lokal statt stets über Google. Des weiteren finde ich die Chart API weitaus kryptischer und damit bei komplexeren Diagrammen schwerer handhabbar. Für welchen Art man sich letztlich entscheidet, steht jedem frei.


Dez 29 2007

DOMAssistant – eine modulare Javascript-Bibliothek

Tag: Ajax Frameworks,DOMAssistant,JavascriptPatrick @ 10:53 pm

DOMAssistant stellt ähnlich wie jQuery einige sehr leistungsstarke Funktionen zur Verfügung. Die Syntax der beiden Javascript-Bibliotheken ist sehr ähnlich aufbaut. Im Unterschied zu jQuery besteht DOMAssistant aus mehreren Modulen, die man auch einzeln, je nach Bedarf, einbinden kann.

Folgende Module stehen zur Verfügung:

  • DOMAssistant.Core
  • DOMAssistant.AJAX
  • DOMAssistant.Content
  • DOMAssistant.CSS
  • DOMAssistant.Events
  • DOMAssistant.Load

Durch das Einbinden der benötigen Module spart man Traffic und verkürzt damit auch die Ladezeit der Seite, weil wirklich nur das benutze geladen wird.

Das Core-Modul stellt die grundlegenden Funktionen für DOMAssistant zur Verfügung und muss eingebunden werden. Hauptbestandteil davon ist der $-Operator, der benutzt wird um in verkürzter und sehr flexibler Notation auf Elemente zuzugreifen. Des weiteren bietet Core noch die Funktionen elmsByClass, elmsByAttribute, elmsByTag und each um über den Class-, Attribut- und Tag-Namen Elemente manipulieren zu können.

Das Content-Modul bringt einige Funktionen mit um auf den Inhalt von Elementen Einfluss zu nehmen. Im Einzelnen wären dies die Methoden: prev, next,create, setAttributes, addContent, replaceContent und remove. So ist es zum Beispiel mit create möglich relativ einfach neue Elemente samt Attributen zu erzeugen und an beliebiger Stelle in das Dokument zu integrieren.

Die anderen Module bieten spezielle Methoden um das Manipulieren von CSS, das Event-Handling und den Umgang mit Ajax zu vereinfachen.


Dez 26 2007

Script zum automatischen Code-Einrücken

Tag: JavascriptPatrick @ 11:31 pm

Für mich als ein Blogger, der häufig Code-Schnipsel postet, ist es ziemlich umständlich den Code ansprechend formatiert im Blog zu präsentieren. Vor allem What You See Is What You Get-Editoren neigen gern dazu, sämtliche Einrückungen zu entfernen.

Das SyntaxHighlighting-Plugin für WordPress eignet sich sehr gut zum Hervorheben der Codesyntax. Einrücken lässt sich der Code jedoch nicht bzw. nur einem zusätzlichen Editor wie z.B. EditPlus. Man formatiert den Code in EditPlus und fügt ihn dann im Code-Modus des WordPress-Editors ein. Sobald man den Beitrag wieder bearbeitet, verschwindet die Code-Formatierung jedoch. Die einzige Möglichkeit wäre, den Beitrag direkt in der Datenbank (bspw. über phpMyAdmin) zu bearbeiten.

Diesem Umstand wollte ich mich nicht beugen und schrieb eine Javascript-Funktion, die von automatisch sämtliche Einrückungen zur Formatierung vornimmt. Das Ergebnis kann man in folgender Demoseite ansehen. Das Script funktioniert mit CSS, (X)HTML, XML, Javascript und im Grunde jeder Programmiersprache, die eine C-ähnliche Syntax aufweist.
Die Funktionsweise des Scriptes ist schnell erklärt.

Die Funktion autoIndent erwartet als Parameter den Pfad zu dem Element, in dem der automatisch einzurückende Code steht. Das Script holt sich den Code und schreibt diesen zeilenweise in ein Array. Dieses Array wird in einer Schleife durchlaufen, dabei wird jedes Feld (sprich jede Zeile) zuerst von bisherigen Einrückungen befreit und anschließend mit einer neuen Formatierung versehen. Die Variable indents speichert die Anzahl der Einrückungen von links. Beispielsweise, wenn man sich in der 2. {-Klammer befindet, müssen die folgenden Zeilen bis zu }-Klammer um 2 eingerückt werden. Die Anzahl der Einrückungen holt sich die Funktion über die Anzahl der {-Klammern respektive Tags. Zum Erkennen der Klammern und Tags verwendete ich reguläre Ausdrücke.

Die komplette, unkommentierte Funktion sieht so aus:

function autoIndent( path ) {
indents = 0;
code = path.innerHTML;
eArray = code.match( /(.*)\r\n|(.*)(\n)?/gi );
code = „“;

for ( var i = 0; eArray[i]; i++ ) {
eArray[i] = eArray[i].replace(/\r|\n|\n\r|\n\r/gi, „“);
eArray[i] = eArray[i].replace(/^([\s]| | )*/, „“);

if ( eArray[i].match(/\}|<\/[\w]+>/i) && indents > 0) {
eLength = eArray[i].match(/\}|<\/[\w]+>/gi).length;
indents -= eLength;
if ( indents < 0 ) indents = 0; } if ( navigator.appName.indexOf("Internet Explorer") > 0 && i != 0 ) code += „
„;

if ( i != 0 ) code += „\n“;

if ( eArray[i] != „“ ) {
for (var j = 0; j < indents ; j++ ) { code += "    "; } } else { code += " "; } if ( ( eArray[i].match(/\<[\w]+>/i) && eArray[i].match(/\<\/[\w]+>/i) ) || eArray[i].match(/[\w\s;:]+\}/i) ) code += "    "; code += eArray[i]; if ( eArray[i].match(/\{|<[\w]+>/i) ) { indents++; } } path.innerHTML = code; } [/source] Ich habe die Funktion im Internet Explorer (5.01, 5.5, 6 und 7), Firefox (2.0.0.11), Opera (9.50 Beta) und Safari (3.0.4) erfolgreich getestet. Als nächstes werde ich versuchen die Funktion in das oben genannte SyntaxHighlighting-Plugin zu integrieren oder zumindest dafür zu sorgen, dass beide parallel zu einander benutzt werden können.


Dez 25 2007

Fenstergröße und Scrollposition in Javascript auslesen

Tag: JavascriptPatrick @ 1:36 am

In Anlehnung an den Bericht von Mark Wilton-Jones über die Ermittlung der Fenstergröße (sowohl Höhe als auch Breite) und der Scrollposition möchte ich hier ebenfalls darüber berichten.

Grundsätzlich bestehen 3, zum Teil sehr Browser- und Browsemodusabhänige, Funktionen zum Auslesen der Höhe und Breite des angezeigten Fensters mittels Javascript.

window.innerHeight / window.innerWidth

– Unterstützt von den meisten Browsern, jedoch nicht vom Internet Explorer

document.body.clientHeight / document.body.clientWidth

– Unterstützt von vielen DOM-fähigen Browsern, einschließlich des Internet Explorers.

document.documentElement.­clientHeight / document.documentElement.­clientWidth

– Unterstützt von den meisten DOM-fähigen Browsern, einschließlich des Internet Explorers.

Entsprechend dem Grundwissen und der Tabelle auf howtocreate.co.uk bezüglich der Unterstützung in den verschiedenen Browserversionen baut man sich eine Javascript-Funktion zum Auslesen der Größenangabe des Anzeigefensters zusammen:

function getSize() {
	var myWidth = 0, myHeight = 0;

	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
	return [ myWidth, myHeight ];
}

Um die Auszulesen wie weit auf einer Seite gescrollt wurde, verfährt man ganz ähnlich. Wieder stehen 3 Funktionen zur Verfügung.

window.pageYOffset / window.pageXOffset

– Unterstützt von den meisten Browsern, jedoch nicht vom Internet Explorer

document.body.scrollTop / document.body.scrollLeft

– Unterstützt von den einigen Browsern, einschließlich des Internet Explorers.

document.documentElement.scrollTop / document.documentElement.scrollLeft

– Unterstützt von den einigen Browsern, einschließlich des Internet Explorers (strict-mode).

Auch diesmal erstellt entsprechend diesem Wissens eine Javascript-Funktion, die uns die gewünschten Werte liefert:

function getScrollXY() {
	var scrOfX = 0, scrOfY = 0;

	if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		//DOM compliant
		scrOfY = document.body.scrollTop;
		scrOfX = document.body.scrollLeft;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		scrOfY = document.documentElement.scrollTop;
		scrOfX = document.documentElement.scrollLeft;
	}
	return [ scrOfX, scrOfY ];
}

Dez 23 2007

Hervorheben von verweis-sensitiven Grafiken

Tag: Javascript,ToolsTobi @ 3:13 pm

Landkarten werden auf Webseiten immer wieder gebraucht. Wäre es nicht schön, wenn man bestimmte Gebiete beim Mouseover hervorheben könnte? Das von Christian Effenberger entwickelte Javascript Mapper.js 1.0 macht dies möglich. Diese Bibliothek ermöglicht das Hervorheben von Flächen einer verweis-sensitiven Grafik (einer so genannten „Image Map“).

Die Nutzung dieser Bibliothek ist sehr einfach. Zuerst muss sie im Header der Seite eingebunden werden:

<script type="text/javascript" src="mapper.js"></script>

Danach definieren wir die Image Map:

<img class="mapper noborder iopacity50 icolorff0000" src="my_image.jpg" usemap="#my_map" width="343" height="425" border="0" alt="" />
<map name="my_map">
<area shape="poly" title="Titel des Bereiches" coords="295,341, 296,337, 293,336, <!-- weitere Koordinaten -->" alt="Titel" />
<!-- alle weiteren Bereiche-->
<area ... />
</map>

Den einzigen Nachteil sehe ich darin, dass es aufwendig ist, die hervorzuhebenden Bereiche zu definieren.

Mit einem Klick auf die Grafik gelangt man zu Demos auf der Entwicklerseite.

Mapper.js 1.0


Dez 23 2007

Javascript-Benchmark

Tag: Allgemeines,JavascriptPatrick @ 1:04 am

Die Seite Coding Horror veröffentlichte vor wenigen Tage einen für Javascript- und im speziellen Ajax-Entwickler interessanten Performancevergleich der Browser in Sachen Ausführungsgeschwindigkeit von Javascript. Der mit Hilfe des Javascript-Benchmarks Sunspider erstellte Bericht testete die aktuellen Browser (Firefox 2, Opera 9.5, Internet Explorer 7 und Safari 3.0.4) u.a. in den Bereichen 3D-Rendering (Fließkommaberechnung), mathematische Funktionen, reguläre Ausdrücke, Kontrollstrukturen und String-Funktionen. Dabei stellte sich heraus, dass der sehr beliebte und kostenlose Firefox nur dank des schlechten String-Handlings des Internet Explorer 7 nicht auf dem letzten Platz landete. In 3 der 8 Szenarien schnitt der Firefox deutlich schlechter als die Konkurrenz ab, vor aber im Umgang mit Bit-Operationen.

Der komplette Test kann bei den Kollegen von www.codinghorror.com angesehen werden.


Dez 22 2007

ImageFlow jetzt in der Version 0.7

Tag: Javascript,ToolsTobi @ 11:45 pm

Vor kurzem hatten wir über die Javascript Cover Flow Bildergalerie „ImageFlow 0.6“ berichtet. Nun wurde die Version 0.7 veröffentlicht.

Die aktuelle Version bringt folgende Änderungen mit sich:

  • es wurden verschiedene Cursor-Typen hinzugefügt
  • es wurden Konfigurations-Variablen hinzugefügt
  • Änderungen in der Implementierung: der gesamte Javscript Code wurde in einer einzelnen Datei (imageflow.js) zusammen geführt
  • die Bildunterschrift wird direkt im alt Attribut des <img> Tag definiert

ImageFlow 0.7 runterladen

Einfach auf das Foto klicken, um zu einer von mir erstellten Demo zu gelangen.

Image Flow 0.7


« Vorherige SeiteNächste Seite »