Statecontrol mittels Checkbox

Jede Webseite wird heutzutage immer weiter mit JavaScript überladen. Da freut man sich mal, wenn man mal keines benutzen muss und nur mit HTML und CSS auskommt. In diesem Fall kann man mehrseitige Seiten oder Felder ohne JavaScript erzeugen, in dem man nur mit CSS3-Selektoren und angepassten <input>’s arbeitet. Das ganze ist kompatibel mit allen Browsern, die CSS3 Selektoren unterstützen

Input Checkbox als Trigger für Animationen

Im Prinzip verwendet man die Kombination aus den Selektoren ~ oder + und :checked, um relativ erreichbare Elemente zu manipulieren. Dazu platziert man ein ausgeblendetes  <input type="checkbox"> Element mit einem zugehörigen <label> als Auslöser und bindet mit ~ die Veränderungen daran.Im Folgend wird es an einem kleinen Codebeispiel gezeigt. Style:
#state:checked + #field {
  background-color:black;
}
#field {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.2s;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  color: wheat;
  margin: 10px;
}
#state {
  display:none;
}
Mit folgendem HTML:
<input type="checkbox" id="state">
<label id="field" for="state">Click Me</label>
Ergebnis:

Beispiel seitliches Klapp-Menü

Natürlich lässt sich dieses auch auf etwas anwenden. Zum Beispiel kann man ein Menü damit auf und zu klappen.

 

Erweiterung mit Radio-Input

Jetzt kann man noch eine Stufe weiter gehen und anstatt der einen Checkbox mehrere Radio’s (oder beides) nehmen und damit kann man mehrere Zustände abbilden und diese sogar miteinander kombinieren.

 

 

Fazit

Somit kann mit einfachen Mitteln eine komplexe Seite zusammengesetzt werden. Zum weiteren Optimieren der Ladezeit, kann man die Inhalte der versteckten Elemente erst später injizieren.

Kodi-Bookmark zum Abspielen einer Adresse

Wenn man auf dem Kodi einen Link aus dem Netz oder einer Netzwerkfreigabe abspielen will, gibt es im Wiki Lösungen mit Playlisten. Einfacher ist es, wenn man das mit JavaScript im Browser umsetzt. Mit dem Script wird die Adresse direkt an die Web-API von dem Gerät gesendet.

Erstellt einfach ein Bookmarklet mit folgendem Script als Adresse. Du musst nur bei „<lan-adresse>“ die Netzwerkadresse / IP + Port von deinem Kodi einsetzten.

javascript:
var host = "<lan-adresse>";
var u = JSON.stringify(prompt("URL",""));
var c = new XMLHttpRequest();
c.open("POST","http://"+host+"/jsonrpc",true);
c.setRequestHeader("Content-type","application/json");
c.send('{"jsonrpc":"2.0","method":"Player.Open","params":{"item":{"file":'+u+'}},"id":1}');

Auf Grund der Same-Origin-Policy von JavaScript muss die Webseite vom Kodi aufrufen werden, um das Bookmark zu benutzen und falls notwendig, sich auch noch einloggen.