JavaScript

Formular per AJAX-Request (jQuery) abschicken

Das Abschicken von Formulardaten erfolgt in der Regel durch Drücken des Submitbuttons. Der Nutzer wird dann auf die jeweilige Seite weitergeleitet, die im HTML-Tag form als Attribut action angegeben ist. Bei dynamischen Webseiten kommt es oft vor, dass eine Berechnung von bestimmten Formulardaten und eine anschließende Aufbereitung und Anzeige der Ergebnisse benötigt wird. Ein Beispiel […]

JavaScript

Aufklappbares und zuklappbares div Element (jQuery)

Will man für den Nutzer erweiterte, zusätzliche Informationen beim Laden der Seite ausblenden und nur bei einer bestimmten Aktion bzw. Event einblenden, wie zum Beispiel durch einen Klick (on click) oder durch Drüberfahren (on mouse over) mit dem Mauszeiger, dann kann man dafür ein kleines Javascript nutzen. Per CSS wird das div Element nach dem […]

JavaScript

jQuery: Alle Checkboxen mit einem Klick auswählen

Vor allem in Adminbereichen und in der Verwaltung bzw. Pflege einer größeren Anzahl von Einträgen / Daten benötigt man Checkboxen. Grund ist in diesem Fall die Optimierung des Bearbeitungsprozesses durch den Nutzer. In der Praxis wäre hier das Löschen von mehreren Bildern oder Einträgen, was man als Content zusammenfassen kann, ein gutes Beispiel dafür. In […]

JavaScript

Bei Mausklick einen Layer öffnen (jQuery)

Detaillierte und zusätzliche Informationen zu einem Thema auf einer Webseite kann man per Klick auf einen Link in einem Layer bzw. Popup anzeigen lassen. Das macht in vielen Fällen Sinn, weil man den Nutzer nicht sofort mit Sachen bombardiert, die für ihn eher uninteressant sein könnten. Der Inhalt wird erst beim aktiven Klicken im aufgegangenen […]

JavaScript

JQuery: Slideshow-Plugins mit wechselnden Bildern und Text

Eine Slideshow zieht das Auge des Besuchers einer Webseite fast schon magisch an. Besonders mit einem "Fade in" und "Fade out" Effekt bei den Bildern und Texten wird die Aufmerksamkeit des Nutzers auf das interaktive Element Slider, auch besser bekannt als "Slide Show" oder "Slideshow", gelenkt. Ein sogenannter Slider mit wechselnden Bildern und Teasertext kann […]

JavaScript

JQuery: Leere Felder mit Standardtext belegen

Ansprechende Kontaktformulare oder aber ganz allgemeine Formulare wirken selbsterklärend, wenn die Textfelder mit beschreibenden Werten oder Texten vorbelegt sind. Bei einem Kontaktformular, welches die drei Felder Name, E-Mail und Nachricht beinhaltet, können die Felder zum Beispiel die Phrasen "Ihr Name", "Ihre E-Mail-Adresse" sowie "Ihre Nachricht" als Standardwerte haben. Bei einem Klick in ein Feld sollte […]

JavaScript

jQuery-Selektor mit regulären Ausdrücken

Wer mit dem Javascript-Framework jQuery arbeitet, der wird irgendwann merken, dass normale Selektoren wie #name oder .name nicht mehr ausreichen und man gezwungen ist, reguläre Ausdrücke zu verwenden. Einen offiziellen Regex Selektor besitzt jQuery nicht. James Padolsey hat auf seiner Webseite einen Selector vorgestellt, mit dem man auch reguläre Ausdrücke nutzen kann. Die Verwendung der […]

JavaScript

Tablesorter-Beispiel: Tabelle ohne Laden sortieren

Um Daten in einer Tabelle mit einem JavaScript ohne die Webseite erneut zu laden im Browser nach einer bestimmten Spalte zu sortieren, kann das Tablesorter JQuery Plugin verwendet werden. Dieses feine JQuery Plugin sortiert eine HTML Tabelle mit Daten bei Klick auf einen Spaltennamen in die richtige Reihenfolge. Es können sowohl numerische Zahlen als auch […]

JavaScript

JQuery: Gesamte div Box (Container) verlinken

Besonders auf der Startseite machen sich Boxen mit dem Angebot und einem kleinen beschreibenden Text ganz gut. Man kann sein Produkt, einen Artikel, eine News oder eine weitere Unterseite kurz vorstellen und auf der Hauptseite mit einer Verlinkung hinterlegen. Bei Interesse klickt der Nutzer auf die Box, um genauere Details und Informationen zu bekommen. Irgendwo […]

JavaScript

Datepicker: Datum (Date) Felder vergleichen

In meinem vorherigen Post habe ich über das Datepicker Plugin berichtet und wie man die englischen Beschriftungen (Tage, Monate) in die deutsche Sprache übersetzt. In diesem kleinen Tutorial Artikel möchte ich kurz zeigen, wie man Datepicker Felder, die ein Datum haben, miteinander vergleichen kann. Klären wir erst einmal die Frage, wo solch ein Code Schnipsel […]