Gern geschehen!
BTW: Ich habe gerade festgestellt, dass man flex-grow auch animieren kann:
https://jsfiddle.net/Sempervivum/a2rebrzf/1/
Damit braucht man die Breite nicht zu berechnen und die Container passen automatisch und es taucht keine horizontale Scrollbar auf.
Infovideos und Tutorials haben häufig den Nachteil, dass veraltete Techniken präsentiert werden, vor allem Layout mit Float. Ich empfehle, dich gleich mit Flexlayout vertraut zu machen, das ist etwas, das auf der Höhe der Zeit ist. Grundbegriffe hier bei HTML-Seminar:
https://www.html-seminar.de/css-flexbox.htm
Weitgehend vollständige Übersicht:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Erweiterte Layout-Möglichkeiten mit margin:
https://stackoverflow.com/questions/3255…856609#33856609
einen dynamischen, aus dem header/navigation geladenen Inhalt
Kann man machen, wirft aber einige Probleme auf, siehe hier:
https://www.homepage-forum.de/forum/-1-homep…jax-jquery-load
Alternative: Für jede Rubrik eine eigene Datei und die Teile, die überall gleich sind, mit PHP-Include einziehen.
Schaltet man den container-headline-div ebenfalls mit hover ein, so hat man das Problem, dass der output-container nach unten rutscht und es zum Flackern kommt. Dies liegt daran, dass der Default-Wert für vertical-align baseline ist und kann behoben werden, indem man vertical-align auf top setzt:
wie man die Bilder base64-kodiert inline einbinden kann.
Ergebnis: Funktioniert einwandfrei, aber nur, wenn das Skript auf einem Webserver läuft. Wenn nicht, gibt es, wie auch beim iFrame, Cross-Domain-Probleme ("tainted canvas") 
Wenn Du definitiv keinen Webserver installieren kannst, sehe ich nur noch die Möglichkeit, Javascript und CSS inline zu definieren, die Bilder manuell nach base64 zu konvertieren (dafür gibt es Online-Konverter) und ebenfalls inline zu definieren. Ein Vorteil wäre dabei, dass alles in der HTML-Datei vorhanden wäre und der Benutzer kein ZIP-File auspacken muss.
Was ist denn eigentlich der Grund dafür, dass das lokal und ohne Webserver laufen muss?
Wäre alles kein Problem, wenn Du einen Webserver lokal auf deinem Computer installieren könntest.
Bei dem Skript, das die docx-Dateien erzeugt, wurde jedoch eine Möglichkeit angegeben, wie man die Bilder base64-kodiert inline einbinden kann. Ich werde es mir dort einmal ansehen, ob es eine Lösung liefert ...
Aaaarrrgh, hier bekommt man nur Beifall, wenn man code ready-for-copy-and-paste liefert. Eigeninitiative? Fehlanzeige.
Hier genau so:
'sysIntegr' enspricht bei mir dem Wert y[0].id
Ahja, dann verstehe ich auch, wie der Alert bei dir funktionieren konnte. Super, dass es jetzt klappt.
So, ich habe das Ganze jetzt in meine Testseite übernommen. Folgende Probleme hatte ich:
Dies ist, was ich mir zusammen gereimt habe und was soweit funktioniert. Leider weiß ich jetzt nicht mehr, ob es noch deine Gegebenheiten trifft.
<!doctype html>
<html lang="en">
<head>
<title>Test download</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/download.js"></script>
<script id="formdata"></script>
</head>
<body>
<button onclick="savehtmlformdata();">Als HTML mit Formulardaten speichern</button>
<button onclick="readhtmlformdata();">Formulardaten lesen</button>
<input id="input1" name="input1" class="generalinfo">Input 1
<input id="input2" ame="input2" class="generalinfo">Input 2
<input id="input3" name="input3" class="generalinfo">Input 3
<input id="input" name="input4" class="generalinfo">Input 4
<script>
var firstInfo;
$(".generalinfo").on("input", function() {
firstInfo = {};
firstInfo['generalinfo'] = {};
firstInfo['object'] = [];
firstInfo['conveyor'] = [];
firstInfo['rfid'] = [];
firstInfo['opticalident'] = [];
firstInfo['interface'] = [];
var y = document.getElementsByClassName('generalinfo');
for (var i = 0; i < y.length; i++) {
firstInfo['generalinfo'][y[i].id] = y[i].value;
}
});
function savehtmlformdata() {
// Array "formdata" mit Inhalt von Array "firstInfo" definieren:
$("#formdata").text("var formdata = " + JSON.stringify(firstInfo)) + ";";
var thehtml = $("html");
var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
download(doc, "savedTQ.html", "text/html");
console.log(firstInfo['generalinfo']);
}
function readhtmlformdata() {
// Und jetzt auf formdata zugreifen:
console.log(formdata['generalinfo']);
}
</script>
</body>
</html>OK, ich übernehme es mal in meine Testseite. Wird einen Moment dauern ...
Ich muss zugeben, dass ich den Code diesmal nicht getestet habe. Hast Du den aus meinem "PS" genommen? Wenn es mit dem nicht funktioniert, werde ich es noch Mal in meine Testseite eintragen.
PS: Um Überschneidungen bei "firstInfo" zu vermeiden, sollten wir besser bei formdata bleiben:
function savehtmlformdata() {
// Array "formdata" mit Inhalt von Array "firstInfo" definieren:
$("#formdata").text("var formdata = " + JSON.stringify(firstInfo)) + ";";
var thehtml = $("html");
var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
download(doc, "savedTQ.html", "text/html");
alert(firstInfo['generalinfo']['sysIntegr']);
}
function readhtmlformdata() {
// Und jetzt auf formdata zugreifen:
alert(formdata['generalinfo']['sysIntegr']);
}Das CSS ist in Sass kodiert, hast Du das auch kompiliert? (Unten rechts auf "View compiled" drücken.)
Auch der erste Versuch sollte laufen, Du hast nur den Fehler gemacht, dass Du in readhtmlformdata auf firstInfo zugreifst, während die Daten in formdata stehen. Am besten gleich den passenden Namen verwenden:
function savehtmlformdata() {
// So lautet der Name des Arrays "firstInfo":
$("#formdata").text("var firstInfo = " + JSON.stringify(firstInfo)) + ";";
var thehtml = $("html");
var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
download(doc, "savedTQ.html", "text/html");
alert(firstInfo['generalinfo']['sysIntegr']);
}
function readhtmlformdata() {
// Und dann sollte auch der Zugriff auf firstInfo funktionieren:
alert(firstInfo['generalinfo']['sysIntegr']);
}Der Code sieht OK aus. Hast Du auch das script-Tag angelegt?
<script id="formdata"></script>Wenn ja, sieh dir den Quelltext der gespeicherten Seite an. Ist dort dieses script-Tag mit Inhalt gefüllt?
Kommen in der Console irgend welche Fehlermeldungen?
Verstehe, nicht nur die Inhalte bzw. values sind dynamisch, sondern auch der Aufbau des Formulars. Mit JSON.stringify kannst Du, genau so wie ich es gemacht habe, dein Array in ein script-Tag eintragen und auf diese Weise übertragen. Und beim Empfänger wieder einlesen. Versuche es und wenn Du nicht zum Ziel kommst, dann poste die Struktur des Arrays.
So, ich habe mal das Grundprinzip fertig gestellt:
<!doctype html>
<html lang="en">
<head>
<title>Test download</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/download.js"></script>
<script id="formdata"></script>
</head>
<body>
<button onclick="savehtmlformdata();">Als HTML mit Formulardaten speichern</button>
<button onclick="readhtmlformdata();">Formulardaten lesen</button>
<input name="input1">Input 1
<input name="input2">Input 2
<input name="input3">Input 3
<input name="input4">Input 4
<script>
function savehtmlformdata() {
var formdata = {};
$("input").each(function (idx, item) {
formdata[item.name] = item.value;
});
$("#formdata").text("var formdata = " + JSON.stringify(formdata)) + ";";
var thehtml = $("html");
var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
download(doc, "form-data.html", "text/html");
}
function readhtmlformdata() {
for (key in formdata) {
$("input[name='" + key + "']").val(formdata[key]);
}
}
</script>
</body>
</html>Mit "Als HTML mit Formulardaten speichern" kann man die Seite mit eingebetteten Formulardaten speichern und ggf. per Email verschicken. Öffnet sie der Empfänger, kann er mit "Formulardaten lesen" die eingebetteten Daten in die Eingabefelder eintragen.
Letzteres kann man natürlich auch automatisch beim Laden der Seite machen.
Dies setzt voraus, dass der Empfänger die selbe Umgebung mit lokalem jQuery und download-Skript hat. Ist das nicht der Fall, ist es kein Problem, die Skripts in der HTML-Datei einzubetten.
Prüfe, ob das in die Richtung geht, die Du brauchst.
OK, dann geht es zunächst mal nur darum, die Seite zu speichern, dann zu verschicken und sicher zu stellen, dass die Formularfelder wieder richtig ausgefüllt sind, wenn der Empfänger die Seite gespeichert und geöffnet hat. Man müsste nur das Array mit den Werten in der Seite einbetten, so dass es mit verschickt wird und beim Empfänger wieder auslesen. Ich werde so etwas ausarbeiten ...
Dann ist es auf der einen Seite u. U. einfacher, weil dann die Cross-Domain-Probleme nicht auftreten. Normaler Weise braucht man zum Verschicken einer Email PHP, aber man könnte es u. U. auch mit der mailto-Funktion machen. Das setzt dann voraus, dass die Person, die das Formular verschickt, einen Email-Client installiert hat,
Auf der anderen Seite sehe ich das Problem, dass Du das ganze lokal haben willst. Bei der empfangenden Person muss das Ganze ja wieder in eine HTML-Seite eingetragen werden und die liegt im Dateisystem u. U. ganz woanders.
Du kannst natürlich das gespeicherte Dokument von Hand per Email versenden, aber ich verstehe dich so, dass Du dies automatisch durch Knopfdruck tun möchtest.
Verstehe ich dich richtig, Du möchtest das Dokument von Seite 1 mit der Tabelle, die aus dem Localstorage generiert wird, verschicken?
Du warst auf dem richtigen Wege und die step-Funktion funktioniert. Das Problem war, dass Du innerhalb dieser Funktion nicht direkt auf x und fillStyle zugreifen kannst, sondern den Eingangsparameter layer zu Hilfe nehmen musst:
$('canvas').animateLayer('myBox', {
x: 400
}, {
duration: 3000,
easing: 'swing',
step: function (now, fx, layer) {
if (layer.x > 250) {
layer.fillStyle = "green";
// aler("hallo");
}
},
complete: function (layer) {
$('canvas').setLayer('myBox', {
fillStyle: 'blue',
rotate: 30,
x: '+=10',
y: '-=10'
})
.drawLayers();
}
});