Javascript ist Toll!

aufgleitende Javascript Popups

Das folgende Skript öffnet ein HTML Element mit einer fliessenden Bewegung. Es gleitet auf, anstatt sofort sichtbar zu sein. Dies wird durch die CSS Eigenschaft clip() erreicht. Diese Technik funktioniert nur, wenn das Element absolut positioniert ist

Javascript Rubberband

Beschreibung

Um mit der Maus Bereiche zu markieren wird ein sogenanntes Rubberband (dt. Gummiband) benutzt. Die Funktionsweise ist aus Grafikprogrammen bekannt oder auch dem Windows Desktop. Wenn die Maus mit gedrückter linken Maustaste bewegt wird, wird ein rechteckiger Kasten gebildet, der den Bereich der ausgewählt werden soll markiert.

Dazu habe ich diese kleine Skript geschrieben, dass einfach in eine Seite eingebunden werden kann. Mit Hilfe von Events kann das Verhalten gesteuert werden.

Zebratabellen mit Javascript

Und noch ein Tabellenskript.

Eine große Tabelle sieht schöner aus wenn die Tabellenzeilen eine abwechselnde Hintergrundfarbe bekommen. Das wird in Zukunft - irgendwann mal - mit CSS 3 möglich sein, im Moment kann das aber noch kein Browser.

Deshalb kann man sich behelfen - entweder, indem die Zeilen abwechselnd mit einer entsprechenden Klasse versehen werden oder, wenn man nicht den HTML Code aufblähen möchte, mit JS. Genau dazu habe ich dieses kleine Skript geschrieben, dass den entsprechend markierten Tabellen (wenn sie die Klasse zebra haben), den Zeilen abwechselnd die CSS-Klasse odd hinzufügt.

Sonderzeichen maskieren

Gerade gelesen auf Perun Weblog. Da dachte ich mir das geht doch auch mit JS.

[Nachtrag 20.1.] Die erste Version hat alle Sonderzeichen in &#{ASCII-Code}; umgewandelt, ich habe sie nun um eine Umwandlung in die HTML Entities erweitert.

Tabellen sortieren

Das Skript macht eine HTML-Tabelle sortierbar. Die Spalten können jeweils durch einen Klick auf die Titelzeile sortiert werden. Dazu ist lediglich notwendig der gewünschten Tabelle die CSS-Klasse sortable zu geben und den folgenden Javascript-Code in die Seite einzufügen:

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 damit in bestimmten Fällen den Fokus auf ein Textfeld zu setzen. Einmal, wenn der Fokus unmittelbar nach einem onblur Event gesetzt werden soll und wenn vor dem Fokus ein alert() Fenster geöffnet wird.

Die Lösung, die in obigen Artikel beschrieben wird, autocomplete deaktivieren, funktioniert zumindest in der 2'er Version nicht mehr. Die einzige Lösung scheint ein Timeout zu sein, der unmittelbat nach dem alert() oder dem Blur Event aufgerufen wird. 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 das Feld leer, erscheint eine Meldung. Nach dem wegklicken des Meldungsfensters soll das entsprechende 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]