The relevant part of the style-sheet:

.addonContent:before {
content:”\0000a0″;
display:block; position: absolute;
top:0; left:-1px;
width: 4px; height:100%;

background-image:-webkit-radial-gradient(left center, ellipse farthest-side, rgba(0, 0, 0, 0.5), transparent);
}

On Windows 7 it looks right:

On MacOS X (10.6.8) it looks like this:

And if I replace “height” with a fixed number like 36px, then it won’t change – it still looks bad on MacOS X.

http://connect20.magentocommerce.com/community/Mage_All_Latest

The new version is now on GitHub and contains some significant improvements. The support for jQuery 1.3.x is now dropped in favor of the .delay()-function.

Check it out on GitHub.

Zugegebenermaßen ist jQueryUI nicht “die beste Lösung” – an manchen Stellen ist das ganze Paket schon etwas krude. Aber die typischen Dinge lassen sich mit relativ wenig Aufwand umsetzen.

Aber dann gibt es doch Limits bei denen man sich einen leichteren Zugang zur API wünschen würde. Seit geraumer Zeit versuche ich das zu umgehen indem ich mich auf Addon-Suche für jQueryUI mache. Über die Addons mit denen ich absolut unzufrieden war, will ich hier gar nicht schreiben.
Seit einiger Zeit nutze ich diese timepicker-Erweiterung für den jQueryUI-datepicker. Mit 28kb (uncompressed) ist er zwar einigermaßen gross, aber die letzten drei Upgrades von jQueryUI hat er unbeschadet überstanden – und das ist hoch anzurechnen.

Ich hatte auch einige andere Alternativen ausprobiert, aber keine war so gut eingebunden wie diese.
Wer hat denn noch gute Erfahrungen mit jQueryUI-Addons?

Beispiel:

Code für Mozilla-Browser:
#TopNav ul{
-moz-column-count: 3;
-moz-column-width: 32%;
-moz-column-gap: 1em;
-moz-column-rule: solid #818285 1px;}

Über column-count wird die Spaltenanzahl definiert.

Column-width bestimmt die jeweilige Spaltenbreite. Derzeit sind alle Spalten immer gleich breit & hoch. (Das kann sich zukünftig ggf. noch ändern.)

Column-gap regelt den horizontalen Abstand zwischen den einzelnen Spalten. Der Wert darf nicht negativ sein.

Mit column-rule kann eine Trennlinie definiert werden.

Bitte nicht vergessen, für Safari-Browser wird statt “-moz” einfach “-webkit” definiert.

Umbrüche:

Um Umbrüche in die nächste Spalte gezielt zu steuern, stehen folgende Eigenschaften zur Verfügung:

• break-before
• break-after
• break-inside

Versucht Umbrüche innerhalb von p Elementen zu  vermeiden:
p { break-inside: avoid-column }

Umbruch nach Bildern:
img { break-after: column }

Umbruch vor h2:
{ break-before: column; }

Weitere Möglichkeiten:

Element über alle Spalten darstellen:
h2 { colum-span: all;}

Wer noch tiefer einsteigen möchte, dem empfehle ich dazu die Seite des W3C:
http://www.w3.org/TR/css3-multicol/

Browser Kompatibilität:

mac:

• Chrome  5
• Firefox 3.6
• Safari 4

Win:

• Chrome 4
• Firefox 3, 3.6
• Safari 4

Bisher keine Unterstützung:

• IE 6,7 und 8
• Opera 10, 10.1 und 10.5

Let’s say you have an area in your website with some sort of “moody image”. Something that sits there pretty still and won’t change. Of course there are tons of jQuery-tools to make this a attractive spot (like cycle), but they are all a bit too much. And I found none that support slicing the image and using some sort of video-style transition. That’s where moodblender comes in.

The plugin is in it’s early stages. You should only use the settings splitparts, loop, maxloop and dwellTime. Using “blendOut: true” is fine, but does not work the way I had it in mind ;)

There are two demos available: number 1 and number 2.

Use the minified version (2.2kb) or read the full source. It’s tested with jQuery 1.3.2, but should work with the latest 1.4 as well.
Browserchecks aren’t complete yet. I’ve only tested it with Firefox 3.6, Safari 4, Google Chrome 4 and Opera 10.10. I did some tests with InternetExplorer 6 to 8, but only with an early version.

HTML

<div id="mood">
<img src="pix/mood_1_test.jpg" alt=""/>
<img src="pix/mood_3_test.jpg" alt=""/>
<img src="pix/mood_2_test.jpg" alt=""/>
</div>

CSS

#mood
{
 position:relative;
 overflow:hidden;
 width:500px;
 height:282px;
}

JS

$(document).ready(function() {
 $('#mood').moodblender({
 loop: true,
 maxloop: 10,
 blendOut: false,
 dwellTime: 3000
 });
});

I’ve a couple of things in mind for version 0.2 and beyond. Some of them are

• rewrite the loop-function and maybe make use of jQuery’s new delay()-function (sometimes looping kills itself or slices move in on one block… timing is evil in JS)
• add support for jQuery Easing Plugin
• fix the ‘blendOut: true’
• add full support for IE6 to 8 (or degrade nicely with IE6 ;)

Für mich als Entwickler ist der Firefox schlichtweg unersetzlich. Und da spielt die Zeit für den Seitenaufbau eher eine untergeordnete Rolle. Es geht um die Zeit, die man braucht einen (Hinweis auf einen) Bug zu finden.
Die Add-ons des Firefox sind die wahren Gewinner. Man muss immer aufpassen nicht zu viele zu installieren/ aktivieren – anderfalls kann es schon ziemlich unerträglich langsam werden ;)

Meine TOP-Add-ons:

1. Firebug
   Der Safari hat auch eine schöne Debug-Console. Aber der Firebug ist ein Quäntchen besser. Das mag die Gewöhnung sein, aber es ist alles da, wo es sein muss.
   Als Add-on im Add-on ist da noch Firecookie zu empfehlen – tut genau das was der Name vermuten lässt.
2. Web Developer
   Man könnte meinen das man durch den Firebug die Web Developer-Toolbar weglassen könnte. Man könnte es meinen.
   Aber mit “Disable” und “CSS” habe ich da die sicher am meisten geklickten Menüs unterhalb dessen ich Dinge wie den Cache bis hin zu selektiven Stylesheets alles ein- und ausschalten kann. Nur wenige Klicks oder gemerkte Shortcuts entfernt.
3. FoxyProxy Standard
   Eine elegante Verwaltungsmöglichkeit von Proxy-Servern. Inkl. Nutzung verschiedener Proxies anhand von URL-Patterns. Ein absolutes Muss im Zusammenhang mit ssh-SOCKS “-D” oder paros-proxy.
4. Screengrab
   Screenshots auf Basis von Systemtools sind heute jedem geläufig. Aber sobald man eine ganze Website haben will, die nicht komplett auf den Monitor passt, dann wird es lästig. Screengrab ist einfach zu bedienen (nur wenige, leicht verständliche Optionen) und liefert ein wunderbares PNG der aktuellen Seite.
5. JSONView
   Ein XML-File schnell im Browser öffnen und ein wenig “durchblättern” – kein Problem.
   Mit JSONView geht das auch wunderbar bei JSON-formatierten Daten.

Es gibt dann noch eine Menge mehr an Add-ons die mehr oder weniger regelmäßig aktiv nutze oder phasenweise disabled belasse. Da gehören z.B. der “DNS Flusher“, das “Adblock Plus” oder “Greasemonkey” dazu.

Das gelingt mit der CSS3 Eigenschaft”box-shadow” sehr schön, die Styledefinition lautet dann z.B. für den Firefox (Gecko) so:
-moz-box-shadow: 8px 8px 18px #6f7072;

Diese CSS-Eigenschaft benötigt folgende Angaben:

Der 1. Wert: “x-Abstand”
Er verschiebt  den Schattens horizontal. Ein positiver Wert verschiebt den Schatten nachch rechts, ein negativer nach links.

Der 2. Wert:  “y-Abstand”
Er verschiebt  den Schattens vertikal.  Ein positiver Wert positioniert den Schatten unten, ein negativer oben.

Der 3. Wert : “Blur-Radius” (optional)
Die Größe des Weichzeichnereffektes.
Je größer der Wert, desto größer und transparenter wird der Schatten. Wenn kein Wert angegeben wird, wird der Wert auf 0 gesetzt.

Der 4. Wert  hier definiert die Schattefarbe.

Es ist noch ein  weitere Wertangabe, vor der Farbdefinition, möglich:
“Spread-Radius” (optional)
Der “Überfüllungs-Radius”, er vergrößert bei positivem Wert den Schatten und weitet ihn aus – und umgekehrt.
Wenn kein Wert angegeben wird, wird der der Wert auf 0 gesetzt.

Anmerkung:
Wenn “inset” (optional)  als keyword angegeben ist, wird der Schatten nicht außen, sondern innerhalb des Rahmens gezeichnet.
Inset Schatten werden über dem Hintergrund, aber unter Rahmen und Inhalt dargestellt.

Browserangaben:
Für Firefox (Gecko):
-moz-box-shadow: 8px 8px 18px #6f7072;

Für Safari 3.0 (WebKit):
-webkit-box-shadow: 8px 8px 18px #6f7072;

Opera:
keine Unterstützung

Beispiele:

#box-shadow
{
-moz-box-shadow:8px 8px 15px #6f7072;
-webkit-box-shadow: 8px 8px 18px #6f7072;
background-color:#eee;
margin: 30px 0;
padding:5px 5px 5px 15px;
width:250px;
}

<div id=”box-shadow”>Beispielbox mit grauem Schatten.</div>

Damit man die Unterschiede sieht, habe ich hier ein paar Screenshots eingefügt:

Firefox:

Safari:

Der Internet Explorer:
Der IE unsterstützt dieses CSS3-Feature leider nicht, aber man kann mit folgenden Angaben auch einen Schlagschatten erreichen. Allerdings sieht das Ergebnis dann bei weitem nicht so schön aus – der Schatten ist wird viel härter dargestellt (sh. Screenshots).

Anmerkung: Die filter-Angabe beißt sich  mit dem  jquery-Effekt  “fadeIn”.

Browserangaben IE:
Ab IE 8:
-ms-filter:”progid:DXImageTransform.Microsoft.DropShadow(color=#6f7072, offx=2, offy=2)”;

Andere IE-Versionen:
filter:progid:DXImageTransform.Microsoft.DropShadow(color=#6f7072, offx=2, offy=2);

Screenshot IE 8:

Screenshot IE 7:

Ich habe ja sehr lange script.aculo.us mit prototype-js verwendet. Man kann sagen, das es zuerst da war und gut funktioniert. Es hat aber – wie alle Dinge im Leben – Haken und Ösen, die irgendwie das Leben schwerer machen.
moo-tools ist auch ganz nett – ich hatte aber nie die Gelegenheit es ernsthaft einzusetzen.

Und dann kam ein größeres Projekt an dem ich Frontendarbeiten machen durfte. Krudes HTML und dojo waren da schon vorgegeben – das nur vorweg, da es meine Einschätzung sicher auch negativ beeinflusst hat.
Ich kann nur eines zu dojo sagen: Nimm viele features und mache alles sehr, sehr langsam.
Das ist vor allem kein Spass, wenn man mit dem derzeit langsamsten Browser, dem Firefox arbeitet. Keine Frage, ich liebe den Fuchs, weil er extrem flexibel ist. Bei intensiven Javascript-Dingen erkennt man aber seine Grenzen. Und dojo ist das toolkit mit dem man diese Grenzen per einfachem Seitenaufruf sofort erreicht. Ich fand es richtig übel.

Irgendwann musste ich mir dann auch mal Alternativen zu script.aculo.us ansehen und muss sagen das jQuery schlicht genial ist. Hat auch seine Macken, aber alleine die saubere Plugin-Aufteilung ist genial – da kann script.aculo.us nicht mithalten. Und wer “flot” schon einmal gesehen hat – nun der weiss, dass dies alleine schon ein Grund ist, zu jQuery zu wechseln :-)

Ich würde mir dojo also nicht mal mehr aus weiter Entfernung ansehen wollen – sorry.

onreadystatechange FAILS Error: Permission denied for <http://test.deam.org> to create wrapper for object of class UnnamedClass Error: Permission denied for <http://test.deam.org> to create wrapper for object of class UnnamedClass readystatechange