umgedrehte floats mit jQuery Masonry

Ich möchte euch noch kurz ein schönes weiteres Plugin zum Layouten mit an die Hand geben. jQuery Masonry.
Während float´s Elemente horizontal und dann vertikal anordnen, habt ihr mit Masnory die Möglichkeit das genau andersrum zu machen. Erst vertikal, dann horizontal.

Das Plugin kommt ohne weiter Einstellmöglichkeiten oder Optionen daher. Alles was man noch benötigt ist etwas CSS.

Hier ein einfaches Beispiel in welchem alle Elemente im container “wrap” neu ausgerichtet werden.

1

$('.wrap').masonry();

Eine Demo sowie weiter Infos und die Dateien zum Download findet Ihr auf der offiziellen Website.

Formulare mit jQuery – die umfassende Serie

Wie wichtig das Thema Fomulare und jQuery ist, fällt uns beim regelmäßigen überfliegen unserer Blog Statistiken immer wieder auf. Viele der Suchanfragen über Google beinhalten Keywords die mit jQuery und Formularen zu tun haben.
Auch die Seiten welche mitunter die meisten Zugriffe haben gehen in diese Richtung.
Wir wollen dem ganzen Rechnung tragen und starten heute eine langfristige und ausführliche Serie zum gesamten Thema “Formulare und jQuery”.
Die Serie wird aus mehreren Teilen bestehen und sich wie folgt aufgliedern:

• Übersicht über aktuelle Form-Validaton Scripts.
• Überblick über die wichtigsten Funktionen die jQuery für die Validierung bietet.
• Tutorial “Eigenes Validation-Script mit jQuery erstellen”.
• Übersicht über aktuelle jQuery-Plugins zum verarbeiten von Formulardaten per AJAX.
• Tutorial “Eigenes jQuery-Plugin zum verarbeiten von Formulardaten per AJAX inkl. Dateiupload”.
• Überblick über die wichtigsten Funktionen die jQuery zum modifizieren von Formularen bietet.
• Übersicht zum Thema “customized Forms”. Schönere Formulare mit jQuery.
• Übersicht zum Thema “weiterführende Formulartechniken”.  Autocomplete, In Place Editing, Date Picker, ToolTips, doppeltes versenden verhindern und ein paar weitere Kleinigkeiten.

Zum Abschluss der Serie werden wir euch noch unser neues Formular-Plugin vorstellen an dem wir momentan mit Hochdruck arbeiten. Soviel vorab.

Heute wollen wir gleich mit Teil 1 – “Übersicht über aktuelle Form-Validaton Scripts“ beginnen.

jQuery ifixpng – Plugin für Transparenz-Problem

Wer kennt das Problem nicht. Man will ein transparentes png einbinden und bekommt Probleme in den älteren Versionen des Internet Explorer.
Klar gibts dafür schon Lösungen wie den pngfix von TwinHelix etc.

Allerdings fand ich bisher keine so einfach und geschickt wie jQuery.ifixpng.
Das Plugin lässt sich allgemein auf alle Dateien eines Typs oder auch gezielt auf id´s angewendet werden.

Es gibt momenta noch zwei, drei Probleme die aber im Normalfall nicht ins Gewicht fallen.
Unter anderem müssen die Elemente auf die der Hack angewandt wird visible sein.
Background positionierung und repeating gehen leider auch nicht. Wird aber normal eh weniger ein Thema sein wenn man den Hack braucht.

Hier wie immer ein simples Beispiel:

1
2
3
4
5
6
7
8
9
10
11

// apply to all png images
$('img[@src$=.png]').ifixpng();
 
// apply to all png images and to div#logo
$('img[@src$=.png], div#logo').ifixpng();
 
// apply to div#logo, undo fix, then apply the fix again
$('img[@src$=.png], div#logo').ifixpng().iunfixpng().ifixpng();
 
// apply to div#logo2, modify css property and add click event
$('div#logo2').ifixpng().css({cursor:'pointer'}).click(function(){ alert('ifixpng is cool!'); });;

Alle weiteren Infos, sowie das Plugin zum Download findet Ihr auf der offiziellen Homepage.

Lazy – jQuery Plugins on-demand laden

Die Tage schon bin ich über ein schönes kleines jQuery-Plugin names Lazy gestolpert.
Bei lazy handelt es sich um ein nur 530Byte großes Plugin das gerade bei großen Projekten einen gehörigen Vorteil, was das Laden von anderen jQuery-Plugins angeht, bringen kann.

Lazy tut nämlich nichts anderes, als Plugins nur dann zu initialisieren wenn auch irgendwo wirklich ein Aufruf für die Funktion erfolgt.
Sprich ihr könnt über lazy einbinden was ihr wollt, geladen wird es nur wenn es auch wirklich gebraucht wird.

Hier noch ein kleines Code-Beispiel:

1
2
3
4
5
6

$.lazy('jquery.elastic.js','elastic');
$.lazy('jquery.validation.js','validate');
$.lazy('jquery.ajaxdotnet.js','ajaxDotNet');
 
// And then you use you plugins as you always do
$('textarea').elastic();

Weiter Infos sowie eine Demo und die Files zum Download findet Ihr auf der offiziellen Seite:
http://www.unwrongest.com/projects/lazy/

Formulare ausrichten mit jQuery und CSS

Formulare lassen sich gut mit Tabellen oder Label layouten. Allerdings sind Tabellen zum Anzeigen von Daten gedacht und nicht um Oberflächelemente zu positionieren. Bei der CSS Variante mit Div’s und Label steht man vor dem Problem, dass sich die Länge des Formularfeld beschreibenden Textes ändern kann und ab einer bestimmten Breite zu einem Zeilenumbruch oder zu einer unterschiedlichen Ausrichtung der Formularfelder führen.
Diese kleine Schwierigkeit lässt sich mit jQuery elegant umgehen.

Zunächste einmal brauchen wir ein einfaches HTML-Grundgerüst:

1
2
3
4
5
6
7
8

<div class="input_div">
   <label for="name">Name:</label>
  <input type="text" id="einName" name="derName" />
</div>
<div class="input_div">
   ...
   ...
</div>

Das CSS ungefähr in dieser Form:

1
2
3
4
5
6
7
8
9
10
11
12
13

label, input[type="text"]{
    float:      left;
    display:  block;
}
 
label{
    margin-right: 5px;
}
 
.input_div{
    width:100%;
    overflow:auto;
}

Im Normalfall gibt man dem Label noch eine fixe “width” Eigenschaft mit. Aber damit die Texte in jedem Fall in das Label passen und immer den gleichen Abstand zum Formularfeld haben, benutzen wir jQuery um die notwendige Breite bestimmen zu lassen:

1
2
3
4
5
6
7
8
9
10

  $(document).ready(function() {
      var max = 0;
      //prüfe die Breite jedes Labels und speichere die größte Zahl in der Variable max
      $("label").each(function(){
          if ($(this).width() > max)
              max = $(this).width();
       });
      //setze jedes Label-Tag auf die gleiche Breite
      $("label").width(max);
});

So, das wäre es dann schon gewesen und das Ergebnis sieht wie folgt aus:

jQuery Address – Deep linking mit jQuery

Denen unter euch die auch mit Flash, Flex oder Air arbeiten dürfte swfaddress von asual durchaus ein Begriff sein. Ermöglicht swfaddress doch das deeplinken innerhalb von Flash-Anwendungen.
Meiner Meinung nach war swfaddress in den letzten Jahren eine der besten Zusatzentwicklungen im Bereich Flash und hat sich, nicht zu letzt durch die leichte Implementierung, schnell durchgesetzt.

Die Jungs von asual haben jetzt ein weiteres Deeplinking-Plugin entwickelt. Diesmal für jQuery.
Mit dem Plugin ist es Möglicht jetzt auch direkt den Status einer Applikation oder einen speziellen Bereich der Website zu verlinken.

Das Plugin ermöglicht unter anderem:

• Bookmarken in die Favoriten oder einer Social-Website
• Versenden von Links via E-Mail oder Messenger
• Das auffinden von speziellem Inhalt mit den großen Suchmaschinen
• Verarbeiten der Browser-History und des Refresh-Buttons

Eine vom Plugin erzeugte URL könnte so aussehen:

http://www.domain.de/#/section/?id=1&name=jQuery

Eine Möglichkeit ist nun z.B. das verlinken in Tabs. Mit dem Plugin könnt Ihr nun z.B. direkt gezielt Bereiche einer Tab-Komponente ansteuern.
Ein Beispiel dafür findet Ihr hier.

Die Seite von asual zum Plugin findet ihr unter: http://www.asual.com/jquery/address/
Dort findet Ihr das Plugin zum Download sowie die API und Beispiele.

Online Thumbnail Generator für Webseiten

Unabhängig von alles JS-Frameworks will ich mal einen kleinen Service vorstellen, mit dem man sehr einfach Thumbails von Websites darstellen kann.
Alles was man dafür benötigt ist ein Account auf Pageglimpse. Nach erfolgreicher Registrierung gibt man auf seiner Seite dem img-Tag als src Attribut einfach einen absoluten Link. Dieser kann dann wie folgt aussehen:

http://images.pageglimpse.com/v1/thumbnails?url=http://www.mysrc.de/&size=large&devkey=1234567890

Pageglimpse verfügt auch über eine kleine API. Was indem Fall nur bedeutet, dass dem GET-String einfach weitere Attribute hinzugefügt werden können.
Dazu gehören:

• devkey -> obligatorisch und auch üblich um einen Service im Web zu nutzen
• url -> WWW-Adresse die der Website die als Thumbnail angezeigt werden soll
• size -> Größe des Thumbails

Da die Thumbnails nicht sofort generiert werden, kann man einen Request senden um den Status zu prüfen. Ein Request sähe dann so aus:

http://images.pageglimpse.com/v1/thumbnails/request?

Hinter “request?” kann man dann noch die GET-Parameter anhängen. Beispiele dazu findet ihr auf Pageglimpse API.

jQuery´d Bread Crumb – jBreadCrumb

Zwar nicht ganz neu, dafür wie ich finde immer noch beeindruckend. Und für die unter euch die es nicht kennen evtl. ein Highlight. jBreadCrumb – Das jQuery-Plugin zur modernen Darstellung von Breadcrumbs.

Das Plugin wurde für Breadcrumbs geschrieben welche mit extrem tief verschachtelten oder langen Seitennamen umgehen müssen und hat daher auch die Fähigkeit einzuklappen.
Das schöne ist das sich der Einklappeffekt anhand der Anzahl der Elemente oder der Länge einstellen lässt.

Das Plugin nutzt weiter noch das easing Plugin von jQuery zum ein- bzw. aufklappen der Inhalte.

Um das Plugin zu nutzen braucht Ihr nur etwas in der Art:

1
2
3

jQuery(document).ready(function(){
	jQuery("#breadCrumb").jBreadCrumb({easing:'swing'});
})

Eine Demo sowie die Dateien zum Download findet Ihr auf der offiziellen Seite.

Text-Overflow – jQuery Plugin ellipsis

Es gibt einige CSS-Features welche Microsoft schon seit längerem den Entwicklern im Internet Explorer zur Verfügung stellt. Eines dieser Features ist die Eigenschaft “text-overflow”, welche jetzt auch in CSS3 verankert ist und bereits in Safari und Opera verankert ist. Das einzige Problem ist, Firefox unterstützt es noch nicht. (Wird es aber wohl ab Version 3.1 tun)

Text-Overflow zeigt dem User, wenn der Text länger ist als der Container der ihn beinhaltet, einen kleinen Hinweis an das es mehr Text gibt.
Im Normallfall einfach in Form von drei Punkten.

Devon Govett hat ein kleines jQuery-Plugin geschrieben welches diese Eigenschaft jetzt auch für Firefox verfügbar macht.
Gerade im Bereich CMS oder ähnlichem ist dies Interessant. Da man sich hiermit String-Manipulationen mittels PHP o.ä. schenken kann.

Ein einfaches Beispiel:

1

$("#id").ellipsis(true);

Das Plugin findet ihr hier sowie die Demo hier.

Mozilla Bespin – webbasierter Code-Editor

Es regt sich was in den Mozilla Labs, dem zu hause für experimentelle Projekte bei Mozilla. Dort stellt Mozilla Bespin vor. Einen freien, in JavaScript geschriebenen, Code-Editor welcher im Browser bedient werden kann.
Das schöne an Bespin ist, dass jeder Anwender den Editor weitestgehend seinen Bedürfnissen anpassen kann.

Die Köpfe hinter dem Projekt sind, unter anderem, die beiden Ajaxian.com Gründer Ben Galbraith und Dion Almaer.
Mit der Entwicklung von Bespin geht Mozilla den nächsten logischen Schritt in Richtung SaaS (Software as a Service) und macht somit eine Entwicklungsumgebung
für derartige Webandwendungen online verfügbar.
Viele Vorteile des Saas-Modells sind natürlich auch für Webentwickler interessant. Schneller Zugriff auf alle Projekte von Überall, problemlose Zusammenarbeit mit anderen Entwicklern und vieles mehr.

Bespin liegt momentan, als früher experimenteller Prototyp,  in der Version 0.1 vor und ist nur ein Anfang. Ziel von Bespin soll es sein ein offenes, erweiterbares und webbasiertes Framework zum erstellen von Code zu werden, welches die Produktivität von Entwicklern erhöht.

Die wesentlichen Features im Überblick:

• Echtzeit-Collaboration:
  Live-Coding zusammen mit Kollegen soll einfach und unkompliziert möglich sein.
• Integrierte Kommandozeile:
  Tools wie vi oder Emacs haben es vorgemacht und auch Bespin will diese Stärke nutzen.
• Erweiterbar und Self-Hosted:
  Sowohl das Interface als auch die Fähigkeiten sollen über einfache Befehle (wie bei Ubiquity) oder über die Plug-In API erweiterbar sein.
• Schnelligkeit:
  Auch die Bearbeitung von sehr großen Dateien soll sehr schnell werden.
• Zugriff von überall:
  Die Entwickler sollen von jedem Ort und jedem Gerät über einen modernen Browser Zugriff erhalten.
• Einfache Benutzung:
  Die Nutzer sollen sich schnell zurechtfinden und mit dem Coden beginnen können.

Weiterführende Links zum Thema:
http://labs.mozilla.com/2009/02/introducing-bespin/
https://bespin.mozilla.com/