A Complete Guide to Flexbox

A Complete Guide to Flexbox

Selection_082

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

Advertisements

Datein hochladen unschön?

Hi,

heute mal eine Idee, wie man das File-Upload-Element von Html-Formularen verschönern kann. Wie wahrscheinlich viele wisse, ist dieses Html-Feld so gut wie gar nicht stylebar.

<input class="__specialfile" type="file" name="file">
<style>
.__specialfile {
  display: none;
}
.__specialfiletxt {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 3px;
  min-width: 330px;
  min-height: 18px;
  padding: 1px 3px;
  background-color: white;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
}
.__specialfiletxt:empty:before {
  content: "Datei auswählen";
  color: red;
  font-weight: normal;
  font-style: normal;
  opacity: 0.5;
   border: 1px solid red;
  border-radius: 3px;
  padding: 0px 3px;
}
.__specialfiledel {
  color: red;
  font-weight: normal;
  font-style: normal;
  opacity: 0.5;
  border: 1px solid red;
  border-radius: 3px;
  padding: 0px 3px;
  margin-left: 5px;
  cursor: pointer;
}
</style>
<script>
  $$('.__specialfile').forEach(function (aFileField) {
    var txt = new Element('span', {'class': '__specialfiletxt'});
    txt.observe('click', (function (event, file) {
      file.click();
    }).bindAsEventListener(txt, aFileField));
    var del = new Element('span', {'class': '__specialfiledel', 'style': 'display: none;'});
    del.update('X');
    del.observe('click', (function (event, file, txt) {
      file.value = '';
      txt.update('');
      this.hide();
    }).bindAsEventListener(del, aFileField, txt));
    aFileField.parentNode.appendChild(txt);
    aFileField.parentNode.appendChild(del);
    aFileField.observe('change', (function (event, txt, del) {
      txt.update(this.value);
      if (this.value) {
        del.show();
      }
      else {
        del.hide();
      }
    }).bindAsEventListener(aFileField, txt, del));
  });
</script>

Erklärung: Beim laden der Seite wir folgendes gemacht.

  1. Das File-Upload-Element wird per “display: none;” ausgeblendet.
  2. Es wird ein einfaches Html-Element “class=__specialfiletxt” eingefügt. Dieses Element wird zur Anzeige der ausgwählten Datei benutzt.
  3. Es wird ein weiteres einfaches Html-Element “class=__specialfiledel” eingefügt. Dieses Element wird dazu benutzt um ein gewähltes File wieder aus dem Upload-Element zu entfernen. Dieses Element wir nur angezeigt, wenn ein File ausgewählt wurde.
  4. Wenn jetzt der Benutzer auf das Element “class=__specialfiletxt” klickt, dann wird dieser Event an das echte (aber versteckte) File-Element weitergegeben. Der Auswahldialog für Dateien öffnet sich.
  5. Beim “onchange” wird nun der gewählte Wert bzw. der Name des gewählten Files in das Element “class=__specialfiletxt” geschrieben und das Element “class=__specialfiledel” eingeblendet.

Fertig 🙂

Image

Image

Wie schon das letzte Mal soll dieser Artikel eher beispielhaft sein und nur die Möglichkeiten demonstrieren. Ich habe das ganze auch nur im Firefox getestet.