Tabellen gestalten leicht gemacht

Mit tablecloth hat man ein ausgezeichnetes mittel um per JavaScript Tabellen optisch aufzubereiten und sogar dem Nutzer die Möglichkeit zu geben Einzelne Spalten und Datensätze zu markieren. So verliert man nichts mehr in längeren Tabellen aus den Augen!

Man könnte zum Gedanken kommen, dass diese Farbwechsel Serverseitig über reincodierte CSS Klassen gelöst wurden, aber nein: Das ganze macht tablecloth wie von selbst. Das heißt man hat keine Probleme mehr beim mitzählen und auch das Nachladen von Content via AJAX unterbricht nicht den Farbwechsel.

Auch hier werkelt wieder Tablecloth. Der Nutzer hat den Datensatz “Technische Universität Kaiserslautern” angeklickt. Die Maus befindet sich jedoch über dem Datensatz zur Technischen Universität Dresden (hellgrün hervorgehoben).

Die Farben lassen sich natürlich an die individuellen Bedürfnisse mit CSS sehr leicht anpassen.

Alles was man einstellen muss ist “Select on Click”, “Highlight Columns” oder “Highlight Rows” und dazu eben die passenden CSS Klassen schreiben (oder das Beispiel CSS nehmen). Jedem TR Wert wird die Classe “odd” oder “even” von tablecloth zugewiesen und schon kann der Spaß losgehen. Und Wie man auch in dem Beispielscreenshots sieht, ist es auch gar kein Problem die Überschriften außen vor zu lassen.

Das ganze gibt's übrigens hier: http://cssglobe.com/lab/tablecloth/

Google Maps und jquery

Google hat ein recht mächtiges JavaScript API für Google Maps erschaffen. Dennoch ist es schwer damit dynamischen Content zu erstellen, weil man sich erst mal quer durch das ganze API lesen muss.

Mit gMap geht das in Kombination mit jQuery ganz leicht!

$("#map").gMap();

Und schon ist die Weltkarte erzeugt. 

Klar ist: So eine Karte braucht man recht selten und auch den Straßenkartentyp wird man nicht immer brauchen. Hier lässt sich gMap sehr leicht anpassen. So ist ein Aufruf mittels 

$("#map").gMap({ maptype: G_PHYSICAL_MAP });

schon genug um den Kartentyp zu ändern. Hierbei unterstützt das Plugin übrigens alle typischen Karten der Maps API: G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_DEFAULT_MAP_TYPES, G_PHYSICAL_MAP

Jetzt wissen wir wie man die Kartenart ändern. Aber wie komme ich an einen bestimmten Ort? Und wie zoome ich rein? Und überhaupt kann man diese netten kleinen Luftballons auch reinsetzen und gleich noch Tooltipps dazu ausgeben?
Klar: 

Obige Karte wurde mit folgendem Code erzeugt:

$("#map").gMap({ markers:[{address: "Technische Universität Kaiserslautern Gottlieb-Daimler-Straße 47 67663 Kaiserslautern", html: "Technische Universität Kaiserslautern",   popup: true  }],
  zoom: 7,
                 maptype: G_HYBRID_MAP  });

Spart man sich “popup:true” so ploppt der Tooltip beim Luftballon erst auf, wenn man drauf klickt. Die Location lässt sich übrigens auch mit echten Koordinaten machen, aber da die TU Kaiserslautern für Google Bekannt ist, ist das alles kein Problem – wie es auch mit jeder anderen Adresse kein Problem wäre.Im übrigen kann man auch sehr leicht mehrere Marker verwenden.

Das ganze gibts übrigens hier zum herunterladen – sehr gut erklärt mit noch viel mehr Beispielen als beim mir gerade: http://gmap.nurtext.de/download.html

jQuery Title Alert

Wenn der User einmal den Tab gewechselt hat, aber die eigene Webseite dennoch die Aufmerksam des Nutzers auf sich ziehen will, gibt es recht wenige diskrete Möglichkeiten, dafür sehr viele, die Benutzer mehr nerven als sie ihnen helfen.

Enthält die Webseite beispielsweise eine Chat Funktion, so möchte ein User natürlich informiert sein, wenn er eine neue Nachricht erhält, was er nicht will, sind haufenweise PopUps oder pausenlose “Blongtöne”, die ihn bei seiner Arbeit unterbrechen.

Eine sehr schöne Möglichkeit bietet hierzu jQueryTitleAlert. Es ermöglicht entweder den Seitentitel zu ändern oder einen “blinkenden Wechsel” zwischen der Meldung oder dem eigentlichen Seitentitel zu machen. Hierbei wird der User informiert und dennoch nicht gestört.

Wie funktioniert das ganze nun?

Zunächst einmal muss die jquery.titlealert.js eingebunden werden.

Danach kann man per $titleAlert(“Blinkende Nachricht”); auch schon loslegen. Das ist alles was man braucht um eine Blink-Nachricht abzusetzen. Natürlich geht es auch deutlich individueller!

var newtitle="Nachricht von Peter!";
$.titleAlert(newtitle, {
requireBlur:true,
stopOnFocus:true,
duration:0,
interval:700
});
Hierbei wird sobald man wieder den Tab betritt nur noch der eigentliche Titel angezeigt, das blinken wird unendlich oft gemacht (duration:0) und 700ms ist das blink-Intervall lang. Aktiviert man “requireBlur” wird die Nachricht nur angezeigt, wenn der User gerade einen anderen Tab offen hat.

Den Download gibt's übrigens hier: http://heyman.info/2010/sep/30/jquery-title-alert/

AnythingSlider

Es gibt jede Menge jQuery Plugins die Bilder ineinander überblenden aber AnythingSlider hebt sich hier von der Masse ab: Es slided wirklich alles und ist dabei noch stark anpassbar.

Es unterstützt sowohl das direkte Anwählen der einzelnen Inhaltsseiten als auch das “links”-“rechts” gleiten des Contents.Außerdem hat es eine Start-Stop-Automatik, die das gleiten verhindert, während die Maus über dem Content liegt.

Außerdem definiert es Anchors im HTML Code, sodass man sogar aus anderen Seiten heraus auf bestimmte Seiten des Sliders verlinken kann.

Ideal ist AnythingSlider für sogenannten “Featured Content”.

Herunterladen kann man ihn übrigens hier: https://github.com/ProLoser/AnythingSlider/downloads

Und die Dokumentation gibts hier: https://github.com/ProLoser/AnythingSlider/wiki