CSS Eigenschaften mit Javascript bearbeiten

Durch Web2.0 erlebt Javascript ein Revival und dadurch das CSS sowieso ein Trend ist, liegt es nahe beide Techniken zu kombinieren. Das funktioniert auch relativ einfach, jedoch muss man beachten, dass die CSS Eigenschaften in Javascript anders benannt sind und zwar wie folgt:

CSS Eigenschaft Javascript Eigenschaft
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
clip clip
color color
cursor cursor
display display
filter filter
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
position position
float styleFloat
text-align textAlign
text-decoration textDecoration
text-decoration: blink textDecorationBlink
text-decoration: line-through textDecorationLineThrough
text-decoration: none textDecorationNone
text-decoration: overline textDecorationOverline
text-decoration: underline textDecorationUnderline
text-indent textIndent
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex

Die CSS Eigenschaften behandelt man dann in Javascript wie ganz normale Objekteigenschaften:

objekt.style.csseigenschaft = ‘xy’;
oder zB: document.getElementById(‘table’).style.width = ’100%’;

Captcha: Schnee von gestern?

Spam ist schlimm – keine Frage. Aber sind die kleinen bunten Bildchen wirklich besser? Für den Webmaster sicherlich schon, bloß für den Internetuser wohl im seltensten Fall. Sascha vom Website Spy Blog hatte da eine nette Idee für eine Captcha Alternative und zwar einfach die Formularfeldernamen dynamisch über das aktuelle Datum zu generieren.
Diese Methode hat aber das Problem, dass es nicht funktionieren würde wenn ein User die Seite um 23:59:59 aufrufen würde und dann nach Mitternacht das Formular abschicken würde. Der Ansatz gefällt mir schon recht gut, bloß habe ich da einer (vielleicht) bessere Idee:

Die Formularnamen zwar dynamisch generieren, aber nicht abhängig vom Datum, sondern abhängig von der Länge. Für das Feld ‘Name’ könnte man zum Beispiel 3-5 und 23-32 als Länge nehmen und für andere Felder dann 6-10, 12-15,… . In dem Script, welches die POST-Daten verarbeiten soll, müsste man dann nur alle POST-Daten analysieren. Hier mal ein kleines Beispiel:

$postdata = $_POST;
foreach($postdata as $feld => $value) { // Array auslesen
if(strlen($feld) > 2 AND strlen($feld) < 6) // Feld mit Name der Länge 3-5
$name = $value;
if(strlen($feld) > 22 AND strlen($feld) < 33) // Feld mit Name der Länge 23-32
$nachricht = $value;
}

Ob diese spontane Idee auch von praktischem Nutzen ist, werde ich bei Gelegenheit mal testen.

( Wer kennt ein WordPress-Plugin mit dem man Programm-Code im Text einfügen/highlighten kann -> Comments )

Festival Sommer 2007

Dank Klimaerwärmung kann man jetzt schon ahnen wie es wohl im Sommer werden wird – heiß und zwar so richtig. Also sind die Vorraussetzungen für einen idealen Festival Sommer in diesem Jahr schon gegeben. Die ersten Bands sind auch schon für meine “Stamm-Festivals” ( Wacken und Hurricane ) bestätigt:

Hurricane 2007:
Arcade Fire, Beastie Boys, Bloc Party, Die Fantastischen Vier, Fotos, Incubus, Kings Of Leon, Marilyn Manson, Me First and the Gimme Gimmes, Pearl Jam, Sonic Youth, Virginia Jetzt!

Wacken 2007:
Blind Guardian, Cannibal Corpse, Die Apokalyptischen Reiter, Dimmu Borgir, Grave Digger, Iced Earth, In Flames, J.B.O., Lordi, Napalm Death, Rage, Vadder und viele mehr…

Mit diesen Hammer Bestätigungen sind meine Karten fürs Hurricane und Wacken schon sicher. Gekauft werden sie wohl noch in diesem Monat.

Tag Clouds

Tags gehören zum Web2.0 wie die Butter aufs Brot. Wenn es dann auch noch schön viele Schlagwörter Tags gibt, liegt es nahe mit Hilfe einer sogenannten Tag Cloud ( Wortwolke ) die Informationen zu visualisieren. Ob eine solche Tag Cloud dann auch von Nutzen ist, ist eine andere Frage. Hier einige Beispiele:


Yigg.de
Blog.de
MyVideo.de

o2online.de
Spiegel.de

Wie man sehen kann, stammen die meisten Beispiele von Webseiten, die man dem Web2.0 zu ordnen könnte. Meiner Meinung nach macht das auch nur Sinn, da auf den Webseiten die Tags auch von Usern hinzugefügt werden. Im Vergleich zwischen SpiegelOnline und Yigg erkennt man sofort, dass bei Yigg User getaggt haben, denn die Schlagwörter sind dort einfach viel allgemeiner. Außerdem ist die SpOn Tag Cloud für meinen Geschmack etwas zu klein. Trotzdem ist es bewundernswert, dass sich eine solche Web-Größe ins Web2.0 mit einer Tag Cloud wagt.
Sinnvoll ist eine Tag Cloud also nicht umbedingt. Für mich ist jedenfalls klar, dass ich im MIEO Blog keine Tag Cloud einbauen werden – auch wenn es ein Trend ist.