Advitum.de auf Google+

Kategorie: JavaScript

Kategorie: JavaScript

Alle Artikel, die mit JavaScript zu tun haben, kommen hier rein.

Google-Map richtig auf der eigenen Internetseite einfügen

Google-Map richtig auf der eigenen Internetseite einfügen
Von am
Kategorien: Arbeit, CSS, Design, JavaScript, Programmieren, Tutorials

Es gibt ein paar Seitenelemente, die meine Kunden eigentlich immer auf ihrer Internetseite haben wollen—ein Beispiel hierfür ist eine Karte. Dank Google ist das Einbetten von Karten in Internetseite fast lächerlich einfach: Google-Maps öffnen, Position wählen und Code kopieren, so einfach kann das Leben sein—zumindest, wenn man keine besonderen Anforderungen hat.

Das Problem ist aber, das der durchschnittliche Kunde immer irgendwelche Extrawünsche hat—das fängt schon beim eigenen Firmenlogo als Marker-Icon an. Hier stößt das Kopieren und Einfügen des Embed-Codes von Google an seine Grenzen und nach einer kurzen Recherche ist klar: Wir müssen das mit der Google-Maps-API machen, das kann ja nicht so schwer sein—ist es aber doch.

Ich weiß nicht, ob es nur mir so geht, aber meiner Meinung nach ist das Referenzhandbuch der Google-Maps-API v3 extrem unübersichtlich. Ich musste stundenlang rumsuchen und rumprobieren, bis alles so war, wie ich es wollte. Deshalb will ich in diesem Artikel anhand eines Beispiels zeigen, was ich gefunden habe. Artikel weiterlesen

jQueryUI Slider auf feste Werte begrenzen

jQueryUI Slider auf feste Werte begrenzen
Von am
Kategorien: JavaScript, jQuery, Programmieren, Tipps

In meinem letzten Artikel habe ich gezeigt, wie man die jQueryUI-Silder auch auf dem iPad zum laufen bringen kann. Auf ähnliche Weise kann man die Slider-Funktion auch auf andere mobile Geräte portieren und mit der dritten Betaversion von jQuery Mobile halten intuitive und einfache Bedienung von Web-Apps weiter Einzug auf die Handys.

Das nehme ich zum Anlass, um einen weiteren Artikel über Slider zu schreiben, diesmal geht es aber darum, wie man einen Schieberegler auf feste Werte festlegen kann. Der Nutzer soll also nicht stufenlos Werte wählen, sondern nur zum Beispiel die Werte 0, 5, 10, 20, 100 und 150 wählen können. Standardmäßig ist diese Funktion nicht vorgesehen, deshalb muss man den normalen Slider etwas »aufbohren«. Artikel weiterlesen

Nutzeroberflächen fürs iPad – jQuery UI Slider

Nutzeroberflächen fürs iPad – jQuery UI Slider
Von am
Kategorien: Arbeit, jQuery, Quick-Tips, Tipps, Tutorials

Mittlerweile sollte ja bekannt sein das ich ein jQuery-Junkie bin. Und mit »Junkie« meine ich, dass ich alles nur noch mit jQuery mache – dynamische Nutzeroberflächen, Webanwendungen ohne ein einziges Neuladen der Seite oder eben auch intuitive Bedienelemente wie zum Beispiel Slider. Für Nutzeroberflächen und Slider benutze ich, ganz konkret gesagt, das jQuery-Plugin jQuery UI. Wer jQuery kennt kennt vermutlich auch jQuery UI – das soll ja auch nicht das Thema des Artikels werden – ein paar Links zum Thema findet ihr am Ende aber trotzdem dazu. Artikel weiterlesen

Wie eine einfache Tagcloud zur schlafraubenen Hürde wird

Wie eine einfache Tagcloud zur schlafraubenen Hürde wird
Von am
Kategorien: Arbeit, Design, JavaScript, jQuery, Programmieren

Letzte Woche bekam ich von einem Designer ein Design für eine Internetseite vorgelegt, in der er ein Wordle zur Darstellung der häufigsten Suchbegriffe benutzt wurde. Ein Wordle zu erstellen ist im Grunde ganz einfach, gibt es dafür doch eine einfache Online-Anwendung. Einziger Nachteil: jedes Mal, wenn sich die Begriffe ändern, muss das Wordle von Hand neu erzeugt werden. Da in meinem Fall die Wörter jedoch dynamisch erzeugt werden, stellt dies eine echte Hürde dar.

Auf den ersten Blick erschien mir JavaScript für diese Aufgabe am geeignetsten, auf den zweiten Blick auch, also machte ich mich an die Arbeit und schrieb ein kleines jQuery-Plugin – zumindest dachte ich, es würde ein kleines Plugin werden. Doch schnell tauchten die ersten Probleme auf. Ich konnte zwar recht einfach mit outerWidth() und outerHeight() die Größe, die das Wort brauchen würde, ermitteln, aber wie sollte der Algorithmus aussehen, der diese dann platziert? Artikel weiterlesen

Ajax-Scripts kinderleicht debuggen – jQuery Quick-Tip

Ajax-Scripts kinderleicht debuggen – jQuery Quick-Tip
Von am
Kategorien: JavaScript, jQuery, Programmieren, Quick-Tips, Tipps

Mit jQuery sind Ajax-Aufrufe wirklich kinderleicht. So kann man zum Beispiel ganz einfach auf folgende Weise Daten vom Server per Get-Request bekommen:

$.get('data.php', function(data) {
  //do something
});

In der Variable data steht dann die Antwort des Servers, im Normalfall also der Inhalt der Seite oder das, was vom PHP-Script ausgegeben wird. Artikel weiterlesen

jQuery: Bilder zuschneiden direkt im Browser

jQuery: Bilder zuschneiden direkt im Browser
Von am
Kategorien: JavaScript, jQuery, PHP, Programmieren, Tutorials

Für die meisten Bildergalerien hat es bisher ausgereicht, wenn ein zufälliger Bildausschnitt als Vorschaubild ausgeschnitten wird. Deshalb war es bisher nicht nötig, dem Nutzer die Möglichkeit zu geben, direkt im Browser einen Bildausschnitt zu wählen. Doch vor kurzem stand ich vor der Aufgabe, für eine junge Fotografin aus Iserlohn eine Bildergalerie zu programmieren. Da die Bilder auf der Internetseite im Vordergrund stehen sollten, mussten sie besser in Szene gesetzt werden.

In diesem Artikel soll es darum gehen, wie man eine Nutzeroberfläche zum Zuschneiden von Bildern realisieren kann. Mit dem JavaScript-Framework jQuery und ein wenig PHP ist dies tatsächlich nicht schwer. Artikel weiterlesen

jQuery UI – intuitive Interaktion zwischen Nutzer und Anwendung

jQuery UI – intuitive Interaktion zwischen Nutzer und Anwendung
Von am
Kategorien: CSS, Design, JavaScript, jQuery, PHP, Tutorials

Usability gehört zu den wichtigsten Kriterien für gutes Webdesign. Egal wie toll eine Internetseite aussieht, wenn der Benutzer die Navigation nicht versteht oder es nicht schafft, seine Bestellung abzuschicken, hat die Seite ihren Zweck verfehlt.

Mithilfe von JavaScript lassen sich viele Aufgaben für den Nutzer drastisch vereinfachen. In diesem Artikel geht es darum, wie man mit jQuery UI intuitive und einfach zu bedienende Benutzeroberflächen schaffen kann. Artikel weiterlesen

Fotos in Alben ordnen – Drag & Drop mit jQuery

Fotos in Alben ordnen – Drag & Drop mit jQuery
Von am
Kategorien: jQuery, Tutorials

jQuery hat das Leben vieler Web Entwickler drastisch vereinfacht. Das JavaScript-Framework bietet die wichtigsten Funktionen für eine gute Benutzeroberfläche.

In diesem Artikel möchte ich euch die Umsetzung von Drag & Drop anhand eines einfachen Beispiels verdeutlichen. Artikel weiterlesen

BBCode-Buttons und jCaret

BBCode-Buttons und jCaret
Von am
Kategorien: jQuery, Tipps

Bei vielen Foren gibt es über dem Textfeld, in dem man einen Beitrag verfasst, eine Buttonbar, mit der automatisch BBCodes in den Text eingefügt werden können. Ich habe lange gesucht, wie man so etwas am Besten machen kann. Und bis vor kurzem war das Beste, was ging, den Code an das Ende des Textfeldes zu hängen. Sehr unpraktisch! Ich wollte eigentlich, dass sich zum Beispiel der BBCode [b] direkt um den Text legt, der in dem Textfeld ausgewählt ist. Aber das schien unmöglich.

Doch das Wunderwerkzeug jQuery lieferte mir, wie immer, alle Werkzeuge an die Hand, die ich dafür brauchte. Ich stieß per Zufall auf das Plugin jCaret. Was macht dieses Plugin? Im Grunde kann man, einfach gesagt, die Auswahlposition in einem Textfeld auslesen. Naja, jCaret kann noch ein bisschen mehr, aber dies war für mich das Wichtigste. Artikel weiterlesen

Suchergebnisse schon beim Eintippen mit jQuery

Suchergebnisse schon beim Eintippen mit jQuery
Von am
Kategorien: jQuery, PHP, Tipps, Tutorials

Die Suchergebnisse einer Suche schon beim Eintippen des Suchbegriffes anzeigen? Das kann nur Google? Falsch!

Ich zeige euch heute, wie ihr eine solche Suchvorschau nachbauen könnt. Dazu braucht ihr nur jQuery und ein bisschen PHP. Natürlich wären ein paar Daten, die Durchsucht werden sollten, von Vorteil. Aber auch die sind nicht nötig, ich habe meine auch extra für dieses Tutorial angelegt. Artikel weiterlesen

  1. 1
  2. 2
  3. 3