Javascript ist Toll!

Klapptabelle mit Javascript

Ziel des Skriptes ist es, grosse Datentabellen übersichtlicher darzustellen. Eine Möglichkeit dazu ist z.b. Zeilen, die weiter gehende Informationen zu einem Oberbegriff enthalten, mit einem Javascript zu verstecken und nur dann anzuzeigen, wenn der Benutzer auf ein entsprechendes Symbol klickt. Ich habe das aufgrund einer Frage, in einem Forum, Klapptabelle genannt.

Die Tabellen werden dazu im HTML Code, mit der CSS Klasse klapptabelle markiert. Die Zeilen, die den Oberbegriff darstellen, werden jeweil mit der Klasse main markiert.

Die init() Funktion des Skripts durchsucht die entsprechenden Tabellen und blendet alle Zeilen aus, die nicht das Attribut der Klasse main zu gehören. Ausserdem fügt es automatisch ein anlickbares Grafiksymbol in die erste Zelle ein, die den Zustand der Zeilen anzeigt.

focus() Probleme mit Firefox

Firefox hat seit Urzeiten Probleme mit dem setzten des focus auf ein Textfeld in bestimmten Fällen. Einmal wenn der Fokus unmittelbar nach einem onblur Event gesetzt werden soll oder wenn vor dem Fokus ein alert() Fenster geöffnet wird.

Die Lösung, die in obigen Artikel beschrieben wird, autocomplete zu deaktivieren, funktioniert zumindest in der 2'er Version nicht mehr. Die einzige Lösung scheint zu sein, unmittelbar nach einem blur Event oder alert() Fenster den focus wieder auf ein Feld zu setzen, ist ein Timeout abzuwarten. Dazu reicht ein Timeout von einer Millisekunde.

Beispiel

function setFocus(el) {

    var self = el;

    if(el.value) return;

    alert('Kein Text!');

    window.setTimeout( function() { self.focus();}, 1);

}

Beschreibung

Beim verlassen der Felder wird geprüft ob ein Text eingeben wurde. Ist es leer, erscheint eine Meldung. Nach dem wegklicken des Meldungsfensters soll das Eingabefeld den Fokus erhalten. Im ersten Fall nach einem kurzen Timeout, im zweiten ohne

Breite des Fensterscrollbalken

Mit dem folgenden Code sollte sich die Breite des Scrollbalken des Browserfenster berechnen lassen.

Wie kann man ein Array mischen?

Ich hab mal wieder ein altes Stück Code ausgegraben, was vielleicht für den einen oder anderen nützlich sein könnte. Die Frage ist, wie kann man ein Array mischen? Ich verwende hier wieder Array.prototype um das Array Objekt um die Methode shuffle() zu erweitern. [... weiterlesen]

Javascript Combobox

eine Combobox kombiniert ein Eingabefeld mit einer Auswahliste, da es kein HTML Element für eine Combobox gibt, muss diese mit Javascript nachgestellt werden. Hier ist eine Möglichkeit [... weiterlesen]

Drag & Drop 2

Ich hatte ja schon ein einfaches Drag & Drop Skript hier vorgestellt, dass aber nicht allen Anforderung gerecht wird. Ich brauchte ein Skript, mit dem man Teile innerhalb eines Bereiches, dragbar macht. Also das was man von normalen Fenstern kennt, das ganze Fenster läßt sich durch ziehen am Titel bewegen. Ausserdem gab es noch ein kleines Opera Problem, weil der beim Draggen den Text markierte.

Wordpress stattraq und der IE7

Mal wieder ein Nicht-JS Thema.

Ich nutze das wordpress Plugin Stattraq, da ich keine Logfiles hier auf dem Server habe und Webalizer Statistiken, die hier mir zu Verfügung stehen, sind nur für bestimmte Auswertungen aussagekräftig.

Formobserver

Mein neustes Werk, ist ein FormObserver. Also ein Formularbeobachter. Das Ziel dabei ist es, die Elemente eines Formulares zu beobachten und Änderungen signalisieren.
In letzter Zeit war ich gezwungen, einige Artikel über Java bzw. Java-Frameworks wie z.b. struts, zu lesen. Dabei hakte es bei mir mit dem Verständnis, des eventorientierten Ansatz von Java. Nachdem in einem Forum eine Frage zum prüfen von Formulareingaben mit JS gestellt wurde, kam mir die Idee einen Formular Event Observer zu bauen.

Grob nach dem Schema von Java: Observable. [... weiterlesen]

Wikipedia

Heute mal ein Beitrag über Wikipedia. Seit ich das Internet nutze (ca. seit 1998), benutze ich es auch als "Wissensmaschine". Ich gebe in der momentan aktuellen Suchmaschine, Suchbegriffe ein und hoffe Seiten zu finden, die mir zu einer Frage oder einem Problem, eine Antwort oder Lösung bieten. Während das am Anfang noch relativ schwer und oft mit stundenlangen durchforsten der vielen Ergebnisse verbunden war und zwischenzeitlich fast kaum mehr möglich wurde, als Spammer anfingen Suchmaschinen mit Sexseiten zu floaten, ist es dank Wikipedia wesentlich einfacher geworden und man bekommt oft sehr informative Antworten auf seine Fragen.

Wieviele Tage sind vergangen?

Die Frage war, wieviele Tage sind seit einem Datum vergangen und kann das Date Objekt auch mit einem Datum vor dem 1.1.1970 umgehen? [... weiterlesen]

$_GET für Javascript

Wird mal wieder Zeit für ein bisschen Javascript. Da ständig Lösungen von Fragen in Foren bei mir auflaufen, hier eine, um die GET Parameter mit Javascript abzufragen.

Phentermine / Phentermin ist hochgefährlich!

Phentermine / Phentermin Spam

Nachdem ein Projekt von mir auch von massiven Spam betroffen war, bin ich beim Recherchieren, über die Herkunft des Spams, auf folgenden Artikel gestossen. Ich schliesse mich daher an und für alle die es Wissen wollen:

Drag & Drop m. Javascript

Ein einfaches Drag and Drop Beispiel.

Warum Agentur Bashing gut ist

Die Begriffe Webstandards und Barrierefreiheit dringen mittlerweile auch zu den größeren Agenturen durch und immer mehr große Seiten versuchen sich daran. Während die TAZ damit keine Probleme hatte, sieht es beim Focus sehr bescheiden aus.

Das haben sich die Autoren von Vorsprung durch Webstandards genauer angeschaut und dabei Unzulänglichkeiten im Code entdeckt, die jeden, der sich auch nur ein bisschen mit dem Thema auseinandersetzt, die Haare zu Berge stehen lässt. Daraus entwickelte sich eine Diskussion, in der immer mehr der Vorwurf der Selbstbeweihräucherung und des Bashing von Agenturen laut wurde.

Quersumme

Weil's so grad schön war. Diesmal eine Funktion, um die Quersumme einer Zahl zu ermitteln:

Number.prototype.quersumme = function(forceOneDigit) {

    var z = this.toString().split('');

    for (var i=0, quer=0; i < z.length; quer+=z[i++]-0);

    if( forceOneDigit && quer > 9) return quer.quersumme(forceOneDigit);

    return quer;

}

Beispiel

Nachtrag

Und wieder mal gab es zum Thema einen Thread im selfhtml Forum, wo donp eine sehr effektive und schnelle Lösung präsentierte.

Das sieht dann so aus:

Number.prototype.quersumme = function() {

    return this < 10 ? this : this % 9;

}

Wie finde ich die Mausposition?

Um die Mausposition mit Javascript zu ermitteln, kann man folgende Funktion verwenden.

Position eines Elementes ermitteln

Die Position und die Maße eines HTML Elementes, lassen sich mit folgender Funktion bestimmen:

Wie kann man alle Einträge aller Selectfelder wählen?

Folgende Funktion selektiert alle Einträge, in allen Formularen einer Seite. Der praktische Nutzen mag gering sein, aber hier geht es nur um die Umsetzung der Fragestellung, die in der entsprechenden Anwendung jeweils angepaß?t werden muss.

strftime() in Javascript

Demonstration der Javascript Funktion strftime(). Dies ist eine Umsetzung der C-Funktion, mit deren Hilfe ein Datum formatiert werden kann. Hier eine online Dokumentation. Im Unterschied zu der PHP oder C Funktion erwartet meine JS Umsetzung, als Parameter keinen Timestamp, sondern ein JS-Date Objekt.

Eventhandling mit Javascript

Um mit Javascript einem Objekt einen Event hinzuzufügen, bietet sich folgende Schreibweise an:

[object].onevent = function(e){

// ... tu_was

}

Wobei [object] ein Objekt des DOM ist und onevent einen Event meint, z.b. onclick. Diese Methode hat den Nachteil, dass ein bereits vorhandener Event überschrieben wird.

Die Mozilla-Funktion addEventListener() beseitigt dieses Problem, steht aber nicht in allen Browsern zu Verfügung. Die IE Variante mit attachEvent() ist leider nicht praktikabel, da bei jedem Aufruf die Funktion erneut dem Event zugefügt wird und das Eventobjekt selbst nicht in der Eventfunktion als this zu Verfügung steht. [... weiterlesen]