Schlagwort: HTML

Formulareingaben mit jQuery übertragen

Ein oft nachgeschlagenes Thema ist die Auswertung von HTML-Formularen mit jQuery. Um zu zeigen, wie bequem Daten eines Formulars mit jQuery empfangen und übermittelt werden können, habe ich ein paar Code-Beispiele vorbereitet.
Formulareingaben mit jQuery übertragen weiterlesen

Div Container horizontal und vertikal zentrieren

Div Container lassen sich mit absoluter Positionierung und Minusabständen zentrieren (siehe [post id=3140][/post]). Meine neue Lieblingsmethode, um einen Div Container mittig zu platzieren, ist aber Folgende:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
    <style>
      #wrapper {
        width: 400px;
        height: 400px;
 
        position: relative;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
 
        background-color: black;
      }
 
      #center {
        width: 200px;
        height: 200px;
 
        position: relative;
        display: inline-block;  
 
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="center"></div>
    </div>
  </body>
</html>

JSON in HTML Template rendern

Mit der Render-Engine Tempo können Daten aus einem JavaScript-Objekt problemlos in ein HTML-Gerüst (Template) übertragen werden. Die Anwendung ist super simpel und erfordert nur folgende Schritte:

  1. Anlegen eines HTML-Templates
  2. Deklarierung von data-template für die Einträge, die wiederholt werden sollen
  3. Einbinden von tempo.js
  4. Aufruf des Render-Befehls mit Übergabe des Templatenamen und der zu rendernden Daten im JSON-Format

JSON in HTML Template rendern weiterlesen

Dynamisch Optionen zu einer HTML select Box hinzufügen

Wer eine select-Box dynamisch mit Optionen befüllen möchte, der hat zwei Wege. Der Kürzere führt über das Schlüsselwort new:

1
2
3
4
5
6
7
8
9
10
11

<body>
  <select id="selectElement" size="5"></select>
  <script>
    var selectElement = document.getElementById('selectElement');
 
    for(var i=0;i<5;i++){
      var option = new Option('Text '+i, i);
      selectElement.options[i] = option;
    }
  </script>
</body>

Der klassische Weg führt über die kompatible createElement-Methode.

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

<body>
  <select id="selectElement" size="5"></select>
  <script>
    var selectElement = document.getElementById('selectElement');
 
    for(var i=0;i<5;i++){
      var option = document.createElement('option');
      option.text = 'Text '+i;
      option.value = i;
      selectElement.options[i] = option;
    }
  </script>
</body>

Das Ergebnis ist Folgendes:

<body>
  <select id="selectElement" size="5">
    <option value="0">Text 0</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
    <option value="4">Text 4</option>
  </select>
</body>