blog.exotec

TYPO3 . XHTML/CSS . JavaScript/AJAX . iPhone/iOS

Archive for Februar, 2007

TYPO3 PHP/AJAX Lightbox Galerie

Montag, Februar 26th, 2007

Wir haben ein kleines Galerie Plugin für TYPO3 geschrieben

Features :

  • Klickvergrösserung via Lightbox JS v2.0
  • Konfiguration über Flexform
  • läuft als Ajax oderPhp Anwendung (wählbar überFlexform)
  • erkennt automatisch clientseitig aktives Javascript ( bei deaktivietem JS automatisches Fallback zur Php Version)
  • Frontent Miniconsole für clientseitige Konfigurationen

Demoversion ansehen

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Download der Extension

Downloads:

<input type=”file” /> via CSS durch eine Grafik ersetzen

Samstag, Februar 3rd, 2007

Ich war heute auf der Suche nach einer Möglichkeit ein <input type=”file” /> durch eine Grafik zu ersetzen die beim anklicken den Dateibrowser öffnet. Im IE funktioniert das relativ einfach, man nimmt ein Bild das bei onclick ein per CSS ausgeblendetes <input type=”file” /> mit javascript:element.click(); anklickt und schon wird der Dateibrowser geöffnet.

Läuft aber halt nur im IE so. Im Firefox funktioniert das absolut gar nicht. Hat wohl sicherheitstechnische Hintergründe und muss ja auch gar nicht sein, denn es kann noch viel einfacher und eleganter umgesetzt werden wie Dave Clark bewiesen hat.

Man kann auch mit CSS ein <input type=”file” /> Element durch eine Grafik ersetzen die beim anklicken den Dateibrowser öffnet. Im Prinzip wird hier nur getrickst und man quasi an der Nase herumgeführt, denn hier ist das was man sieht nicht das was tatsächlich da ist. Man sieht ein Bild, klick aber auf ein durchsichtiges <input type=”file” /> Element.

Und das Prinzip ist echt super simpel. Man nimmt einen <div> und legt in diesen das <input type=”file” /> und einen weiteren <div>. Den äusseren <div> positioniert man relative um das in ihm liegende <input type=”file” /> absolute positionieren zu können. Für das <input type=”file” /> definiert man eine sehr große Schrift (zB. 30px). Damit bekommt der <input type=”file” /> Button einebeträchtliche Größe. Zusätzlich wird der Button absolute oben rechts positioniert.

Auf das <input type=”file” /> Element folgt ein weiterer <div>. Dieser erhält die Höhe und Breite der gewünschten Grafik welche dann auch als background eingebunden wird. Und jetzt kommt der Trick:
Der äusserste <div> bekommt nun auch die Breite der Grafik. Dadurch wird nun die Schaltfläche des <input type=”file” /> über das Bild gelegt, alles was überstehen würde wird mit overflow:hidden; abgeschnitten. Jetzt liegt die Schaltfläche auf der Grafik. Damit wir nun die Grafik sehen können muss einfach das <input type=”file” /> Element mittels opacity:0; für den Firefox und mit filter: alpha(opacity: 0); für den IE durchsichtig gemacht werden, bleibt dabei aber klickbar.

CSS:
div.uploader {
  position: relative;
  width: 28px;
  height: 26px;
  overflow: hidden;
}
input.uploadbox {
  position: absolute;
  right: 0;
  font-size: 30px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity: 0);
}
div.uploader_img {
  background: transparent url(uploader.gif) no-repeat scroll left bottom;
  white-space: normal;
  width: 28px;
  height:26px;
}

HTML:
<div class="uploader">
  <input class="uploadbox" type="file" />
  <div class="uploader_img">
  </div>
</div>

Und so sieht der neue Filebrowser Button aus diesem Beispiel aus:


83,946 Spam-Kommentare
blockiert von
Akismet