Steffen Hollstein

JavaScript / per jQuery auf verkettete ID-Selektoren zugreifen

admin — Wed, 05 Aug 2009 17:58:01 +0000

Im Normalfall hat man es mit Elementen zu tun bei denen Klassen oder eindeutige ID’s zugewiesen wurden.

Zum Beispiel so:

Mit jQuery kann man auf diese Elemente wie folgt zugreifen:


jQuery(".meineKlasse1");
jQuery(".meineKlasse1.meineKlasse2");
jQuery("#meineID");

Es kommt aber vor das generierte ID’s wie hier gesetzt sind:

Der Zugriff per jQuery sieht dann so aus:


jQuery("#meineID\\:irgendwas\\:123456\\:tester");
jQuery("#meineID\\-irgendwas\\-123456\\-tester");

Webhilfen zum Thema:

http://docs.jquery.com

JavaScript / Hashtable

admin — Thu, 30 Jul 2009 18:22:43 +0000

Folgend eine Kurzanleitung beim Umgang mit Datenstrukturen anhand einer Hashtable (Streutabelle).

Initialisierung:


meinHash = new Object();
meinHash.wert1 = "val1";
meinHash.wert2 = "val2";

oder


meinHash = { wert1:'val1', wert2:'val2', ... };

Zugriff:


val = meinHash['wert1'];

oder


val = meinHash.wert1;

Löschen eines Elements:


delete meinHash.wert1;

Test, ob ein Wert vorhanden ist:


if(meinHash.hasOwnProperty("wert1")){
    result = "vorhanden";
}

Über Schlüsselworte oder Schlüsselwerte der Objekt-Hashtable iterieren


for(key in meinHash){
    allKeys += key;
}

Webhilfen zum Thema:

CSS Filter und Browserweichen per CSS

admin — Wed, 29 Jul 2009 11:32:47 +0000

Als Web Entwickler möchte man beim umsetzen einfacher und komplexer Layouts mit CSS möglichst viele Browsertypen unterstützen. Dazu gibt es die möglichkeit Browserspezifische CSS Dateien per Javascript einzubinden, Conditional Comments (die nur Internert Explorer interpretiert) zu verwenden oder CSS Filter (die eigentlich schönere Variante) einzusetzen.

Beispiel Conditional Comments (nur IE):

lte == lower than equal
gte == greater than equal

Beispiel CSS-Filter:


input {/* global definition for all browsers */
    padding: 1px 18px 4px 30px;
}
input, x:-moz-any-link {/* Firefox 2 and older */
    height: 18px;
}
input, x:-moz-any-link, x:default {/* Firefox 3 and newer */
    height: 20px;
}
* html input {/* IE6 Fix */
    padding-top: 3px;
}
*+html input {/* IE7 Fix */
    padding-top: 3px;
}
@media screen and (min-width: 0px){ /* for opera9, safari3 */
    input {
        padding-top: 3px;
        padding-bottom: 5px;
    }
}

Webhilfen zum Thema:

http://de.wikipedia.org/wiki/Conditional_Comments (Conditional Comments)
http://www.lipfert-malik.de/webdesign/tutorial/bsp/css-weiche-filter.html (CSS Filter)
http://pornel.net/firefoxhack (CSS Filter)
http://www.thestyleworks.de/tut-art/ie7.shtml (CSS Filter)

Neuer Webauftritt mit WordPress

admin — Thu, 18 Jun 2009 22:12:07 +0000

Nachdem ich seit circa zwei Jahren Webauftritte mit WordPress für Andere umgesetzt habe, hier endlich mein eigenes CMS! Es waren vier Entwürfe (wobei zwei als WordPress Theme umgesetzt waren) innerhalb zwei Wochen nötig bis ich mit der jetzigen Umsetzung zufrieden war. Bei den Entwürfen fokussierte ich mich besonders auf das kreisförmige Hauptmenü, welches komplett anders aufgebaut werden sollte wie die sonst üblichen Drop Down Lösungen. Desweiteren wollte ich viel Form und Rundung einbringen – also kein Kastendesign. Die Webseite ist variabel aufgebaut sodass diese auch auf niedrigen Auflöungen wie z.B. einem iPod noch lesbar ist.

Folgend die vier Entwicklungsstufen aufgelistet:

Entwurf 1, Black / Startseite:

Entwurf 1, Black / Contentseite:

Entwurf 2, Deep Grey / Startseite:

Entwurf 2, Deep Grey / Contentseite:

Entwurf 3, White / Startseite:

Entwurf 3, White / Contentseite:

Entwurf 4, Green / Startseite: