jQuery-Logo

Was mich in jQuery schon immer einiges an Nerven gekostet hat war der Animation-Queue. Legt man auf ein Element bzw. auf ein Event einen bestimmten Animationsablauf, und startet diese Animation z.B. durch schnelles hintereinander klicken auf den Trigger, so werden die Animationen aneinandergereiht und nacheinander ausgeführt, auch wenn man den Trigger vielleicht schon einige Sekunden nicht mehr geklickt hat.

Im Artikel Prevent Animation Queue Buildup auf Learning jQuery wurde nun beschrieben wie man besagtes Problem sehr einfach umgehen kann.

Des Rätsels Lösung ist die stop()-Funktion, bei der vor dem Start einer Animation erstmal alle anderen Animationen der selektierten Elemente gestoppt werden. Der Animationsfluss wird also unterbrochen sobald ein neuer Trigger ausgelöst wurde.

Sehr praktisch wird das ganze z.B. bei Hover-Events, wo der User durch schnellere Mausbewegungen sehr schnell einen unschönen Animation-Queue aufbauen kann.


Eine Sache die mich jeher an vielen Seiten stört die JavaScript-Funktionen nutzen ist, dass sie selten Permalink-Tauglich programmiert werden.

Ein Beispiel: Viele Webseiten setzen seit geraumer Zeit auf sogenannte Accordions um viele Inhalte auf wenig Platz darzustellen. Das Problem was diese Dinger jedoch oft haben ist, das ich keinen Link generieren kann der dem Empfänger genau das zeigt was ich ihm hier evtl. zeigen wollte.

Eventuell möchte ich mein Gegenüber mit einem Link genau auf eine meiner Referenzen hinweisen die ich eben mittels eines Accordions dargestellt habe. Bei den meisten Webseiten endet das dann mit Aussagen wie:

Hier der Link zu meinen Referenzen:
http://meinedomain.de/referenzen.html
Bitte scrollen Sie doch bis ans Ende des aufklappbaren Menüs und klicken Sie dann auf den Eintrag “Musterfirma”.

Das ist weder Zugänglich, noch benutzerfreundlich! Dabei wäre es mit Ankern doch so einfach! Wäre es nicht schön dem Kunden einfach eine URL wie z.B. http://meinedomain.de/referenzen.html#musterfirma zuzuschicken, und sobald sich die Seite lädt springt sein Browser direkt zu dem gewolltem Eintrag und blendet den besagten Punkt im Accordion automatisch ein? Natürlich wäre es das ;)

Kompletten Artikel lesen...


Greasemonkey ist fast schon ein Must-Have für Firefox. Mit diesem kleinen Plugin kann man ohne große Probleme bereits bestehende (fremde) Seiten mit nützlichen Funktionen nachträglich erweitern.

Im Prinzip steckt dahinter nichts als ein wenig Custom-JavaScript was beim aufrufen der Seite automatisch ausgeführt werden kann und somit den DOM der Seite nachträglich manipulieren kann. Neben der bestehenden Datenbank mit Greasemonkey-Scripten ist es natürlich auch interessant selber Hand anzulegen. Oft hat man Seiten die man relativ häufig benutzt, bei denen man sich aber die eine oder andere Funktion wünscht die noch fehlt. Beispiele wären z.B. das nachrüsten einer Tabellensortierung oder auch das verlinken von Geocaching-Tags auf Flickr.

Heute habe ich einen Weg entdeckt um auch in Greasemonkey die Features und Plugins von jQuery nutzen zu können. Alternativ kann natürlich auch folgende URL zum jeweils aktuellem Core genutzt werden: http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js. Sehr nützlich wie ich finde, denn so ist es nur noch ein Katzensprung bis zum eigenem Userscript.

Durch das duplizieren der ersten Zeilen kann man natürlich auch noch weitere JavaScript-Dateien mit ins Boot holen, also z.B. auch jQuery-Plugins auf die man dann im Customcode zugreifen kann.


Für jQuery gibt es einen ganzen Batzen an Plugins, und einige davon braucht der fleißige Webentwickler auch von Zeit zu Zeit, z.B. die Thickbox oder iFixPng2.

Manchmal findet man jedoch auch sehr innovative und originelle Plugins, so z.B. jParallax. Parallax ermöglichst es dem User eine Art 3D-Gefühl zu vermitteln, und das ganz einfach durch die Überlagerung mehrerer 2D-Ebenen und der Möglichkeit diese mittels der Maus zu bewegen.

So hat man z.B. die Möglichkeit mehrere Fotos freizustellen und wie auf einer Bühne hintereinander zu platzieren um später mit der Maus den Viewport dynamisch versetzen zu können.

Dabei zeigen die Demos gleich mögliche Anwendungsgebiete, so z.B. eine Karte, einen Bergsteiger oder auch andere Spielereien.

Das Prinzip ist ähnlich wie die Verschiebung der Hintergrundgrafiken auf der Webseite von Silverback. Sobald man das Browserfenster horizontal erweitert oder verkleinert kommt ein räumliches Gefühl auf.

Das Plugin ist sicherlich nichts für den täglichen Gebrauch, doch eventuell findet sich ja die eine oder andere nützliche Verwendung. Vielleicht kommt es auch ganz gut als Gimmick in Headern die auf den ersten Blick zwar statisch aussehen, bei einem Mouseover dann aber zum Leben erweckt werden…

via: Webappers


Mhm der Titel klingt wohl etwas verwirrend, aber egal. Ich sitze gerade an einem kleinen Statistiktool in dem ich den beliebten Datepicker aus jQueryUI benutze.

Das “Plugin” ließ sich auch leicht installieren, doch ich wollte mir nach der Auswahl des jeweiligen Datums den Klick auf den Absende-Button für das Formular sparen, da es in dem Formularfeld eh nur die Auswahlmöglichkeit für den jeweiligen Tag gab.

Also kurz in der Dokumentation gewühlt und dabei auf onSelect gestoßen, Code der also ausgeführt wird sobald man ein Datum im Datepicker ausgewählt hat.

Zusammen mit dem Code zum automatischem Absenden kann die Verwandlung eines Inputs in eine komplexe Datumsbox daher so aussehen:

$(document).ready(function(){
	$("#datepicker input.date").datepicker({
		onSelect: function(dateText){
			$(this).parent("form")[0].submit();
		}
	});
});

Also eigentlich relativ einfach. Das Snippet sucht nach dem Klick auf ein Datum das übergeordnete Form-Element und schickt dieses automatisch ab. Hach, jQuery ist einfach toll :)


jQuery-Logo

Gerade ist mir bei Learning jQuery das praktische jQuerify Bookmarklet über den Weg gelaufen.

Wie, wo, was? Ein Bookmarklet für jQuery? Wozu?

Einfach den Bookmarklet-Link in die Favoriten ziehen, danach kann man nun auf jeder Seite mit einem Klick auf das Bookmarklet den jQuery-Core laden und in der JavaScript-Console (z.B. über Firebug) beliebigen jQuery-Code auf der Seite ausprobieren.

Zur Bestätigung erscheint nach dem aktivieren des Bookmarklet eine kleine Box mit der Aufschrift: This page is now jQuerified

Wie ich finde eine praktische Sache um auch auf Seiten die noch kein jQuery nutzen oder an dessen Zugangsdaten man gerade nicht kommt, mal lokal und auf die schnelle ein wenig mit jQuery zu spielen.

P.s.: Juchu, gewonnen!


Man merkt das Sommerloch auch hier irgendwie, da ich ja auch nicht der tausendste sein möchte der über irgendein ausgelutschtes Thema schreibt sieht es hier aktuell leider etwas leer aus, aber das wird wieder, versprochen!

Solange dann also doch etwas Grundrauschen:
Meine beiden Lieblingsframeworks erfahren in den nächsten Tagen einige Updates. Das betrifft zum einen das PHP-MVC-Framework CakePHP als auch das JavaScript-Framework jQuery.

In der Bakery kam kürzlich die Ankündigung das die erste Stable-Version von CakePHP 1.2 nun in den Startlöchern steht. Zeitgleich wurde dazu aufgefordert sich doch am Testing zu beteiligen um die Entwicklung noch weiter voran zu treiben.

Ich verfolge die Entwicklung von CakePHP nun seit über einem Jahr, fast täglich wird dabei die SVN-Version mit Updates versorgt, auch wenn leider nur selten ein Export in die öffentliche Version stattfinden, so machen die Entwickler durchaus ihre Hausaufgaben, was mich doch stark hoffen lässt das CakePHP 1.2 Stable ein großer Erfolg sein wird.

Was jQuery angeht, so hat der Erfinder John Resig vor ein paar Tagen eine Video-Präsentation veröffentlicht die den alles erklärenden Titel What’s Next in jQuery and JavaScript? trägt.

Dabei wurde unter anderem auch der Plan für die nächsten Versionen des beliebten Frameworks veröffentlicht. So soll bereits in einigen Tagen jQuery 1.2.4 den Weg zu uns finden.

jQuery 1.2.4 hat demnach als Kernpunkte zwei wesentliche Verbesserungen:

  1. Das Plugin dimensions.js wird direkt in den Core integriert.
  2. Weitere Performance-Optimierungen

Ob die Integration der dimensions.js so eine gute Idee ist weiß ich gerade nicht, immerhin vergrößert dies abermals die Core-Datei… und gerade jQuery hatte mich damals wegen der minimalen Größe und der grandiosen Plugin-Fähigkeit gereizt. Es mag sein das viele Projekte und auch Plugins die dimensions.js benutzen, dennoch bin ich eher dafür solche Sachen weiterhin Optional zu lassen. Wer jQuery nur für einige kleine Effekte und Funktionen benötigt ärgert sich eh schon über jedes nicht benötigt Kilobyte mehr.

John gibt zudem auch Infos zum nächsten großen Schritt: jQuery 1.4. So soll jQuery 1.4 bereits in diesem Sommer erscheinen und weitere Geschwindigkeitsvorteile mitbringen, nichts weltbewegendes bisher also.

Worauf er in dem Video ebenfalls eingeht ist jQuery UI 1.5, auf das denke ich viele von uns schon gespannt warten. Die Homepage dieses Widget-Pakets wurde übrigens vor kurzem ebenfalls optisch überarbeitet.


jQuery-Logo

Zum Ende des Wochenendes noch ein kleiner und wahrscheinlich für erfahrene Programmierer bereits bekannter Kniff zu meinem Lieblingsframework jQuery.

Viele kennen das Problem: Man betreibt eine Seite mit vielen unterschiedlichen jQuery-Plugins oder möchte der Übersichtlichkeit halber seinen Code in mehrere Dateien auslagern. Nun ist jedoch oft der Fall, dass man so manches Plugin oder Script nur auf einigen Unterseiten benötigt. Je nach Seitengröße und Masse des Quelltextes kippt man dem Besucher also oft Dateien auf den Ladebalken, die er in vielen Fällen wahrscheinlich gar nicht braucht. Man kann die Einbindung der einzelnen Dateien natürlich auch Serverseitig über IF-Abfragen steuern, dass ist jedoch ziemlich unflexibel und mühselig.

Nun bin ich heute über die jQuery-Funktion getScript gestolpert. Die Funktion kann aus dem Code heraus an jeder beliebigen Stelle also zusätzliche JavaScript-Dateien abrufen und parsen. Es ist somit unter anderem möglich beim auftreten eines bestimmten Selektors (und nur dann) ein angelegtes Plugin einzubinden.

In der Praxis könnte das also z.B. so aussehen:

if($("div#accordion").length){
      $.getScript("/js/plugins/jquery.accordion.js");
}

Mit length überprüfen wir einfach ob der beschriebene Selektor irgendwo im DOM vorkommt, wenn ja wird das Plugin geladen und ausgeführt.

Für viele wohl nichts Neues, aber für Einsteiger vielleicht Hilfreich.


Ach nun habe ich schon mehrere male mich daran versucht einen ordentlichen Jahresrückblick für mein 2007 zu verfassen, leider bisher ohne Erfolg. Da kommt man vom hundertsten ins tausende und schweift einfach automatisch zu sehr ab. Eine simple Auflistung der Themen des Jahres wäre auch zu Stumpf, denn dafür gibt ja seit einigen Monaten das Archiv.

Also will ich mich nochmal daran versuchen das Jahr 2007 kurz und knapp Revue passieren zu lassen. Mal sehen obs diesmal was wird :)

Kompletten Artikel lesen...


jQuery-Logo

So, nach langer Zeit mal wieder ein Beitrag aus meiner Praxiserfahrung mit jQuery.

Seit gestern verziert die Sidebar dieses Weblogs nun auch mein Flickr-Stream, der über den wohl vielen Flickr-Nutzern bekannten Badge-Generator erzeugt wird. Hierbei wird über ein kleines JavaScript eine Liste der zuletzt veröffentlichten Fotos aus dem eigenen Flickr-Profil ausgegeben, nach einem Klick auf das jeweilige Bild landet man dann auf der jeweiligen Flickr-Seite.

Nun hat mich an dem Script ein wenig gestört, dass der User erstmal meine Seite verlassen musste um sich ein Foto anzusehen (zumindest die Leute ohne einen coolen Browser) und zum anderen hatte ich die fixe Idee, die Bilder direkt über die eh schon integrierte Thickbox anzeigen zu lassen.

Da man das JavaScript des Badge-Makers nicht direkt beeinflussen kann musste ich mir mit ein wenig jQuery-Magic behelfen.

Der Badgemaker macht erst einmal folgendes: Er holt die letzten x Thumbnail-Bilder des eigenen Flickr-Profils ab, und packt diese als <img /> in den DOM, je nachdem wo wir den Scriptaufruf in unser HTML gepackt haben. Um das Bild herum baut er natürlich auch gleich den passenden Link zur jeweiligen Flickr-Seite. Das schöne daran ist zudem, das z.B. der Titel des Bildes direkt im Alt-Atribut des Bildes zu finden ist.

Kompletten Artikel lesen...


Download: htn_kickstart

Gerrit van Aaken hat gestern sein HTML/CSS/JS-Kickstart-Paket vorgestellt. Eine sehr feine Sache wie ich finde, die jeder Webentwickler auf der Festplatte haben sollte.

Der Ablauf ist ja fast bei allen Entwicklern der selbe. Man macht/bekommt eine Layout-Datei welche nun im nächsten Schritt in ein XHTML-Dokument portiert werden muss um danach dann in den meisten Fällen als Template für ein CMS dienen zu können.

In einem Startup-Paket werden dabei alle Features vereint die man bei einer Design-Umsetzung in den meisten Fällen eh benötigen würde. Bei mir heißt das das eine index.html mit einer gewissen Struktur samt DOCTYPE und Metatags vorhanden ist, als auch eine Ordnerhierarchie mit CSS-Dateien für Screen, Print und Browserhacks (IE6).

Das CSS beinhaltet zudem bereits einige Resets und Klassen die sich im Alltag als nützlich erwiesen haben.

In Gerrits Paket wurde zudem bereits jQuery integriert, was ich als sehr nützlich ansehe, denn mittlerweile gehört auch jQuery bei mir zu fast allen neuen Umsetzungen dazu.

Da mir das Kickstart-Paket sehr gefallen hat habe ich mir dieses einmal vorgenommen und meinen persönlichen Ansprüchen nach noch einmal modifiziert, denn nur so ist ein schneller Start aus meiner Sicht möglich. Jeder hat einen etwas anderen Workflow und somit auch unterschiedliche Vorlieben was solch ein Paket angeht. Wer sich evtl. für meine Vorlieben interessiert, kann sich nun also auch meine Modifikation herunterladen.

Im Prinzip wurde dem Paket erstmal ein gewisses Grundmarkup beschert, was sich hier jedoch auf <div id="wrapper"> und ein <h1> beschränkt. Denn diese beiden Elemente sind aus meiner Sicht erstmal bei jedem Projekt der Grundstein. Das CSS-Reset von Eric Meyer wurde in die screen.css übernommen und ein wenig komprimiert. Das spart ein wenig Ladezeit. Die ie7.css wurde ebenfalls verbannt, da ich in letzter Zeit eher weniger Probleme mit dem IE7 hatte und daher die kleine Anzahl an Hacks auch in die screen.css übernehmen kann.

Ansonsten wurden noch einige Feinheiten wie z.B. ein Favicon zur schnellen Identifikation im Browser, robots.txt, sowie einige Metatags beigelegt. Schauts euch einfach an und sagt mir eure Meinung.


Ich hoffe hier entsteht nicht der Eindruck ich würde nur noch über meine beiden Lieblingsframeworks schreiben, doch gerade bei jQuery passiert in der letzten Zeit doch eine ganze Menge.

jQuery UI ist die Weiterentwicklung der vielleicht dem ein oder anderen bekannten Erweiterung Interface Elements. Das Release wurde eigentlich für gestern, also Sonntag den 16.09.07 angekündigt, fand jedoch erst vor einigen Minuten den Weg in den offiziellen Weblog. Die Subdomain ui.jquery.com war jedoch schon seit gestern zugänglich.

Auf den ersten Blick macht jQuery UI einen ganz passablen Eindruck. Derzeit stehen den fleißigen Entwicklern folgende Module/Plugins zur Verfügung:

Wer die Interface-Elements kennt, der wird in dieser Liste so ziemlich alles bereits einmal gesehen haben. Leider war es in der Vergangenheit nicht mehr Möglich die Interface Elements wirklich zu nutzen, da diese nur bis zu jQuery 1.1.2 unterstützt wurden. Die Demos von jQuery UI lassen aber vermuten das jQuery UI gerade in der Performance um einiges besser abschneiden dürfte und durch die offizielle Unterstützung auch in Punkto Kompatibilität am Ball bleibt.

Ähnlich wie bei den Interface Elements kann man sich auch bei jQuery UI seine benötigten Module zusammenklicken und herunterladen. Selektiert man alle Module kommt man derzeit auf eine Größe von 60KB (Minidfied, ohne Gzip).

Das liegt natürlich schwer im Magen, doch wer benötigt auf einer einzelnen Seite schon alle Module? Wenn doch, so sind 60Kb für das Mehr an Funktionen aus meiner Sicht dennoch ein Leichtgewicht.

Was neu ist sind die vorgefertigten CSS-Themes für jQuery UI. Derzeit stehen für die Module 3 unterschiedliche Themes zum Download zur Verfügung, die man sich für die eigene Applikation natürlich auch nach belieben anpassen kann.

Ganz nebenbei wurde heute morgen eine kleine Bugfix-Version vom jQuery-Core veröffentlicht, die im übrigen Pflicht zur Verwendung von jQuery UI ist, sofern alles richtig funktionieren soll.

Aus meiner Sicht bringt jQuery UI einen echten Mehrwert für das Javascript-Framework. Die einzelnen Plugins sind, wie man es von jQuery gewohnt ist, sehr leicht nutzbar und können sicherlich in vielen Applikationen sehr nützlich sein. Bleibt nur zu hoffen das nun nicht jede 2. Seite im Netz mit unnötigen Effekten daher kommt :)


Ich weis nicht wie es euch geht, aber ich bekam immer kleine Schweißausbrüche sobald ein Kunde in einem skalierbarem Layout abgerundete Ecken für Boxen oder dergleichen haben wollte.

Nicht dass solche Rundungen nicht schick aussehen würden, doch aus semantischer Sicht bzw. aus Sicht auf Punkto “Wartbarkeit” war das für mich bisher immer ein Graus.

Was sich früher durch monströse Tabellenkonstrukte eh mehr schlecht als recht umsetzen ließ benötigte bis vor kurzem auch bei tabellenfreien Layouts meist bis zu vierfach verschachtelte DIV-Elemente, pro Box versteht sich.

Weil ich eigentlich immer versuche meinen Quelltext so übersichtlich und schlank wie nur möglich zu halten habe ich mich daher bisher oft vor den Rundungen gefürchtet.

Damit macht das gerade entdeckte jQuery-Plugin jQuery Roundcorners Canvas nun anscheinend endlich Schluss. Das Plugin scheint alle Faktoren die man an solch ein Script stellen könnte zu vereinen:

Zum Ladevolumen muss zusätzlich natürlich noch das jQuery-Framework gerechnet werden.

Sicherlich, bei einer einzelnen und relativ festen Box macht das Plugin wahrscheinlich keinen wirklichen Sinn. Soll jedoch eine Box in der breite/höhe flexibel sein und zudem Ihre Farbe evtl. auch einmal schnell wechseln können, so ist das Plugin sicherlich eine echte Bereicherung.

Wo ich noch keine Schlüsse ziehen konnte ist die Performance. In der Demo konnte ich jetzt auf die schnelle keine Geschwindigkeitseinbußen feststellen, aber vielleicht sieht das auf älteren Systemen ja anders aus?


Der nette Veit wies mich gerade darauf hin das soeben mein lieblings Javascript-Framework jQuery endlich in Version 1.2 veröffentlicht wurde.

Mit dem Versionssprung sind auch einige Neuerungen einhergegangen. Eine ganze Hand voll neuer Selektoren, Attribute und auch Effekten hat den Weg in die neue Version gefunden.

XPath-Selektoren wurden sofern ich das herauslesen kann nun aus jQuery 1.2 herausgelöst und werden optional als separates Plugin angeboten.

Ein neuer Effekt ist z.B. die Color Animation wodurch sich sehr einfach Farbübergänge zaubern lassen. Mit dem Effekt können derzeit folgende CSS-Properties animiert werden:
backgroundColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, color, outlineColor.

In der Ajax-Funktionalität wurde nun alles auf die große $.ajax()-Funktion ausgelegt, die seit längerem schon alle separaten Ajax-Funktionen in einer vereint. Die bisher als deprecated markierten Funktionen (wie z.B. loadIfModified()) wurden nun aus dem Core entfernt, wodurch es bei älteren Scripten evtl. zu Fehlern kommen könnte. Kurzzeitige Abhilfe schafft da das jQuery 1.1 Compatibility Plugin.

Mit dem Update ist das Framework leider wieder ein wenig gewachsen und zwar auf nun mehr 26 Kilobyte in gepackter Form. Immerhin mal wieder ein Sprung um 4 Kilobyte. Um dem entgegen zu wirken wurde nun auf einen Beitrag von Julien Lecomte hingewiesen, indem beschrieben wird wie man mit ein wenig PHP bzw. dem GZip-Modul jQuery mit nur noch 14 Kilobyte ausliefern kann. Ich habe dieses “Verfahren” schon bei einigen Seiten in Gebrauch und dabei bisher keine Nachteile erlebt.

Wer generell all seine .JS und evtl. auch .CSS-Dateien in gepackter Form ausliefern möchte sollte sich evtl. den Blogpost Compressing Javascript with PHP anschauen. Dort wird beschrieben wie man mit Hilfe von PHP, GZip und mod_rewrite generell all seine Javascript-Dateien über das GZip-Modul ausliefern lassen kann.


Auf immer mehr der von mir erstellten Webseiten kommt in der letzten Zeit das jQuery-Framework zum Einsatz. Die Anwendung ist aus meiner Sicht genial einfach und dennoch super flexibel. Innerhalb weniger Stunden kann damit auch ein Javascript-Laie erste kleinere Ajax-Funktionen in seine Seiten implementieren.

Seit geraumer Zeit bietet jQuery nun auch den Bezug des Frameworks über den Amazon S3-Service an.

Mit Amazon S3 ist es möglich die gleiche Servertechnik wie das Amazon-Portal zu nutzen, was theoretisch eine fabelhafte Performance und eine nahezu hundertprozentige Ausfallsicherheit bedeutet.

Kompletten Artikel lesen...


jQuery-Login Screenshot

Nun habe ich mich ja in letzter Zeit neben CakePHP auch mit dem jQuery-Framework beschäftigt, und in diesem Zusammenhang eine kleine “Probeanwendung” gebaut, nämlich eine Login-Seite mit Ajax-Funktionalität. Für den ein oder anderen stellt sich nun sicherlich die Frage, ob solch eine Funktion wirklich sinnvoll ist…doch für mich zählt hier eher die Erklärung als der Sinn des Ganzen :-).

Wie das Ganze später aussehen könnte seht ihr in dieser kurzen Demo (richtiger Login: gast:gast). Das ganze wurde grafisch natürlich ein wenig aufgepeppt. Um die jQuery-Animationen auf dem variablen Hintergrund hinzubekommen musste auf das PNG-Format zurückgegriffen werden, zudem wurde für die IE6-User ein PNG-Behaviour eingesetzt.

Kompletten Artikel lesen...


Vor einiger Zeit begann ich ja das CakePHP-Framework für mich zu entdecken. Schneller ging die Arbeit damit schon nach kurzem Lernprozess von statten, ohne dabei seine Flexibilität irgendwie einengen zu müssen.

Nach diesem positiven Startschuss in Sachen Framework-Erfahrung habe ich mich heute an das jQuery-Framework heran getraut und bin wirklich begeistert. Die Syntax ist dank Gerrits Vortrag schnell erklärt, und eine kompakte Dokumentation zum Mitnehmen findet man bei Visual jQuery und Bennadel (vorsicht, PDF-Dokument).

So habe ich mich nun heute einige Zeit daran gesetzt die ersten Schritte zu gehen, und sie vielen mir so einfach wie nie, ich war wirklich überrascht.

Man muss dazu sagen, dass ich was JavaScript bisher angeht wirklich nur seeeehr oberflächliches Wissen habe.

Ich denke das ich in die nächsten anstehenden Projekte sicherlich die ein oder andere sinnvolle Funktion einbauen werde, gerade bei dieser Zeitersparnis. Das lernen macht durch die tollen Animationen sogar noch ein wenig mehr Spaß als mit Cake :)

Wenn mir nun noch jemand sagen könnte wie man in jQuery bzw. Javascript allgemein so etwas wie eine “Pause” einbinden kann (z.b.: slideOut(), dann 5 Sekunden warten, dann wieder slideIn(), das wäre super! Was mir auch noch so Gedanken macht sind Schleifen jeglicher Art in JavaScript (also z.B. alle <li> eines <ul> nacheinander durchlaufen.

Für Antworten bin ich jederzeit zu haben…und natürlich werde ich einige meiner Lernerfolge hier auch protokollieren :)


Nur nochmal Blümchen, herrliche Farben wie ich finde.

Wie evtl. einige schon mitbekommen haben, nutze ich seit der neuen Hackthenet-Version eine Art Lightbox, welche jedoch auf den Namen Thickbox hört und einige tolle Vorteile mit sich bringt.

Zum einen wäre da, das die Thickbox “nur” 31Kb wiegt. Die Thickbox basiert zudem nicht auf den JS-Frameworks Scriptacolous oder Prototype sondern auf dem immer beliebteren jQuery. Da wäre also schon der zweite Vorteil. jQuery bringt viele gute und tolle Effekte mit sich, welche in der 31KB-Variante der Thickbox also bereits integriert wären. Wer eine kleine Kostprobe will, der möge einfach auf das Artikelbild klicken :)

Die Thickbox bietet jedoch noch andere Vorteile:

Zum einen werden Bilder automatisch der Browsergröße angepasst, kommt also jemand mit einer 800×600 Auflösung daher bleibt ihm das Scrollen erspart, das Bild wird automatisch proportional herunter gerechnet. Das ganze wird dann zwar etwas pixelig, jedoch ist diese Methode ja auch nur für die Ausnahme bestimmt.

Ein weiterer Vorteil ist, das die Thickbox nicht nur mit allen möglichen Bildformaten umzugehen weis, nein, jeglicher Browserinhalt kann mit Ihr hervorgehoben werden, sei es ein JPG, PNG oder auch ein PDF. Worauf ich jedoch hinaus will, ist die Möglichkeit von AJAX abrufen, also auch der Nutzung von HTML innerhalb der Thickbox, so ist es z.B. möglich ein schickes Loginformular bei einem Klick einfaden zu lassen, wirklich etwas sehr nützliches und innovatives.

Auch eine Galerieunterstützung (also das Vor und Zurückklicken innerhalb einer Bildershow) ist kein Problem.

Einzig Abstriche beim Effekt muss man evtl. tätigen, so klappt sich die Bühne nicht wie bei der Lightbox auseinander, sondern wird “nur” durch eine schöne Ladeanimation angekündigt und dann eingefadet.

Und noch ein Tpp:

Wer übrigens wirklich nur mal eben ein Bild schön einbinden möchte, dabei die 100KB der Lightbox scheut und die tollen Dinge der Thickbox nicht benötigt, der sollte auf die Slimbox zurückgreifen.

Sie arbeitet mit dem Mootools-Framework und ist Alles in Allem nur 21Kb “fett”. Die Slimbox unterscheidet sich im Effekt und der Anwendung dabei in keinster Weise zur Lightbox 2.0.



Blogsuche

RSS-Feeds

Plaste & Plastik

plasteundplastik.de - Das Geocaching-Weblog

Die Kategorien


Netz-Fundstücke


Meta / Propaganda