Letzte Artikel
Kategorien
Kategorie Archiv: webdesign
//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.
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:
Und heute aus der Kategorie freie und kostenlose Icons dieses freie Buttonset bei dem es gleich noch die PSDs dazu gibt:
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.
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
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.
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 :
<div class="showMe"> <span style="font-weight: bold; color: #ff0000;">Hello World - wird gestyled</span> </div> <div class="showMe"> <span>Hello World - wird nicht gestyled</span> </div>
.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]
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.
Diese Frage stellen sich zur Zeit recht viele Leute, daher ist hier nun der ultimative, wenn auch nicht ganz ernst gemeinte, Schweinegrippe Online-Test.
