ifixpng2 & pngFix – Transparenz für den IE6

Immer wieder stößt man bei der Entwicklung von Webseiten auf das Problem transparenter Hintergründe von png’s im IE6. Es gibt diverse Hacks und Workarounds dafür. Ein paar besondere sollen hier nun kurz vorgestellt werden.

- ifixpng2
Das alte ifixpng plugin hat ein update verpasst bekommen. Einige Fehler oder Probleme wurden behoben, vor allem erwähnenswert dabei, das Elemente mit Background-Image nicht mehr visible bzw. sichtbar sein müssen um den gewünschen Effekt zu erhalten. Den Download zum ifixpng2 findet ihr hier.

1
2
3
4
5

//DOM-Ready Event
 $(document).ready(function(){ 
//Der Fix wird auf alle Class-Attribute mit "legende" angewendet
     $('.transparent').ifixpng();
  });

- pngfix
Ein anderes nettes Plugin um das Transparenzproblem zu lösen findet ihr auf der Seite von Andreas Eberhard. Das schöne bei diesem Plugin ist, dass nicht nur pngs gefixt werden, die im CSS als background angegeben sind, sondern auch direkt img-Tags angesprochen werden können.
Der Aufruf dazu ist derselbe wie beim ifixpng2:

1
2
3
4

//plugin wird auf alle Bilder angewendet
 $(document).ready(function(){ 
        $(document).pngFix(); 
    });

Dieser einfache Aufruf geht allerdings bei vielen Bildern auf der Seite zu Lasten der Performance. Ich empfehle eine präziseren Aufruf für genau diejenigen Bilder, die den
pngfix erhalten sollen.

1
2

//Fix bezieht sich auf jedes Div mit der Class "Legende"
jQuery('div.legende').pngFix();

Spielwiese ohne Rasen mähen – Google Code Playground

Immer wieder kommt es bei der Entwicklung von Webapps dazu, dass man ein Stück Code gerne einmal unabhängig vom Projekt entwickelt um es erst danach einzubauen. Anstatt sich eine kleine Testumgebung lokal einrichten zu müssen, kann man sich auf dem Google Code Playground austoben.

Die gängigsten JS Frameworks (jQuery, jQuery UI, MooTools, Prototype, Dojo) sind dort vertreten, genauso wie annähernd alle APIs von Google. Beispiele dazu sind:

• Language API
• Earth API
• Maps API
• Calender API
• Youtube API

Zu allen APIs gibt es kleine Beispiele die sofort ausgeführt werden können. Ein paar nette Goodies dazu sind, der Direktlink auf die Dokumentation des API genauso wie der intergrierte Firebug Lite zum debuggen. Der erstellte Code kann dann als HTML editiert oder kopiert werden.

Bessere Textfelder – prettyComments jQuery Plugin

Ein nettes kleines Tool für eine bessere Usability bei Textfeldern bietet das prettyComments Plugin. Es lässt bei Eingabe über die Tastatur einfach des Textfeld mitwachsen und funktioniert in allen gängigen Browsern.

Das Einbinden ist denkbar einfach:

1
2
3
4
5
6
7
8
9
10

//einbinden der Bibliotheken
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/prettyComments.js" type="text/javascript"></script>
 
//Initialisiere Plugin nach dem der DOM-Baum vollständig geladen ist
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$('#textarea').prettyComments();
	});
</script>

Das Plugin hat folgende Attribute:

• animate: true/false
• animationSpeed: ‘slow’/'normal’/'fast’
• maxHeight: 500 (ab dieser Höhe erscheint Scrollbalken)

Ein Beispiel dazu:

1
2
3
4
5

<script type="text/javascript">
	$(document).ready(function(){
		$('#textarea1').prettyComments({animate: true, maxHeight:100});
	});
</script>

Tools für jQuery – Ein Plugin UI Elemente

Von jQuery gibt es eine eigene Bibliothek für UI- bzw. Oberflächenelemente. Diese bezieht sich allerdings eher auf Animationen und andere Effekte. Selbstverständlich stehen auch fertige Komponenten wie Kalender, Accordion und Drag ‘n Drop zu Verfügung.

jQuery Tools setzt dagegen direkt auf fertige Komponenten. Ähnlich wie auf der jQuery UI Seite lassen sich einzelne Teile direkt herunterladen oder alle Funktionen in einem Skript. Die Funktionspallette erstreckt sich über Tooltips, Tabs, Scrolling, Highlighting und Overlays.

jQuery Tools lassen sich einfach einbinden, hier ein Tab Beispiel:
Der HTML Code

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

<!-- the tabs --> 
<ul class="tabs"> 
    <li><a href="#">Tab 1</a></li> 
    <li><a href="#">Tab 2</a></li> 
    <li><a href="#">Tab 3</a></li> 
</ul> 
 
<!-- tab "content" --> 
<div class="content"> 
    <div>First tab content. Tab contents are called "content"</div> 
    <div>Second tab content</div> 
    <div>Third tab content</div> 
</div>

Der Javascript Code

1
2
3
4
5

// Aufruf nach dem dom-Ready Event
$(function() { 
    // Zuordnung von den ul-Tags zum Inhalt
    $("ul.tabs").tabs("div.content> div"); 
});

Dieses Plugin besticht durch seine saubere Trennung zwischen CSS und Javascript Code sowie durch seine kleine Größe und einfache Handhabung.

Einfach mal anschauen und testen..

ScrollSpy – ein MooTools Plugin

Auf der Seite von der David Walsh findet ihr ein nettes MooTools Plugin um den Benutzer während längerer Scrollvorgänge ein kleines Erlebnis zu bieten.

Es gibt verschiedene Demos auf der Seite, vom einfachen einblenden eines “Top-Page” Ankers, über Farbenwechsel der Hintergrunds bis zum ein- und ausblenden von Bildern während des scrollens.
Ein echt netter Eye-Catcher..

Ein kleines Beispiel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.addEvent('domready',function() {
	/* smooth */
	new SmoothScroll({duration:500});
 
	/* link management */
	$('gototop').set('opacity','0').setStyle('display','block');
 
	/* scrollspy instance */
	var ss = new ScrollSpy({
		min: 200,
		onEnter: function(position,state,enters) {
			$('gototop').fade('in');
		},
		onLeave: function(position,state,leaves) {
			$('gototop').fade('out');
		},
		container: window
	});
});

Der Code ist nicht ganz intuitiv und etwas CSS wird auch noch benötigt, aber nach dem Anschauen der Beispiele wird schnell alles klar.

jQuery noConflict Mode

Des öftern ist man gezwungen mehrere JS-Frameworks auf einer Website zu nutzen. Das geschieht wenn man eine Vielzahl von Plugins einbauen möchte und diese eben nicht für ein einziges Framework vorhanden sind. Natürlich mit dem Nachteil verbunden, dass bei jedem Aufruf einer Seite eine relativ große Menge an Daten mitgesendet werden muss, nämlich mindestens die verschiedenen Framework Core Dateien.

Die beiden Kerne einbinden bringt uns aber noch nicht ganz zum Ziel. jQuery bietet hierfür den noConflict-Mode an. Diese wird nach einbinden der Bibliothek aufgerufen und sorgt dafür, das jQuery unter einem anderen Namespace ansprechbar ist.

Ein Beispiel:

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

<script type="text/javascript" src="_js/mootools-release-1.1.2.js"></script>
<script type="text/javascript" src="_js/jquery.js"></script>
 
//domready-event von mootools 
window.addEvent('domready', function() {
    //jQuery Syntax zum Ansprechen eines Elementes
    var jq = $('#someid');
    alert(jq.attr('class')) ;
 
   //mootools
    var moot = $('moot');
    alert(moot.getProperty('class')) ;
 
});

Dieses Skript wirft bei installiertem Firebug nun ein Fehler. Javascript kann das $-Zeichen nicht referenzieren und findet in obigem Fall die Methode “attr” nicht. Nun kommt der noConflict-Mode ins Spiel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript" src="_js/mootools-release-1.1.2.js"></script>
<script type="text/javascript" src="_js/jquery.js"></script> 
<script>
     jQuery.noConflict();
 
//domready-event von mootools 
window.addEvent('domready', function() {
    //jQuery Syntax zum Ansprechen eines Elementes
    var jq = jQuery('#someid');
    alert(jq.attr('class')) ;
 
   //mootools
    var moot = $('moot');
    alert(moot.getProperty('class')) ;
 
});
 </script>

Will man nun über jQuery ein Element ansprechen ersetzt man das “$” durch “jQuery” und behält für MooTools den $-Syntax bei. Ein friedliche Koexistenz.
Auf diese Weise lässt sich jQuery mit sogut wie jedem anderen Framework benutzen. Leider gehört jQuery zu den wenigen Frameworks die einen solchen Modus besitzen. Möchte man bspw. Prototype in Verbindung mit MooTools einsetzen gibt es keine Option dieser Art.

Ajax Datei-Upload mit jQuery

Eine geschickte und schnelle Methode um den Upload von Dateien in Formularen zu erledigen ist wie so oft Ajax. Ein nettes Plugin dafür gibt es auf http://valums.com/ajax-upload/, welches zudem auch Multiple Uploads unterstützt.
Das Plugin glänzt nicht nur durch seine einfache Handhabung, auch lässt sich damit das lästige Problem der Gestaltung von Uploadformularfeldern, also “input type=”file”..” in den Griff bekommen. Auf diese Felder greift das CSS oft nicht wie es sollte usw.

Auf was ihr allerdings achten solltet ist, dass die Dateien, die mit dem Plugin schon hochgeladen wurden, bevor der Submit abgesetzt, bzw. vor dem Abschicken des Formulars auf dem Server liegen, während die restlichen POST Daten eben erst auf Click eines Absenden Buttons an ein Skript weitergereicht werden. Kurz gesagt, wenn Upload mit Ajax und das Formular als Method Attribut GET/POST hat, muss man aufpassen. Das heißt es sollte überprüft werden ob die hochgeladenen Bilder auch tatsächlich genutzt werden und der User nicht nur einfach wild Dateien hochgeladen hat ohne Das Formular auszufüllen.

Screeshot der Demo:

Kurz zu den Bestandteilen des Codes:

- Der HTML Teil

1
2
3

 
<!-- Anlegen eines einfachen Divs auf das später die Upload Funktion gelegt wird -->
<div id="upload_button">Upload</div>

- Der Javascript Teil (weitere js-Dateien werden nicht benötigt)

1
2
3
4
5
6
7

 
<script src="ajaxupload.3.1.js" type="text/javascript">
<script type="text/javascript">
    $(document).ready( function() {
         new AjaxUpload('upload_button', {action: 'upload.php'});
    });
</script>

Der Ajaxupload kann auch durch Callback-Funktionen und andere Parameter eingestellt werden. Der Code auf der englischen Website ist selbsterklärend. Fragen könnt ihr auch hier stellen.

- Nach abesenden der Daten an “upload.php” geht es an die serverseite Verarbeitung

1
2
3
4
5
6
7
8
9
10
11

 
$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
 
//move_uploaded_file ist die Standard PHP-Funktion um Dateien auf dem Server zu verarbeiten
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "success";
} else {
  // Als echo keinesfalls false benutzen. Führt zu Konflikten mit dem Ajax-Request
  echo "error";
}

Auf der Valums Website gibt es ebenfalls Beispiele für Ruby sowie Coldfusion.

Die Demo findet ihr hier

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:

Filemanager basierend auf MooTools

Unter der Website von Christoph Pojer findet ihr einen beeindruckenden Filemanager. Er ist noch in der Erprobungsphase, aber bietet schon eine angenehme Oberfläche und eine gute Usability und natürlich volle Funktionalität.

Der Filemanager zum Verwalten von Bildern bzw. Dateien auf einem PHP-Webserver basiert auf MooTools. Eine kleine Liste der Features:

• Betrachten der Ordner und Dateien auf einem Server
• Umbenennen, Löschen, Kopieren und Verschieben von Dateien
• Detailansicht von Bildern
• Fileupload mit dem bekannten Fancyupload in der neuen Version
• Automatisches verkleinern von großen Bildern
• …

Eine Demo findet ihr unter: Filemanager

Der Aufruf ist denkbar einfach:

1
2
3
4
5
6
7

 var manager = new FileManager({
    url: 'manager.php',
    assetBasePath: '../Assets',
    language: 'en',
    uploadAuthData: {session: 'MySessionId'}
  });
   $('beispiel').addEvent('click', manager.show.bind(manager));

Weiter gibt es auch die Möglichkeit den Filemanager in den WYSIWYG-Editor TinyMCE einzubauen. Dieser besitzt von Haus aus keine Möglichkeit eines gezielten Upload. Eine Demo dazu findet ihr ebenfalls auf Christopher’s Seite..

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.