Ist das jQuery-UI-Autocomplete? Sollte funktionieren, wenn Du den drei Feldern die selbe Klasse gibst und damit Autocomplete aufrufst:
$( function() {
var availableG3NationalityText = [
"afghanisch", "ägyptisch", "albanisch", "...................", "zentralafrikanisch", "zyprisch"
];
$( ".NationalityText" ).autocomplete({
source: availableG3NationalityText
});
});Nur was soll dann der Schwachsinn, diesen Tag 3 mal zu wiederholen..
??? Ein längerer Text kann ohne weiteres aus mehreren Absätzen bestehen. Was soll daran verkehrt sein?
Und "Absatz" ist bloß die Übersetzung von "paragraph" - was soll gegen die Verwendung sprechen? SelfHTML benutzt den Betriff auch:
Du musst beim uncheck prüfen, ob die Checkbox zu dem Button gehört, der gedrückt wurde, z. B. so:
function uncheck(event) {
var element = event.target;
var val = element.textContent.replace(/ x$/, "");
console.log(element.textContent, val);
var de = document.getElementById('text');
if (de != element) {
var uncheck = document.getElementsByTagName('input');
for (var i = 0; i < uncheck.length; i++) {
if (uncheck[i].type == 'checkbox' && uncheck[i].value == val) {
uncheck[i].checked = false;
}
}
}Es ist eine kleine Fotografie, die im Seitenheader ganz am Rand dargestellt wird. Großartig skaliert wird die nicht.
Für Fotografien ist SVG überhaupt nicht geeignet und wenn auch die Skalierbarkeit nicht relevant ist, macht es keinen Sinn, in diesem Fall SVG zu verwenden. Sinnvoll wäre es nur, wenn es sich bei dem Logo um eine Grafik mit klaren Konturen handelt, die gleich als Vektorgrafik erzeugt worden wäre.
Ja. Der Effekt des Includierens ist, als ob Du den Text von z. B. header.html kopierst (in die Zwischenablage) und auf der betr. Seite (z. B. index.php) einfügst. Wenn der Text beim Browser ankommt, ist vom include nichts mehr zu sehen, auch nicht für eine Suchmaschine, die den Text analysiert, und das Javascript und CSS aus dem head-Tag wirkt ebenfalls auf die includierten Teile.
Meine Empfehlungen:
Semantische Tags verwenden, also <header> statt <div id="header">, <nav> statt <div id="navbar">, so wie von Basti empfohlen.
Auf iFrame verzichten, er hat den Nachteil, dass sich die Größe zunächst nicht an den Inhalt anpasst und zusätzliche Tricks mit Javascript erfordert.
Dann für jede Seite eine einzelne Datei anlegen und die Teile, die auf allen Seiten gleich sind, mit PHP-include einziehen. Also
index.php:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<meta charset="utf-8" />
<meta name="description" content="..." />
<meta name="Keywords" content="..." />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<?php include("header.html"); ?>
<main>
Hier die Inhalte der Hauptseite
</main>
<?php include("footer.html"); ?>
</body>
</html>header.html:
<header>
<div id="logo">
<img src="img\logo.header.jpg" />
</div>
<div id="res_btn" onclick="show_hide_nav('navbar')">
<img src="img\button.png" />
</div>
<nav>
<ul>
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="1.php">1</a>
</li>
<li>
<a href="2.php">2</a>
</li>
<li>
<a href="3.php">3</a>
</li>
<li>
<a href="4.php">4</a>
</li>
<li>
<a href="impressum.php">Impressum</a>
</li>
</ul>
</nav>
</header>1.php:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<meta charset="utf-8" />
<meta name="description" content="..." />
<meta name="Keywords" content="..." />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<?php include("header.html"); ?>
<main>
Hier die Inhalte von Seite 1
</main>
<?php include("footer.html"); ?>
</body>
</html>usw. für den Footer und die weiteren Seiten.
Das wäre mein Vorschlag als Ausgangspunkt. Natürlich gibt es andere Möglichkeiten, wie nur eine Seite zu haben und den Main-Content mit Javascript einzuziehen.
Ich erinnere mich, das war diese Aufteilung mit den Viererboxen.
Desweiteren soll der Test vertikal mittig sein aber nicht die Überschrift die soll immer fest sein.
Und wenn ich mich richtig erinnere , hatte ich dir auch schon Mal gezeigt, wie man so eine Einteilung herstellt: Flex mit Richtung column und margin:auto für den Absatz.
Ich habe mal das CSS nur für die Konfiguration in deinem Bild ausgearbeitet:
.InfoBox {
display: flex;
height: 30vh; /* nur zum Text, damit Platz ist, um die Ausrichtung sichtbar zu machen */
border: 2px solid lightblue; /* nur zum Text */
}
.InfoBox .lteil {
flex: 3;
display: flex;
align-items: center;
justify-content: center;
}
.InfoBox .lteil img {
width: 80%;
height: auto;
}
.InfoBox .rteil {
flex: 7;
display: flex;
flex-direction: column;
}
.InfoBox .rteil h2 {
text-align: center;
}
.InfoBox .rteil p {
margin: auto;
text-align: justify;
padding-right: 0.5em;
}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']);
}