Thomas Horster » webdesign

Die allerbeste, freie und kostenlose JavaScript-Dokumentation

Tom — Fri, 31 Dec 2010 14:15:29 +0000

Verwandte Artikel:

Webseiten einfacher kommentieren mit markup.io

Tom — Sun, 10 Oct 2010 14:33:48 +0000

Ich habe gerade schon lange gebraucht, eine passende Überschrift für markup.io zu finden (was mir nicht gelungen ist ).
Markup ist ein kleines Bookmarklet, welches man sich in seine Lesezeichenleiste zieht und dann auf jeder Webseite im Netz rummalen darf. Das ist natürlich noch nicht alles, denn man kann diese bemalten Seiten mit anderen teilen, die dann genau sehen können, was bemalt wurde.

Warum man das machen sollte? So ist es einfacher, über Fehler auf der eigenen Seite, neue Funktionen oder Ideen von anderen Seiten zu sprechen, wo man normalerweise einen Screenshot machen würde, was weit umständlicher ist.
Der Dienst ist zwar noch Beta, aber ich werde das weiterverfolgen! Anschauen lohnt sich jetzt schon!

Verwandte Artikel:

High Performance JavaScript-Tabs mit Jquery (auch mit Deeplinking)

Tom — Sat, 18 Sep 2010 10:35:40 +0000

Tabscripte gibt es im Netz zu Hauf, viele benutzen mittlerweile ein JavaScript-Framework wie jQuery. Ich wollte ein ganz einfaches Script erstellen, welches besonders wert auf Geschwindigkeit legt. Wenig valides HTML, gutes, knappes CSS, CSS-Sprites, smarte Event-Handler, wenig DOM-Zugriffe und sie sollten auch ohne JavaScript noch benutzbar bleiben (unobtrusive JavaScript), was ja für SEO (Suchmaschinenoptimierung) sehr wichtig ist.
Als kleine Spielerei kann man auch weitere Tabs hinzufügen. Ich wollte damit zeigen, wie wichtig und sinnvoll Event-Delegation in JavaScript ist und wie es viele Dinge vereinfacht.

Das Ergebnis dieses Experimentes ist hier in einer kleinen Demo zu sehen.

Update: Eine erweiterte Version bietet nun auch Deeplinking, so dass man auf Tabs verlinken kann, diese ist hier zu finden. Bei modernen Browsern wird auch der Vor- und Zurückbutton unterstützt, mit einem jQuery Plugin ließe sich diese Funktion auch noch für ältere Browser aufbohren.

Verwandte Artikel:

WordPress 3.0 steht zum Download bereit

Tom — Thu, 17 Jun 2010 18:00:54 +0000

Verwandte Artikel:

JavaScript Miniframework

Tom — Fri, 04 Jun 2010 19:39:11 +0000

//implement missing function
document.getElementsByClassName = function(cl) {
    var retnode = [];
    var myclass = new RegExp('\\b'+cl+'\\b');
    var elem = this.getElementsByTagName('*');
    for (var i = 0; i < elem.length; i++) {
        var classes = elem[i].className;
        if (myclass.test(classes)) retnode.push(elem[i]);
    }
return retnode;
};

//framework functions
function $(id){ return document.getElementById(id); }
function html(id, html){ $(id).innerHTML = html; }
function css(id, style){ $(id).style.cssText += ';'+style;}
function $$(class){ return document.getElementsByClassName(class); }

You can find a testrun here: http://jsfiddle.net/ZjsYB/

Based on a Thomas Fuchs article found here.

Verwandte Artikel:

Bilder aus StudiVZ- und MeinVZ-Alben herunterladen

Tom — Thu, 13 May 2010 15:42:40 +0000

Geht ganz einfach: JavaScript ausschalten und dann Bild über das Kontextmenü (Rechtsklick) speichern. Achtung: Nicht erst die Grafik alleine anzeigen und dann speichern, dann greift der Server ein und man hat nur ein Bild, auf dem StudiVZ “böse, böse” sagt…
Nicht sonderlich kreativ gesichert von den Leuten, aber genug Hindernis für viele Nutzer wie mir scheint…

Kleiner Test:

Verwandte Artikel:

Freies Buttonset mit PSDs dazu

Tom — Fri, 09 Apr 2010 19:29:41 +0000

Und heute aus der Kategorie freie und kostenlose Icons dieses freie Buttonset bei dem es gleich noch die PSDs dazu gibt:

Verwandte Artikel:

Der beste PNG-Fix für den IE6

Tom — Tue, 06 Apr 2010 20:46:53 +0000

Für den Internet Explorer 6 kursieren einige PNG-Fixes. Angefangen bei Filtern in der CSS-Datei bis hin zu ausgeklügelteren Methoden. Besonders überzeugt hat mich der dd_belated PNG-Fix, der auch sich wiederholende Hintergründe erlaubt, was bei den anderen nicht möglich ist.

Außerdem lässt er sich einfach auch in eigenen Scripten zusätzlich verwenden, wenn Inhalte versteckt und dann angezeigt werden sollen. Der Vorteil bei dd_belated liegt an der Benutzung von VML anstatt des üblichen Alphafilters, was bessere Resultate ermöglicht. Was bleibt, ist natürlich eine kurze Verzögerung bis zum Ausführen des Scriptes und der damit kurz sichtbaren falsch angezeigten PNGs.

Recht häufig trat bei der Verwendung des Fixes ein Problem mit der Positionierung des Elementes selber im Elternelement auf. Ein einfaches “position:relative” für das umgebende Elternelement reichte dann aber meist aus.

Verwandte Artikel:

Freie Icons finden mit den besten Suchmaschinen für freie Icons

Tom — Sat, 27 Mar 2010 22:24:00 +0000

Kostenlose und freie Icons

Wie oft braucht man die für große und kleine Webprojekte?
Hier sind die besten Suchmaschinen für freie Icons:

Findicons

Iconfinder

Iconlet

Iconlook

Iconseeker

Icons-search

Veryicon

Verwandte Artikel:

Online-Editor für JavaScript, HTML und CSS

Tom — Sat, 27 Feb 2010 12:53:16 +0000

Einen schnellen und flexiblen Online-Editor für kleinere HTML und JavaScript Experimente findet man unter http://jsfiddle.net/. Es ist erstaunlich, was mit diesem kleinen Editor jetzt schon möglich ist. So kann man unter anderem Mootools, jQuery oder Prototype als gewünschtes Framework bestimmen, den Doctype auswählen oder sogar externe CSS-Dateien einbinden.

JSfiddle zeigt dabei immer nur das notwendigste, beispielsweise bei der HTML-Datei nur den Inhalt des body-tags ohne den Rest des Dokumentes. Damit ist es ein leichtes, mal eben einen kleinen Testlauf eines JavaScript Schnippsels zu starten oder den Einfluss auf die Elemente zu testen. Hier mal ein simples Beispiel mit Prototype und Scriptaculous.

Verwandte Artikel: