turnOver

Programm zum Umblättern von Musik-Notenblättern

Version 1.00, © Gerhard Schacherl, 2021

Voll responsive, auch nach Drehung des Displays

Slider-CSS mit Hilfe des Online-Tools auf cssportal.com

Programm - Bedienung

Seitentitel


Im Seitentitel ist die Anzahl der Seiten sichtbar

Umblättern

Button Seitennummer

Linksklick auf Button Seitennummer

Blendet transparenten Slider "Gehe zu Seite ..." ein/aus:
Klick auf "OK"-Button (od. Klick auf Button Seitennummer) blendet den Slider wieder aus.

 

Wenn eine Drop-Down-Liste vorhanden ist, kann das so aussehen:


Klick auf die Drop-Down-Liste bewirkt Sprung zur entsprechenden Seite.
Anschließend wird das Feld automatisch ausgeblendet.

Rechtsklick auf Button Seitennummer

Geht zu Seite 1 (ev. Inhaltsverzeichnis!)

Button Index


Führt auf die Index-Seite zurück

Button "x" (wenn vorhanden)


Versteckt/zeigt alle Buttons

Auch versteckte Buttons bleiben funktionsfähig und können angeklickt werden!

Demo

J. S. Bach, Präludium und Fuge g-moll

Minimal-Variante, Buttons ständig sichtbar, Inhaltsverzeichnis, Hochformat

Nein, aber nein - Chorsatz

Button "x", Hochformat

G. F. Händel, Sonate F-Dur

Erweiterte Variante mit allen Möglichkeiten: Button "x", Buttons zunächst unsichtbar bzw. leicht durchscheinend, Kapitelmarkierungen, Querformat

Eigene Projekte

Minimal

Für eigene Projekte sind minimale Kenntnisse über das Erstellen von Internetseiten notwendig.

Benötigt werden Bilder, eine *.html-Seite, turnOver.css und turnOver.js

In die *.html-Seite müssen nur die eigenen Bilder (siehe Beispiel unten) eingebaut werden.

Die maximale Seitenzahl im Slider "seitenwahl" wird automatisch angepasst.

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="turnOver.css">
</head>

<body>


<img src="bilder/bach/Inhaltsverzeichnis.jpg">
<img src="bilder/bach/pr_fuge06_s01.jpg">
<img src="bilder/bach/pr_fuge06_s01.jpg">
<img src="bilder/bach/pr_fuge06_s01.jpg">
<img src="bilder/bach/pr_fuge06_s01.jpg">
<img src="bilder/bach/pr_fuge06_s01.jpg">
<img src="bilder/bach/pr_fuge06_s01.jpg">


<button id="seitenNr" onclick="has('seitenwahl'); this.blur(); event.stopPropagation();">1</button>
<button id="zurueck" onclick="history.back()">←</button>

<div id="seitenwahl" style="display:none;">
	<p>
		<label id="seitenwahlLabel"></label>
		<label id="rangeLabel">1</label>
		<input type="range" id="seitenwahlRange" value="1" min="1" max="10" 
			oninput="geheZu(this.value);" />
	</p>
</div>


<script src="turnOver.js"></script>

</body>
</html>

Erweitert

Kapitelmarkierungen

Anstelle oder zusätzlich zum Inhaltsverzeichnis könnten Kapitelmarkierungen in eine Drop-Down-Liste geschrieben werden. (value="3" entspricht der Seitenzahl 3)

Buttons verstecken

Mit einem zusätzlichen Button können alle Buttons versteckt/gezeigt werden. Auch versteckte Buttons bleiben funktionsfähig!

Grad der Transparenz von Buttons

Die Durchsichtigkeit der Buttons ist einstellbar:
opacity1=0; (unsichtbar), opacity2=1; (deckend),
Zwischenwerte möglich, Standard (wenn nichts angegeben):
opacity1=0.5; opacity2=0;
Werte für eine Seite, bei der die Buttons anfangs unsichtbar sind:
opacity1=0; opacity2=0.5;

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="turnOver.css">
</head>

<body>


<img src="bilder/haendel/haendel-sonate_f-dur01.jpg">
<img src="bilder/haendel/haendel-sonate_f-dur02.jpg">
<img src="bilder/haendel/haendel-sonate_f-dur03.jpg">
<img src="bilder/haendel/haendel-sonate_f-dur04.jpg">
<img src="bilder/haendel/haendel-sonate_f-dur05.jpg">


<button id="seitenNr" onclick="has('seitenwahl'); this.blur(); event.stopPropagation();">1</button>
<button id="zurueck" onclick="history.back()">←</button>
<button id="x">x</button>

<div id="seitenwahl" style="display:none;">
	<p>
		<label id="seitenwahlLabel"></label>
		<label id="rangeLabel">1</label>
		<input type="range" id="seitenwahlRange" value="1" min="1" max="10" 
			oninput="geheZu(this.value);" />
	</p>
</div>

<div id="seitenwahl2">
	<select onclick="event.stopPropagation();" onchange="var sNr=this.value; geheZu(eval(sNr)); this.blur();">
	<option value="1">--- Händel, Sonate ---</option>
	<option value="1">I Larghetto</option>
	<option value="2">II Allegro</option>
	<option value="3">III Siziliana</option>
	<option value="4">IV Allegro</option>
	</select>
</div>


<script src="turnOver.js"></script>
<script>
opacity1=0;
opacity2=0.2;
</script>


</body>
</html>