Entries tagged as jquery

2007-10-16 Barrierearmes jQuery Dropdown Menü

Letzte Woche erhielt ich eine schriftliche Einladung vom MAIN_blogs-Team an der Accessibility Blog Parade teilzunehmen.

Wenn man schon so nett eingeladen wird, und es auch noch um ein so engagiertes und sinnvolles Projekt handelt, kann man natürlich unmöglich nein sagen :-)

Mein Beitrag zur Blog Parade und zur verbesserten Barrierefreiheit ist (m)ein:

Barrierearmes jQuery Dropdown Menü

Das jQuery Plugin basiert auf dem "accessible onchange select menu" von The Man in Blue.

Dieses Script besticht durch die intuitiven Auswahlmöglichkeiten eines Menüpunktes, in einem Select-Formular-Element, rein über die Tastatur. Bestätigt wird die Auswahl durch die Enter-Taste oder über das Verlassen des Elements mit der Tabulator-Taste. Die Auswahl kann durch die Escape-Taste abgebrochen werden.

Das einzige, aber leider sehr große, Problem dieses Scripts ist die fehlende Funktionalität ohne Javascript (damit büßt das Script, meiner Meinung nach, leider auch vollständig die Bezeichnung "Accesible" ein). Ohne Javascript hat der Nutzer nämlich leider überhaupt keine Möglichkeit das Formular abzuschicken.

Für ein kommunales Projekt, das leider erst in 6-7 Monaten online gehen wird, habe ich also ein Dropdown Menü entwickelt, dass auf die gleiche einfache Art bedienbar ist, aber bei nicht vorhandenem Javascript einen ordentlichen Absenden-Button anbietet.

jQuery-typisch kann das Script sehr einfach eingebaut werden. Dieser simple jQuery Aufruf fügt dem darauf folgendem HTML die notwendige Funktionalität hinzu:


$(function() {
        $('form').dropdownmenu();
});
 

<form action="http://blog.ginader.de/" name="dropdownmenu1" method="get">
        <fieldset>
                <legend>
                        An example form
                </legend>
                <label for="selector">
                        An example select menu
                </label>
                <select id="selector" name="selector">
                        <option value="0">Select Option</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                </select>
                <input type="submit" name="submit" value="go" />
        </fieldset>
</form><p>
 

Hier gibt es eine funktionierende Demo,
hier kann man das Script gezippt herunterladen,
und hier kann man das Script in Subversion anschauen, auschecken oder Bugs melden.

2007-09-10 Spaltenhöhen mit jQuery synchronisieren

Seit Dirk Jesse Feuer an der jQuery Flamme gefangen hat, ist er nicht mehr zu stoppen. Nachdem Chris letzte Woche seine YUI Umsetzung einer Spaltenhöhen-Synchronisierung gepostet hatte dauerte es nicht lange bis klar war, dass sowas auch für YAML und damit in jQuery her musste.

Das kleine Script haben wir jetzt als jQuery-Plugin mit dem klangvollen Namen SyncHeight umgesetzt und kann folgenderweise auf Elemente jeder Art angewandt werden:


$(document).ready(function(){
   $('.subcolumns &gt; div').syncHeight();
   $(window).resize(function(){
      $('.subcolumns &gt; div').syncHeight();
   });
});
 

Runtergeladen kann das Script entweder hier in meinem Subversion Trunk oder gezippt bei Dirk.

2007-05-24 Technorati ist neu - Technoratis Developer in einer Krise

Der Relaunch von Technorati ging ja schon durch alle wichtigen Blogs. Die diversen Design-Neuerungen wurden gewürdigt und alles in allem positiv bewertet.

Geek der ich bin habe ich mir natürlich zuerst den Javascript-Code zu Gemüte geführt um auch dessen Qualität bewerten zu können.

Das Positive:

  • Es wird jetzt auf jQuery gesetzt

Das Negative:

  • Wie es scheint musste der Frontendcode schnell fertig werden. denn der Code ist noch weit vom Status "optimiert" entfernt
Das Lustige:
  • Einer der Developer, der sich sich in den Kommentaren "MSL" nennt, ist sich seinen Mängeln offenbar bewusst und entschuldigt sich in einem Kommentar (base.js Zeile 95) sogar für die Unzulänglichkeiten seines Codes mit der Begründung er wäre in einer Krise :-)
    //Less than ideal, sorry; I'm on a crunch -- MSL

Das Fazit:

  • Ich will hier nicht überkritisch sein, unter Zeitdruck muss jeder mal Kompromisse eingehen. Ich finde es aber dennoch Schade dass Technorati, eine Website die in Vielerlei Hinsicht (microformats etc.) Vorbildfunktion ausübt, hier "geschludert" hat...

2007-05-11 Vorträge zu Unobtrusive Javascript und jQuery

Wie schon berichtet hatte mich die PHP Usergroup Frankfurt eingeladen, in meiner Eigenschaft als Webkraut, über unobtrusive Javascript zu reden. Darren von der Usergroup hatte mich, (nachdem er meine jQuery-Einführung auf dem Barcamp Frankfurt gesehen hatte) dann noch überredet um eine zusätzliche "Hands-on"-Session über jQuery im Detail zu verlängern.

Gestern, im Rahmen des 5-jährigen Jubiläums der Usergroup, durfte ich dann mit meinen beiden Vorträgen zu Gast sein und wurde sehr nett und interessiert empfangen.

Hier nun die PDFs meiner Vorträge zu Unobtrusive Javascript und jQuery.

Mein Beispiel zu dem neuen jQuery-Plugin "YAML-Tabs" ist noch unveröffentlicht, wird aber in Kürze zusammen mit der neuen YAML-Version online gehen und dann hier verlinkt werden.

Bilder des Abends gibt's natürlich bei Flickr