Ein Dashboard hat bestimmt schon jeder mal gesehen. Eines bei dem man die Elemente bewegen/verschieben kann bestimmt auch.

Wie man das macht und was man dazu braucht wird hier in dem folgenden Tutorial erklärt. Und sogar auf Deutsch

In diesem Tutorial beschreibe ich, wie Ihr ein Drag & Drop Dashboard mit automatischem Speichern in Cookies mit Javascript und Mootools realisiert.

Dazu benötigt Ihr Grundkenntnisse von Javascript und Mootools sowie ein wenig CSS & HTML Kenntnisse.

Einfaches Javascript Dashboard mit MooTools (Mirror)

via: webmasterpro.de

Mootools ist eine tolle JS Sammlung.
Noch besser wird diese mit folgenden Erweiterungen:

• FancyForm is a powerful checkbox replacement
• RabidRatings is a simple but eye-caching ratings system
• SlideItMoo is a banner rotator, article spinner and image slider
• FormCheck is a class that allows you to perform different tests on form

Und hier sind noch mehr davon.

via neoterisch.de

Jeder kennst sie, und jeder möchte eine verwenden.
Aber da es ja so viele davon gibt, fällt manchmal die Auswahl schwer.

Hier ist eine Übersicht die Abhilfe schaffen soll:
10 Javascript Lightboxes im Vergleich

via: http://blog.wowa-webdesign.de/

Ist ja nichts neues aber hier sind mal ein paar ausführlichere Details dazu:

A useful but often overrated JavaScript function is the browser detect. Sometimes you want to give specific instructions or load a new page in case the viewer uses, for instance, Safari.

• Browser detect

Zur geht ja es ja durch die Presse (da kommt das her), dass Microsoft den von der EU auferlegte Browserauswahl nicht so tolle und vorallem nicht sehr zufällig hinbekommen hat.

(Diese Forderung von der EU, ist meiner Meinung totaler bullshit !! Man könnte mit den Kriterien ja auch sagen, Mac OS X bietet keinen alternativ Browser an und dann heulen und sich beschweren. Wenn Microsft "Balls of steel" hätte, dann würde es sich diese kratzen und diese Verordnung ignorieren. Denn denkt euch einfach mal Microsoft weg. Wo wären wir dann ? aber das würde nun zu weit führen...)

Nun denn die Auswahl der Browser soll ja zufällig sein, ist sie aber nicht so richtig:

Hatte Microsoft anfangs vor, den IE prominent ganz vorne zu platzieren, kam man schließlich mit den Kartellwächtern überein, dass die Anzeigereihenfolge zufällig zu wählen sei. Dann habe jeder der Browserhersteller eine Chance und die Nutzer nähmen nicht gewohnheitsmäßig den Browser, der als erstes auftaucht. Wer sich in der Informatik auskennt, wird jedoch wissen, dass die Generierung von Zufallswerten, auf denen die Darstellung basiert, kein ganz triviales Unterfangen ist. Macht man es falsch, gibt es statistische Ausreißer.

• Entwickler kriegen Zufall nicht hin (Alleine diese Überschrift...grrr)

Nun denn hat sich ein gewiefer IBM Entwickler mal daran gemacht dies zu analysieren:
• Doing the Microsoft Shuffle: Algorithm Fail in Browser Ballot
Lest ihn mal durch. Sehr interresant.

Random is not the same as being casual. Getting random results on a deterministic computer is one of the hardest things you can do with a computer and requires deliberate effort, including avoiding known traps.

Also fangt nun nicht mit der "M$ ist zu doof" Linie an, sondern versucht das mal selber besser zu machen.

JavaScript hat schon alles abbekommen.
Von zu viel Bling Bling bis zu langsam und unnötig. Nun ist es einfach nicht mehr weg zudenken.

Nun hat sich jemand die Aufgabe gemacht all die unmöglichen Fehler die die Sprache so hat zu sammeln.
Dabei kommt so was heraus:

(true + 1) === 2;? ?// true

(true + true) === 2; // true

true === 2; // false

true === 1; // false

Mehr gibt es hier:
• http://wtfjs.com/

Da hat jemand zu viel Zeit.

Windows 3.1 im Browser

Ha, mal endlich wieder was mit mootools gemacht.

Dabei war ich auf der Suche nach Beispielen, denn man muss ja nicht immer das Rad neu erfinden.

48 incredible Mootools Sripts By Jeeremie

Viel Spass mit den Beispielen !

Wer Google Analytics im Einsatz hat, sollte immer bedenken, dass das einbinden von fremd Scripten die Seite lahm legen, oder sogar komplett unaufrufbar machen kann.

Nun hat Google sein Javscript aktualisiert, dass man in seine Seite einbaut.

Damit werden nun die Daten verzögert geladen und somit vermieden, dass die Auslieferung der Website blockiert wird.

Mehr Details und das neue Script findet man hier:

Google Analytics Launches Asynchronous Tracking Tuesday, December 01, 2009

Es gibt keinen besseren Weg eine Strucktur darzustellen als die Darstellung als "Baum".

In dem folgenden Beitrag finden man nun 10 Beispiele wie man so entwas lösen kann.

Javascript Tree view and sitemap are good tools to display the structure of your website. I have collected 10 plugins and tutorials that will save your time hunting for one.

10 Javascript & CSS TreeView and Sitemap Plugins and Tutorials

Banana
out.

Ich hatte schon mal über die Erstellung von Diagrammen mit JS oder Flash geschrieben.

Nun gibt es hier noch eine weitere Sammlung die noch mehr Scripte anbietet und sogar Beispiele liefert:

Wont it be nice if all your theoretical data were presented as charts? Charts add style and spice up the graphical intereface. Style your content and layout with my handpicked collection of best JavaScript Charting plugins.

20 Best JavaScript Charting and Plotting Libraries

Man kann ja ein Formular ja via JavaScript absenden:

document.forname.submit();

So nun ist aber komischer weise, der Absendeknopf dann nicht in dem POST enthalten.

Ich verwende den button tag und nicht den input tag für den Absende Knopf, daher kann es sein, dass der input tag dann trotzdem vorhanden ist.

Nur wenn ich diesen nun auch drücke, dann ist diese in POST enthalten.

Nun gibt es aber auch eine Lösung die wirklich das drücken des Knopfes via JS nachmacht und zwar so als hätte der Benutzer wirklich darauf gedrückt.

document.getElementById('submitButton').click();

Somit ist auch der Button im POST enthalten und mann kann diesen abfragen.

Banana
out.

Schöner vergleich der aktuell verfügbaren JS Frameworks.

JavaScript Framework matrix

Banana
out.

Man kennt ja den Mootools calendar aber nun habe ich noch einen gefunden, der mindestens genauso gut ist.



Calender Eightysix documentation and examples

Banana
out.

Nein ich meine nicht das Putzmittel.
Ich meine das hier.

Und wie lernt man das nun ?

Am besten mit Beispielen und Anleitungen

How AJAX Works: 10 Practical Uses For AJAX

Most Wanted Ajax Techniques: 50+ Examples and Tutorials

Viel Spass

banana
out.