Klingt komisch, ist aber ab und zu ganz nützlich. Worum geht es? Im Elementstack von jQuery liegt ein Element welches an einem anderen Ort wieder eingefügt werden soll. So sieht das HTML Element aus:
CakePHP ist genial, nicht nur was die Erstellung von Formularen angeht. Aber leider setzt der integrierte AjaxHelper Prototype voraus und als überzeugter jQuery-Nutzer kommt das für mich nicht in Frage.
Nun gibt es aber beim aktuellen Projekt folgendes Problem: Einem Projekt wird ein Kunde zugeordnet und jedes Projekt kriegt einen Ansprechpartner. Dieser Ansprechpartner ist in der User-Datenbank gespeichert und besitzt eine ID zu einem Kunden.
Legt man ein neues Projekt an und wählt einen Kunden aus, sollen nur noch die passenden Ansprechpartner angezeigt werden.
Diesmal geht es die Höhe von Div-Containern. Findige Designer haben sich ausgedacht ein Layout zu basteln, welches eine Fußzeile besitzt die immer am unteren Bildschirmrand klebt. Es sei denn der Inhalt ist größer, dann muss die Fußzeile mit runterrutschen.
Soweit kein Problem; vor einiger Zeit habe ich ein schönes Beispiel gefunden welches genau diese Problem löst, in allen Browsern und nur mit CSS. Was aber, wenn die Seite mit dem 960 Grid System CSS Framework aufgebaut wurde und nicht nur ein Footer hat sondern zwei?
Um genau zu sein, ist die Breite vom CSS Framework auf 960 Pixel beschränkt, der Footer mit Inhalten befindet sich innerhalb des umfassenden Containers, aber die Hintergrundgrafik soll über die gesamte Breite gehen.
Viele schöne Seiten präsentieren großflächige und hochauflösende Bilder. Natürlich wollen unsere Designer das auch und damit der geneigte Besucher Abwechslung bekommt und die Bilder mit dem Inhalt der Seite harmonieren können, wird die Seite mit TYPO3 aufgebaut und die Kopfbilder über die Seiteneigenschaften (Ressourcen / Dateien) selbst gepflegt.
Soweit kein Problem und schon tausendmal implementiert. Aber wie sieht es aus, wenn der Redakteur mehrere Bilder auswählt? Na logisch: auf der Seite werden sie sehr sanft übergelendet (fadeIn, fadeOut). Und klar, das passiert natürlich mit jQuery und dem genialen Plugin innerfadevon den medienfreunden.
Der neuste Release Candidate vom jQuery Userinterface 1.6 ist genial! Vor allem das neue Element, die Progressbar, hat es mir angetan. Die Bedienung ist sehr einfach, einem Element wird die Progressbar zugewiesen und die Bar dehnt sich in den gegebenen Proportionen automatisch aus.
Herrlich und sehr einfach mit einer Schleife in JavaScript zu verändern. Aber wie um alles in der Welt kriegt man die Bar dazu den aktuellen Status einer langwierigen PHP Operation wider zu spiegeln?
Folgendes Szenario: Für einen Kunden gibt es ein sehr umfangreiches Formular mit einer Menge Eingabemöglichkeiten, die voneinander abhängig sind. Zum Beispiel bedeutet die Auswahl von "monatlich", "vierteljährlich", "halbjährlich" und "jährlich" eine Veränderung der Auswahlbox von Monaten (0-11). Wählt man "halbjährlich" darf nur noch 0 oder 6 ausgewählt werden.
Nichts leichter als das, habe ich gesagt, jQuery kann schließlich alles. Töten wir den Internet Explorer? Nein, das können wir nicht (bla bla), dann wirds halt etwas komplizierter. Zum Eintrag Voneinander abhängige Selectboxen mit jQuery →
Diesmal kurz und knackig ein wirklich praktischer Tipp! Als verantwortungsvoller Webentwickler lege ich natürlich eine print.css an und versuche dem Kunden zu erklären, dass ein Ausdruck der Seite anders, aber super gut aussieht und das der aktuelle Webstandard ist und unbedingt eingesetzt werden sollte.
Aber die Antwort ist dann: "Das versteht doch kein Mensch. Können Sie nicht einfach einen Button einrichten um die Vorschau anzeigen zu lassen? Nach meinen Erfahrungen müsste das einfach zu machen sein."
Jaja... nicht aufregen. Lieber über die neue Aufgabe freuen und darüber bloggen: Wie und warum man eine CSS Datei dynamisch nachladen kann. Getestet in Firefox, Safari, IE6 und 7. Zum Eintrag CSS Dateien mit jQuery nachladen →
Mit TYPO3 kann man auf einfache Art eine Sitemap für das Projekt erstellen. Dazu fügt man ein neues Contentelement auf eine beliebige Seite ein und wählt den entsprechenden Ausgangspunkt. Fertig ist die verschachtelte und wenig ansehnliche Liste.
Jetzt gibt es eine ganze Reihe Extensions die hier ansetzen um ein bisschen Interaktivität reinzubringen. Aber warum so kompliziert? Wenn jQuery eingebunden ist, benötigt man nichts weiter als ein zusätzliches HTML Element, ein paar JavaScriptzeilen und etwas CSS.
Hier kommt ein Tutorial für eine interaktive, mehrsprachige Sitemap, die auch ohne JavaScript benutzbar bleibt und CSS Sprites benutzt. Getestet unter Firefox, Safari, Internet Explorer 6 und 7. Anwendbar auf jede verschachtelte Liste, mit einer dynamischen Demo.
Weiter gehts mit Tutorials für jQuery! Nach dem sich der erste Teil mit Navigation beschäftigen sollte, habe ich gemerkt, dass es keinen Sinn macht nur ein Tutorial darüber zu schreiben. Denn so einfach eine simple Liste mit Links auch aussieht; - umso mehr gibt es darüber zu sagen. Also wird es eine ganze Reihe Tutorials dazu geben!
Diesmal gehts um den Location Hash. Das ist der Teil der URL der mit einer Raute (#) von der restlichen Adresse getrennt ist. Bekannt von Sprungmakern (interne Seitenverweise) gewinnt er im Zusammenspiel mit neusten JavaScripttechnologien immer mehr an Bedeutung. Zum Eintrag Spaß mit location.hash und jQuery →
DAS FACEBOOK PROFIL IHRER TOCHTER
HAT MEHR KLICKS, ALS DIE WEBSEITE
IHRES UNTERNEHMENS?
