One and a half years since the last version and since I touched the code.

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.

Die Weihnachtsausgabe von Hausverbrauch.de ist fertig.

Nachdem in der letzten Version die Kostenrechnung eingeführt wurde, kann dies nun auch im Diagramm dargestellt werden. Und dabei haben wir gleichzeitig die Technik gewechselt. Das neue Diagramm basiert auf “Highcharts” – sieht besser aus und funktioniert auch auf modernen Smartphones. Wobei wir trotzdem empfehlen die Diagrammfunktion primär mit einem modernen Browser auf dem heimischen Computer zu betrachten.

Achja: Ganz nebenbei haben wir begonnen das gesamte Erscheinungsbild zu vereinheitlichen und aufzuräumen.

Bei Fragen, Problemen oder Ideen, bitte eine eMail an kontakt@hausverbrauch.de

Wer so wie ich viel mit jQuery macht, der nutzt sicher auch jQueryUI.

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?

Zwar wird der Wechsel von CSS 2 auf CSS 3 bekanntermaßen wohl noch etwas dauern. Aber eine hilfreiche Neuerung ist das CSS3-Modul “multi-column layout”. Auch wenn es nicht mehr wirklich “taufrisch” ist, möchte ich es trotzdem kurz vorstellen. Denn wenn die Seite nicht in allen Browsern gleich aussehen muß, spart man sich dadurch verschachtelte divs – von tables gar nicht zu reden…
Geeignete Anwendungen wären, Listenaufzählungen, Navigationslisten aber auch Textebereiche.

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

After my first release on last sunday I have to put out a first bugfix-version. So everything from the first post on this still fits, except:

• IE6 seems to go crazy with it. So I decided to remove support for all IE-browsers with version 6 and smaller – no worry, it degrades nicely.
• IE7 and IE8 of course do not support “opacity:value” in CSS. So the initial set-up with div-elements looked a bit strange. I integrated a small check with $.support.opacity on the append()-part.
• the plugin works nicely with jQuery 1.4.2 – demos are updated now.

Demos: demo1 jQuery 1.3, demo1 jQuery 1.4, demo2 jQuery 1.3, demo2 jQuery 1.4

Downloads: the minified version (2.2kb) or the full source.

btw.: I plan to publish it on the jQuery-plugins-page if I’ve rewritten the loop()-function – so maybe with version 0.4.