some new loader effect?
this is a small jquery plugin that renders something like a pump or glow effect by switching two css classes with jquery UI transitions in an endless loop.
the loop can be stopped by applying a stop class to the element.

watch the demo on this almost autogenerated github page:
Demo

Usage is like this:

 $('.status').pump({normal: 'normal',
                    pump: 'pumpup',
                    interval: 400,
                    stop: 'statusDone'});

Aus der Reihe: feine jQuery Plugins, um nicht zu sagen essentielle jQuery Plugins, heute:
jQuery Address

Damit kann man sehr einfach Deeplinks in Ajax getriebenen Seiten realisieren.

So lassen sich zum Beispiel verschiedene Zustände in einer Ajax Seite navigierbar machen, wie zum Beispiel einzelne Tabs via Link öffnen oder auch Akkordion Zustände.
Oder man kann Ajax Bereiche SEO technisch erfassbar machen.

Das Plugin nutzt auch die HTML5 History API, damit werden Ajax Zustände in die Browser History geschrieben, womit sich der Zurück Button dann auch damit nutzen läßt ohne die Seite neu laden zu müssen.
Auch kann man einfach die Url im Address Bar ändern.

Am besten schaut man sich mal die Beispiele auf der Demo Seite an.

Tolle Sache.

HTML5 bietet die Möglichkeit für custom data Attribute in HTML Elementen.
Diese beginnen mit dem Prefix data- und können danach beliebeig benannt werden.
Browser sollten diese Attribute ignorieren aber für interne Datenstrukturen sind sie sehr gut geeignet.

Zum Beispiel kann man sich in Javascript Paramter-Übergaben sparen und sich die Daten holen, die man braucht.
Das hält das Markup schön Javascript frei -im Sinne von unobtrusive.
In meinem Fall brauchte ich einen Event Tracker, der Aktionen auf dynamisch generierten Elementen aufzeichnet.

Dafür werden ins Markup die Attribute gesetzt und mit den dynamische Werten belegt:

<a data-mynamespace-query="<?php echo $q?>"
     data-mynamespace-site="<?php echo $s?>"
          href="<?php echo $l;?>" target="_blank">

Dann braucht man noch einen Event Listener, der sich die Daten holt und dann zB per Ajax zum wegspeichern versendet.
Mit Jquery sieht das dann so aus:

$(id + " a").click(function(event){
	var s = $(this).attr('data-mynamespace-site');
	var q = $(this).attr('data-mynamespace-query');
	var u = $(this).attr('href');
	$.post('/go/'+s+'/'+q+'?url='+u);
});

Ist doch ne saubere Sache :)

Man könnte Google Analytics Event Tracker so füttern, wie es in diesem Blog gemacht wird.

Vielleicht braucht es mal jemand, jedenfalls lassen sich “genamespacete” Tags in einer DOM (XML)document Instanz recht einfach mittels \: als Separator adressieren. Ein Beispiel: Ich möchte ein Dublin-Core Metadatum aus einem beliebigen Feed lesen:

(function($) {

  $('item').each(function() { $(arguments[1]).find('dc\:creator').[...]() } );

})(jQuery);

Dies entspricht wohl rein syntaktisch nicht ganz dem entsprechendem CSS3-Proposal (einzusehen unter http://www.w3.org/TR/css3-selectors/#typenmsp). Ich habe beide Möglichkeiten interessehalber auch einmal in einem aktuellen FF3.6 und Chromium getestet:

<style type="text/css">
/*<![CDATA[*/
  @namespace hanswurst url(http://www.meins.int)

  hanswurst|kaese
  {
    color: red;
  }
/*]]>*/
</style>
<hanswurst:kaese>
  Hanswurst liebt käse
</hanswurst:kaese>

Ergebnis: Naja, klappt nicht. Eventuell hat jemand eine Idee oder kann mich korrigieren?

Musste neulich so einen “Web 2.0 Mirror FX” haben und bin über 2 interessante Lösungen gestolpert:

Silverstripe & GD:
http://www.ssbits.com/web-2-0-mirrored-images/

jQuery & Canvas:
http://www.digitalia.be/software/reflectionjs-for-jquery#demo

weitergehende Erklärungen dazu spare ich mir jetzt mal, sind ja beide gut dokumentiert :)

meine Entdeckung des Tages:
jQuery hover Intent Plugin.

Mit der WebCam wird die Absicht des Users erkannt und nur ein Event getriggert wenn der MouseOver wirklich gewollt ist.

Möglicherweise ist es technisch etwas anders gelöst. Aber der Effekt ist gut!

die jQuery UI ist jetzt in Version 1.8 erschienen.

neben einer optimierten Codebasis

jQuery UI Core 71% smaller

gibt es auch wieder ein paar neue Widgets.

Wie z.B. das position widget, das ausgefallenere Positionierungs-Spielereien erlaubt:

“linke obere Ecke von diesem Element -20px 10px von der rechten unteren Ecke von $(‘#parent’) positionieren.”

function position() {
  $('#positionable').position({
    my: 'left top',
    at: 'right bottom',
    of: $('#parent'),
    offset: '-20 10'
  });
}

Kann man dann natürlich auch an Events hängen:

$("#parent").draggable({
  drag: function() { position(); }
});

Auch ein Autocomplete-Widget ist jetzt dabei (endlich !:)
sieht auch gut aus auf den ersten Blick.

Juitter ist ein Twitter Widget basierend auf jQuery. Damit kann man Twitter nach gewissen Keywords durchsuchen und die Anzeige als Widget mit wenig Code auf seiner Seite einbinden. Das alles ist rein clientseitig, was es noch einfacher macht.

Das geht so:
Juitter (1.0) runterladen, in sein Projekt kopieren.

Javascript einbinden:

<script language="javascript" src="/app/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script language="javascript" src="/app/js/jquery.juitter.js" type="text/javascript"></script>
<script language="javascript" src="/app/js/system.js" type="text/javascript"></script>

Container in die Seite einbinden:

<div id="juitterContainer"></div>

CSS einfügen:

#juitterContainer { overflow: auto; padding: 2px; font-size: 12px; height: 650px; width: 419px; border: 1px solid silver }
/*JUITTER PLUGIN CSS*/
#juitterContainer .twittList{margin:0;padding:0;} /* UL that will contain the list of tweets */
/* Bellow the list of tweets "<li>" */
#juitterContainer .twittLI{list-style:none;background:#EEFDEA;margin:0;padding:5px 0 0 0;border-bottom:dashed 1px #CAF8C9;padding:3px;clear:both;height:55px;}
#juitterContainer .twittList SPAN.time{color:#777;font-size:0.9em}
#juitterContainer .twittList A{color:#006600;} /*Links inside the tweets list */
/* Bellow the CSS for the avatar image */
#juitterContainer .juitterAvatar{float:left;border:solid 1px #D3EECA;background:#FFF;margin-right:5px;padding:2px;width:48px;;height:48px;}
#juitterContainer .jRM{float:right;clear:both} /*read it on twitter link*/
#juitterContainer .extLink{} /*CSS for the external links*/
#juitterContainer .hashLink{} /*CSS for the hash links
*/ /*end of Juitter CSS*/

und fertig!

Die Konfiguration geht in der system.js.
Dort kann man die zu suchenden Keywords einstellen, die Update Intervalle und noch einiges mehr.

Was noch etwas verbesserungswürdig ist, ist die Datumsanzeige, hier nimmt Juitter ganz einfach das von Twitter übergebene RFC 2822 Datum und stellt es dar.

Das geht auch schöner!
Dazu hab ich das jQuery PrettyDate Plugin genommen und mit Juitter gebündelt.
Also Plugin noch einbinden:

<script language="javascript" src="/app/js/jquery.prettydate.js" type="text/javascript"></script>

Dann Juitter ein wenig aufgebohrt, so dass man nun in der system.js eine dateFormat option hat:

//set your Date Format:
//locale: uses JS toLocaleString
//pretty: uses prettyformat like so: 3 Days ago
//normal: RFC 2822 formatted date

dateFormat: "pretty"

Sprach Einstellungen für prettyDate sind auch möglich:

$.prettyDate.messages = {
now : "gerade eben",
minute : "vor einer Minute",
minutes : $.prettyDate.template("vor {0} Minuten"),
hour : "vor einer Stunde",
hours : $.prettyDate.template("vor {0} Stunden"),
yesterday : "Gestern", days : $.prettyDate.template("vor {0} Tagen"),
weeks : $.prettyDate.template("vor {0} Wochen")

}

Und schon ist es ein bißchen schicker!
Den Bundle gibts hier (juitter.dateimproved) zum download.
Alles weitgehend ungetested und ohne Gewähr.
Bleibt zu hoffen, dass es in die nächste Juitter Version integriert wird.

… und das seit dem 14.1.
Es gibt zu dem Release eine Intro/Tutorial-Reihe ähnlich dem Symfony Adventskalender.
14days of jQuery heisst das ganze und findet hier statt:
-> jquery14.com/

Es gibt für 1.4 desweiteren eine überarbeite API Dokumentation.
-> api.jquery.com
die live Suche ist auf jeden Fall schonmal ein Riesengewinn!
Die einzelnen Abschnitte sind jetzt auch URL technisch cool aufrufbar:
zB. http://api.jquery.com/bind, wie man das zb. von php.net kennt …

Eine weitere coole Neuerung ist das JSON decoding bei den Ajax Funktionen.
Das kann dann entweder explizit als Datentyp angegeben werden, oder soll via mime type erkannt werden.
Ajax JSON Responses werden also automatisch decoded. – Fein!

Will man die Values einer Form dynamisch holen und mit Ajax verschicken mit Jquery
muss man wohl einiges beachten.
Eine gescheite -outthebox- Lösung scheints da nicht zu geben bzw. ich hab sie nicht gefunden.

1. Daten holen
Die Daten holt man am besten über die Jquery Methode serializeArray().

var s = $('#campaigns form').serializeArray()

Damit holt Jquery alle Values in dieser Form als Array, bei radio oder checkbox types jeweils die aktivierten.

2. Wie versenden?
Nun stellt sich die Frage, wie man die Daten schön aufbereitet und dann versendet.

Man könnte jeden Value manuell als Parameter angeben, ist aber ein wenig umständlich.
Am besten wäre eine Lösung die das Array in ein JSON String wandelt und damit einen Parameter zu füllen:

vars=JSON

Auf dem verarbeitetenden Server kann man den dann wieder decodieren und schön auf key:value pairs arbeiten.

Leider kann Jquery das nicht von Haus aus, dafür braucht es einen JSON stringifier.
Den gibts hier: http://json.org/json2.js

Damit gehts dann so:

$.post(url, {module : "saveCampaign",vars : JSON.stringify(s)},function(data){
createActvityDoneDiv_(randomId,data);
})

Auf dem Server decodiert man das dann:

$s = json_decode($_POST['vars']);

…und man bekommt sowas:

[0] = stdClass Object
(
[name] = Name
[value] = asdasdass
)

[1] = stdClass Object
(
[name] = status
[value] = enabled
)

Damit kommt ja schon klar auf dem Server
aber ist doch irgendwie ne scheiss Struktur.
So eine will man haben:

[Name] = asdasdass
[status] = enabled

Da muss der Client wohl noch was arbeiten:

var t = {};
s = $('#campaigns form').serializeArray();
jQuery.each(s,function(){
t[this.name]=this.value;
});
//und ab
$.post(url, {module : "saveCampaign",vars : JSON.stringify(t)},function(data){
createActvityDoneDiv_(randomId,data);
})

Dann gehts.