Thomas Horster » webdesign

WordPress 3.0 steht zum Download bereit

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

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.

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:

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:

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.

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

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.

Wie man inline styles in CSS überschreiben kann

Tom — Sun, 10 May 2009 10:33:52 +0000

Wenn man inline Styles überschreiben, macht man das mit !important, will man aber nur inline gestylte Tags in CSS im Webdesign überschreiben, gibt es keine andere Möglichkeit, als diese styles direkt anzupassen? Falsch!
Eine weitere Möglichkeit ist mit Hilfe des [style] Keywords innerhalb eines Scriptblockes oder einer externen CSS nur diese Tags mit inline Styles anzusprechen.

Ein Beispiel :


Hello World - wird gestyled


Hello World - wird nicht gestyled

.showMe span[style]{font-weight: normal !important;color: #0000ff !important;}

Wie das immer so ist und wie man sich wahrscheinlich aufgrund des [style] im Selektor denken konnte, funktioniert dies nicht im IE6, aber im IE7 & IE8 sowie allen modernen Browsern.
Natürlich bleibt die Frage, wann man so etwas sinnvoll anwenden kann, da man inline styles generell vermeiden
sollte, aber es kann mit Sicherheit nicht schaden, so etwas zu wissen.

Seeing is believing, daher gibt es hier ein kleines Showcase.

[gefunden bei SOTAHNAKA]

Stylen von input=”file” Formularfeldern im Webdesign

Tom — Wed, 06 May 2009 18:18:54 +0000

Heute habe ich mich mal kurz ärgern müssen, da ich nach einer Möglichkeit gesucht habe, diese netten upload Formularfelder mit CSS zu stylen. Ich wusste schon vorher, dass das nicht ohne Probleme geht, aber ich hatte es zuvor nicht benötigt.

Für diejenigen, die nicht wissen, was ich meine:

Nachdem ich selber über einer Möglichkeit gegrübelt habe, das mit ein wenig Prototype gewürzt hinzubekommen, habe ich bei anderen Webdesignern/Frontend-Entwicklern dies hier gefunden. An und für sich nicht besonders überragend, aber durchaus zweckmäßig.

Kurze Zeit später fand ich dann eine fast identische Lösung mit Prototype, musste also nicht selber noch einmal ran. Wer sich die Lösungen anschaut, wird feststellen, dass im Grunde nur ein Button über das Feld gelegt, das Feld an sich per Opacity versteckt und dann die Position der Maus auf dem Button mit dem darunter liegenden Feld gematcht wird.

Klingt kompliziert? Ist es aber nicht.

Habe ich Schweinegrippe?

Tom — Fri, 01 May 2009 13:30:23 +0000

Diese Frage stellen sich zur Zeit recht viele Leute, daher ist hier nun der ultimative, wenn auch nicht ganz ernst gemeinte, Schweinegrippe Online-Test. Related posts:Diese Frau ist eine Logistik-Expertin… Bilder aus StudiVZ- und MeinVZ-Alben herunterladen Wirklich sehr freundlich, Kabel Deutschland!Related posts: