Kategorie Archiv: Demo

In dieser Kategorie befinden sich alle Beiträge die grundsätzlich ein Tutorial sind und somit ein Beispiel (Demo) und einen Quellcode zum herunterladen beinhalten.

Geo Location Java Script: Mit Java Script Ortung mobiler Endgeräte durchführen

Google Latitude

Ortung für mobile Endgeräte nur mit Java Script

Mobile Endgeräte werden immer wichtiger bei der Konzeption von Internetseiten und -anwendungen. Ebenso die damit einhergehende Möglichkeit die Geräte über GPS oder über das GSM Netz zu orten um ortbasierte Dienste anbieten zu können.

Dabei muss jedoch nicht in jedem Fall eine App auf dem Handy installiert werden, die auf den eingebauten GPS Sensor zugreift, für viele Geräte genügt schon die Java Script Library Geo Location Java Script in Verbindung mit Google Gears. Dies lässt eine Ortung über moderne Browser von normalen Computern zu, aber auch auf mobilen Endgeräten.

Weiterlesen

Abgelegt unter: Demo, Java Script, jQuery | Schlagworte: , , , , | Kommentar verfassen

Google Translate API per Javascript nutzen um Inhalt in verschiedenen Sprachen darzustellen

Google TranslateDavid Walsh hat in seinem Blog vor kurzem einen interessanten Artikel verfasst. Dabei hat er gezeigt, wie mit Hilfe von Java Script auf die Ressourcen der Google Translate API zurückgegriffen werden kann. Da ich an dieser Möglichkeit gefallen gefunden habe, stelle ich hier die jQuery basierte Lösung vor.

Weiterlesen

Abgelegt unter: Demo, jQuery | Schlagworte: , , , | Kommentar verfassen

Automatisches Update von Informationen wie bei Twitter mit selbstaufrufenden Java Script Funktionen

Twitter Automatic Update

Automatische Updates bei Twitter

Manchmal ist es gewünscht, dass verschiedene Elemente auf einer Webseite stets aktuell sind, auch während der Nutzer ohne einen Reload auf der Seite verharrt. In solchen Fällen hilft Java Script (mit AJAX) und PHP. Dabei wird häufig die Java Script Funktion setInterval(); verwendet, die jedoch mehr als ungeeignet ist. In diesem Artikel erkläre ich wieso setInterval(); nicht verwendet werden sollte und wie die Umsetzung optimal geschieht.

Weiterlesen

Abgelegt unter: Demo, Java Script, jQuery, PHP | Schlagworte: , , | Kommentar verfassen

Bilderinformationen bei MouseOver wie bei Google Images mit CSS

Google Images

Google Images

Google hat die Bildersuche auf der amerikanischen Variante google.com schon angepasst. Dabei werden nach einer getätigten Suche nur noch die Bilder an sich gezeigt, ohne weitere Metainformationen wie bisher. Will man diese Informationen sehen, genügt es mit der Maus auf das gewünschte Bild zu fahren. Das Bild erhält dann einen Rahmen, wird herausgestellt und die Informationen werden sichtbar. Diesen Effekt möchte ich im folgenden Artikel nachahmen und zeigen mit welchen einfachen Mitteln dies bewerkstelligt werden kann. Dazu nutze ich hier nur etwas CSS.

Weiterlesen

Abgelegt unter: CSS, Demo | Schlagworte: , , , , | Kommentar verfassen

jQuery: Keyboard Navigation – navigieren mit der Tastatur (inklusive Keycode Tabelle)

Häufig möchte man dem Nutzer aus Gründen der Usability auch die Möglichkeit zur Verfügung stellen, die Webanwendung oder gezielte Teile (z.B. bei Autocompletion) mit der Tastatur zu navigieren. In diesem Beitrag zeige ich, wie dies mit jQuery umgesetzt werden kann. jQuery stellt dazu Events bereit. Zusätzlich müssen den s.g. Keycodes zu den Tasten bekannt sein, die mit Funktionen belegt werden sollen.

Weiterlesen

Abgelegt unter: Demo, jQuery | Schlagworte: , , , , | Kommentar verfassen

jQuery Expandable: Textfelder die sich dem Schreibenden anpassen

Man könnte beinahe behaupten, dass ich eine “nützliche jQuery-Plugins”-Reihe begonnen hätte. Tatsächlich ist es jedoch so, dass ich derzeit viele dieser Plugins für eigene Projekte benötige und die wirklich hilfreichen hier gleich vorstelle.

In diesem Beitrag soll es um Textareas gehen, die sich während des Schreibens vergrößern und somit dem Verfasser immer genügend Platz bieten (dieses Plugin steht also im Gegensatz zu jQuery CharCount). Das dazugehörige Plugin trägt dabei den Namen jQuery Expandable.

Weiterlesen

Abgelegt unter: Demo, jQuery | Schlagworte: , , , , , | Kommentar verfassen

jQuery CharCount: Auf den Punkt gebracht

Die Begrenzung von Zeichen hat das derzeitige Jahrzehnt schon jetzt geprägt. Diese Aussage klingt auf den ersten Blick etwas seltsam, ist jedoch wahr. Twitter hat sich als 140-Zeichen Microblogging-Dienst durchgesetzt und ist in aller Munde. Die Begrenzung der Zeichen in den Textnachrichten kann nun auch mit Hilfe eines jQuery Plugins nachgebaut werden.

jQuery CharCount

jQuery CharCount

Dieses Plugin möchte ich in diesem Artikel kurz vorstellen: jQuery CharCount.
Weiterlesen

Abgelegt unter: Demo, jQuery | Schlagworte: , , , , , | Kommentar verfassen

jQuery TinyTips: Hilfreiche Hinweise für die Benutzer einfach mit jQuery gestalten

jQuery TinyTips 1.1

jQuery TinyTips

Manchmal ist es auf einer Webseite notwendig den Nutzer mit zusätzlichen Informationen zu versorgen – dennoch ist es nie gewollt ihn gleich zu Beginn mit Informationen zu überfluten. Dieses Dilemma lässt sich zumindest zum Teil durch das jQuery Plugin TinyTips (derzeit in Version 1.1) lösen. Die Funktionsweise und die nötigen Schritte zur Anwendung erkläre ich in diesem Artikel.

Weiterlesen

Abgelegt unter: Demo, jQuery | Schlagworte: , , , | Kommentar verfassen

jsFiddle: Quellcode online testen für Mootools, jQuery, YUI, Dojo und viele mehr

jsFiddle ist ein ehrgeiziges Projekt. Es ermöglicht das Schreiben von Quellcode (HTML, CSS, Javascript) auf einer Webseite auf der dieser dann auch gespeichert und ausgeführt werden kann. Sehr hilfreich ist dabei, dass die bekannten Java Script Frameworks gleich zu beginn mit ausgewählt werden können. Das Projekt dabei basiert auf der Mootools Shell, einem offiziellen Mootools-Projekt.

Weiterlesen

Abgelegt unter: Demo, Java Script, jQuery, Tools | Schlagworte: , , | Kommentar verfassen

Toolbar für die eigene Webseite mit CSS und jQuery

Wie ihr sicherlich schon bemerkt habt, befindet sich im Kopf der Seite eine neue Toolbar, die sich erst nach etwas Scrollen nach unten einblendet und auch wieder aus dem Sichtfeld verschwindet, wenn ihr wieder nach oben scrollt. Diese Toolbar ermöglicht es Euch die hier verfügbaren RSS-Feeds zu abonnieren oder diese Seite als Social Bookmark zu speichern. Natürlich würde es mich sehr freuen, wenn ihr dies fleißig nutzt – damit aber auch ihr etwas davon habt, stelle ich den Quellcode hier zur Verfügung und erläutere dazu in einigen Sätzen die Funktionsweise und den Aufbau.

Weiterlesen

Abgelegt unter: CSS, Demo, jQuery | Schlagworte: , , | Kommentar verfassen