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();
}
});Nimmt sich nicht viel. Bisher bezog sich ja alles auf das Speichern. Wenn es ganz etwas anderes ist, kannst Du ja einen neuen Thread anfangen.
Ich habe mal das Codepen und die Umschaltung auf das Hamburger-Menü zusammen geführt. Fehlt noch die Formatierung des vertikalen Menüs, wenn es durch Klick auf das Hamburger-Symbol aufgeklappt wird.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
input#cb-slim-menu {
display: none;
}
#slim-menu {
display: none;
}
/* #main-menu ul {
display: flex;
flex-direction: row;
list-style: none;
} */
@media screen and (max-width: 460px) {
#main-menu ul {
display: none;
flex-direction: column;
}
input#cb-slim-menu:checked~ul {
display: flex;
}
#slim-menu {
display: inline-block;
}
}
</style>
<style>
/* Formatierung aus Codepen */
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
display:flex;
flex-wrap: wrap;
}
nav ul li {
display: inline-block;
background-color: #E64A19;
}
nav a {
display: block;
padding: 0 10px;
color: #FFF;
font-size: 20px;
line-height: 60px;
text-decoration: none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px;
/* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover>ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
/* Change this in order to change the Dropdown symbol */
li>a:after {
content: ' +';
}
li>a:only-child:after {
content: '';
}
</style>
</head>
<body>
<!-- ||||||||||||||| NAVIGATION BAR ||||||||||||||| -->
<nav class="nav-menu" id="main-menu">
<input id="cb-slim-menu" type="checkbox" />
<label for="cb-slim-menu">
<span id="slim-menu">
<i class="fa fa-fw fa-bars"></i>
</span>
</label>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">WordPress</a>
<!-- First Tier Drop Down -->
<ul>
<li>
<a href="#">Themes</a>
</li>
<li>
<a href="#">Plugins</a>
</li>
<li>
<a href="#">Tutorials</a>
</li>
</ul>
</li>
<li>
<a href="#">Web Design</a>
<!-- First Tier Drop Down -->
<ul>
<li>
<a href="#">Resources</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Tutorials</a>
<!-- Second Tier Drop Down -->
<ul>
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">jQuery</a>
</li>
<li>
<a href="#">Other</a>
<!-- Third Tier Drop Down -->
<ul>
<li>
<a href="#">Stuff</a>
</li>
<li>
<a href="#">Things</a>
</li>
<li>
<a href="#">Other Stuff</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Graphic Design</a>
</li>
<li>
<a href="#">Inspiration</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</nav>
</body>
</html>Nein, das musst Du dann selber zusammen fügen.
Das sollte auch nur demonstrieren, wie man die Umschaltung zwischen dem horizontalen Menü und dem Hamburger-Menü macht. Und das geht am besten und am einfachsten mit Mediaqueries.
Wenn es dir dagegen um die Dropdown-Funktion geht, findest Du sicher Beispiele im Netz, wie man das macht.
Diese Frage wird immer wieder gestellt und ich habe vor einiger Zeit mal jemand anders die Lösung gezeigt. Aus diesem Code kannst Du ersehen, wie es funktioniert:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
input#cb-slim-menu {
display: none;
}
#slim-menu {
display: none;
}
#main-menu ul {
display: flex;
flex-direction: row;
list-style: none;
}
@media screen and (max-width: 460px) {
#main-menu ul {
display: none;
flex-direction: column;
}
input#cb-slim-menu:checked ~ ul {
display: flex;
}
#slim-menu {
display: inline-block;
}
}
</style>
</head>
<body>
<!-- ||||||||||||||| NAVIGATION BAR ||||||||||||||| -->
<div class="nav-menu" id="main-menu">
<input id="cb-slim-menu" type="checkbox" />
<label for="cb-slim-menu"><span id="slim-menu"><i class="fa fa-fw fa-bars"></i></span></label>
<ul>
<li>
<a href="http://domain.com/"><i class="fa fa-fw fa-home"></i><span class="main-menu-text"> Home</span></a>
</li>
<li>
<a href="http://domain.com/about.html#testimonials"><i class="fa fa-fw fa-thumbs-o-up"></i><span class="main-menu-text"> Testimonials</span></a>
</li>
<li>
<a href="http://domain.com/about.html"><i class="fa fa-fw fa-info-circle"></i><span class="main-menu-text"> About</span></a>
</li>
<li>
<a href="http://domain.com/faq.html"><i class="fa fa-fw fa-question-circle"></i><span class="main-menu-text"> FAQ</span></a>
</li>
<li>
<a href="http://domain.com/contact.html"><i class="fa fa-fw fa-paper-plane-o"></i><span class="main-menu-text"> Contact</span></a>
</li>
</ul>
</div>
</body>
</html><link href="css/navigation.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">Du ziehst erst dein eigenes CSS und dann das von Bootstrap ein. Damit läufst Du Gefahr, dass deines durch Bootstrap überschrieben wird. Kehre die Reihenfolge um und beobachte, ob es dann besser funktioniert. Dies ist keine Garantie für den Erfolg, da sich, unabhängig von der Reihenfolge, das CSS durchsetzt, das spezifischer ist.
Wenn es sehr viele Fotos sind, empfiehlt es sich, gleich auf dem Server mit PHP zu filtern. Ein geeignetes Filterkriterium zu finden ist u. U. nicht so einfach:
Das Beste wäre das Aufnahmedatum in den EXIF-Informationen, aber dabei kann man nicht sicher sein, ob diese vorhanden sind. Sie können z. B. bei einer Bearbeitung verloren gegangen sein. Zweite Möglichkeit ist der Zeitpunkt der Erstellung der Datei. Problem dabei: Dies ist in der Regel der Zeitpunkt, wann die Datei auf den Server hochgeladen wurde und der kann erheblich vom Zeitpunkt der Aufnahme abweichen. Wenn Du die Website jetzt neu aufbaust sowieso.
Zunächst würde ich empfehlen, mit einem PHP-Skript eine Bestandsaufnahme zu machen, ob die EXIF-Informationen vorhanden sind.
Gleich hier bei HTML-Seminar anfangen:
https://www.html-seminar.de/css-flexbox.htm
Hier sehe ich auch häufig nach:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Einige erweiterte Möglichkeiten mit margin:
Manche sagen ja, "geht nicht - gibt's nicht" und das mit dem URL-Parameter funktioniert tatsächlich:
Seite 2 mit dem Button:
<!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="html-docx-js-master/dist/html-docx.js"></script>
<script src="js/download.js"></script>
</head>
<body>
<iframe id="iframe" src="save-as-docx-content.html"></iframe>
<button onclick="save();">Als DOCX peichern</button>
<script>
function save() {
$("#iframe").attr("src", "save-as-docx-content.html?save=true");
}
</script>
</body>
</html>Seite 1 mit der Tabelle:
<!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="html-docx-js-master/dist/html-docx.js"></script>
<script src="js/download.js"></script>
</head>
<body>
<table id="table">
</table>
<script>
document.getElementById("table").innerHTML = "<tr><td>Zelle 1</td><td>Zelle 2</td></tr>";
function save() {
var thehtml = $("html");
thehtml.find("script").remove();
var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
var converted = htmlDocx.asBlob(doc, { orientation: 'portrait' });
download(converted, "specification.docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
}
if (window.location.href.indexOf("save=true") != -1) save();
</script>
</body>
</html>Also wenn ich z.B. einen Button auf Seite 2 betätige führt das dazu, dass für den Button auf Seite 1 die click() Methode ausgeführt wird.
Eigentlich kein Problem, aber leider wäre das, genau so wie das Auslesen des HTML, ein Cross-Domain-Zugriff und würde genau so vom Browser abgewiesen.
Was man versuchen könnte, ist, einen URL-Parameter beim Einbinden an die Seite 1 zu übergeben, die das Speichern veranlasst. Werde ich versuchen ...
Das Script siehst Du unter: https://www.preiswerter-buchen.de/traffics_resize.html
OK, das ist also das Skript. Und wo wird das eingebunden? Auf https://www.preiswerter-buchen.de/test/ liefert die Textsuche nach <script 136 Treffer!
Jetzt wird mir das Problem klar: Bei mir funktioniert es, weil ich lokal mit einem Webserver teste. Du möchtest es jedoch lokal laufen lassen ohne Webserver. Und dann blockt Chrome es wegen Cross-Origin-Gesichtspunkten. Auf Anhieb fällt mir da keine Lösung ein. Einziehen mit PHP entfällt ja dann auch. Ich überlege weiter.