Du schreibst zwar, dass XAMPP läuft, aber dieses: 'file:///DATEIPFAD' zeigt, dass Du deine Seite am Server vorbei geöffnet hast, vermutlich durch Doppelklick oder "Datei - Öffnen". Die Lösung steht in der Fehlermeldung: "Cross origin requests are only supported for protocol schemes: http". Die URL muss dann so aussehen:
http://localhost:8080/dateiname.html
wobei 8080 der Port ist. Wie dieser bei XAMPP lautet, weiß ich nicht. Und die HTML-Datei muss im Verzeichnis htdocs des Servers liegen.
Selfhtml ist immer eine gute Quelle:
https://wiki.selfhtml.org/wiki/CSS
Was dein Beispiel mit den Radiobuttons betrifft, so empfiehlt es sich, das Label-Tag zu verwenden.
Der Grund, warum das nicht funktioniert ist folgender: Die Funktion addEventListener tut das, was der Name wortwörtlich sagt: Sie fügt den Listener hinzu und ersetzt ihn nicht etwa. Daher wird bei dir mit jedem Klick ein weiterer Listener registriert und die anderen bleiben erhalten. Wenn das, was Du vor hast, funktionieren will, musst Du jedes Mal den alten Listener entfernen, bevor Du den neuen hinzu fügst:
https://wiki.selfhtml.org/wiki/JavaScrip…veEventListener
Ich stimme aber Basti zu: Ich sehe keinen Vorteil bei diesem Verfahren, wird nur unnötig kompliziert.
Mit CSS-Animation kann man auch Hintergrundbilder wechseln und sogar schön überblenden:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Animation
Ich hatte da vor ein paar Tagen für eine andere Frage ein Demo gemacht:
#bgchanger {
height: 200px;
width: 300px;
background-size: cover;
background-position: center;
animation: ani 3s linear infinite;
}
@keyframes ani {
0% {
background-image: url(images/dia0.jpg);
}
15% {
background-image: url(images/dia0.jpg);
}
33.5% {
background-image: url(images/dia1.jpg);
}
66.5% {
background-image: url(images/dia1.jpg);
}
67% {
background-image: url(images/dia2.jpg);
}
100% {
background-image: url(images/dia2.jpg);
}
}Welche Informationen ist unter dem Link beschrieben. Ich gebe zu, dass die Infos dort ein wenig verwirrend sind, weil es so viel ist. Ein wichtiges ist target, das gibt das Element an, das das Event auslöst, in deinem Fall den Button auf den geklickt wurde. Lass dir das Event mal mit console.log ausgeben und sieh dir an, was drin steht:
closegarantie.addEventListener("click", function (e) {
console.log(e);
closegarantiebody.classList.toggle("d-none");
});Das toggle ist schon richtig und zwar dort, wo Du den Text immer abwechselnd auf- und zumachen willst. Aber bei "Alle ausblenden" willst Du ja, dass sie unabhängig vom aktuellen Zustand unsichtbar werden, daher ist dort das add angebracht.
Der Parameter e in deiner anonymen Funktion steht für event , das ist grob gesagt ein Objekt, das Informationen über das auslösende Ereignis enthält, in deinem Fall den Klick auf den Button. Ist hier im einzelnen beschrieben:
https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event
Weglassen kannst Du es immer dann, wenn Du keine der Informationen darin benötigst.
Alle die Variablen, die Du eingangs mit getElementById ermittelst, ändern sich im weiteren Verlauf nicht mehr und sollten als const definiert werden.
Das Verfahren mit classList.toggle ist schon Mal gut.
Besser nicht für jeden Unterpunkt eine eigene ID und Funktion definieren, sondern allen die selbe Klasse zuweisen, eine Nodelist mit querySelectorAll ermitteln, diese in einer Schleife abarbeiten und jeweils den Eventhandler zuweisen. Dazu musst Du im DOM navigieren und brauchst Nachbarselektoren:
https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator
Auf die Weise brauchst Du nur noch das HTML zu ändern, wenn eine weitere Frage hinzu kommt.
wie fixe ich es wenn ich einzelne Elemente ausblende, dann aber auf den button alle ausblenden gehe dann blendet er nur die aus die eingeblendet sind
Das kommt durch das classList.toggle zu Stande, verwende statt dessen classList.add.
kann mir jemand noch erklären wie ich den Button von ausblenden zu einblenden ändern kann dieser sich aber wieder ändert wenn wieder drauf geklickt wird
Lösung a): Im HTML zwei Buttons anlegen und den, der gerade nicht sichtbar ist, mit display:none; unsichtbar machen. Auch dazu kannst Du die Klasse "d-none" verwenden.
Lösung b): Die Buttons nicht im HTML anlegen, sondern in einem Pseudoelement ::after. Auch das hat den Vorteil, dass Du nicht jedes Mal den Button berücksichtigen musst, wenn Du einen neue Frage hinzu fügst.
So ist der Titel zwar aussagekräftig aber er trifft nicht wirklich das Problem des TO: Er hat ein Video mit zwei Tonspuren und will diese umschalten.
Das wird hier diskutiert und auf video.js verwiesen:
Danke für das Sorbet! Ich lasse es Mal laufen, während ich dies schreibe.
So wie auf dem Screenshot ist es richtig. Mehr zum Einbinden von JS und CSS kannst Du hier nachlesen:
https://wiki.selfhtml.org/wiki/JavaScrip…bindung_in_HTML
https://wiki.selfhtml.org/wiki/CSS/Tutor…heets_einbinden
Heißt das ich muss mich für eine der vielen Lightboxen entscheiden und diese dann in meinem javascript (js) Ordner einbinden, durch den eingesetzten <script> Code wird das vom Browser dann erkannt und es kann losgehen mit der Diashow?
Ja.
Diesen Quellcode
Code
- <script src="ihr-js-verzeichnis/lightbox.js"></script>
habe ich in der letzten Zeile bevor der </body> tag schließt eingefügt. Wahrscheinlich falsch, siehe hier:
Offenbar hast Du das von hier:
https://wiki.selfhtml.org/wiki/HTML/Tuto…htbox_einbinden
I. allg. ist Selfhtml eine gute Quelle, aber in diesem Fall wird das Einbinden des js-Files nicht gut beschrieben. Du musst, genau wie beim CSS-File, die Datei lightbox.js in dein Verzeichnis für Javacripts kopieren, gängiger Name "js", und dann den Verzeichnisnamen im Skript-Tag angeben:
<script src="js/lightbox.js"></script>
<a href="images/bild-1.jpg" data-lightbox="bild-1" data-title="Bildunterschrift"> <img src="images/bild-1-vorschau.jpg" alt="alternative Erklärung"> </a>
Nur wo soll ich den Quellcode einfügen?
Dieser Code zeigt das Vorschaubild an und enthält den Link auf das große Bild, das in der Lightbox angezeigt werden soll. Die Position ist beliebig, platziere diesen Code dort, wo das Vorschaubild angezeigt werden soll.
Lightboxes gibt es diverse, die Beschreibung bei Selfhtml bezieht sich auf die lhokeshdakar-Version. Ich empfehle statt dessen Fancybox 3, weil sie voll responsiv und Touch-geeignet ist. Wenn Du sie aus dem CDN lädst, wie im Quickstart angegeben, ist es ganz einfach.
Sollte nicht der <head> tag seperat an erster Stelle stehen und und wenn der </head> tag geschlossen ist, danach erst der <body> tag anfangen??
Das trifft zu. Aber <head> nicht mit <header> verwechseln, beides sind verschiedene Dinge.
die Website wird allerdings richtig angezigt..
Das ist so, die Browser versuchen, auch aus fehlerhaftem Code eine vernünftige Anzeige zu machen.
Was ich eigentlich möchte ist diese Anordnung:
Kann mir jemand einen Tipp geben wie ich die obere Anordnung einstellen kann
Ja, die Antwort ist immer die selbe aber dadurch nicht weniger richtig: Informiere dich über Flexlayout und die Eigenschaft align-items, damit kannst Du solch eine Andordnung leicht erzeugen.
Wie kann ich alle Photos in der Bildergalerie so anordnen das jedes das gleiche Seitenverhältnis hat bzw in einen quadratischen Rahmen packen?
Wenn Du die Bilder in einen quadratischen Rahmen packen willst, musst Du akzeptieren, dass
Realisieren kannst Du beides entweder mit Hintergrundbildern und der CSS-Eigenschaft background-size oder mit img-Tags und der CSS-Eigenschaft object-fit.
https://wiki.selfhtml.org/wiki/CSS/Eigen…background-size
https://wiki.selfhtml.org/wiki/CSS/Eigen…-fit#object-fit
einfache Galerie mit vier quadratischen Formaten auf jeder Zeile
Ich empfehle, dich nicht auf eine feste Anzahl pro Zeile festzulegen, sondern diese variabel zu halten, denn es gibt vom Smartphone bis zum Desktop-PC sehr viele verschiedene Bildschirmabmessungen.
Sollte ich die Bilder für die Vorschau in der Bildergalerie (...) mit Thumbnails bestücken das die ladezeit kürzer wird und erst die originalgröße der Photos beim klick auf das Vorschaubild in einer neuen Seite laden oder ist das egal?
Egal ist es nicht, denn die Ladezeit ist ein wichtiger Faktor für deine Besucher. Sind es relativ viele Bilder, ist auf jeden Fall zu empfehlen, Thumbnails zu verwenden.
Ist es überhaupt die richtige Herangehensweise die Photos über CSS Code in ein Raster zu packen und dann in einer neuen Seite zu verlinken in der das Photo dann mit der Originalgröße angezeigt wird?
Ein Raster schon, aber auf eine neue Seite verlinken weniger, weil es für den Besucher umständlich ist, von der neuen Seite immer wieder zurück in die Übersicht zu müssen. Ein gängiges Verfahren für eine Bildergalerie ist, eine Lightbox zu verwenden, ich empfehle Fancybox 3:
https://www.fancyapps.com/fancybox/3/
Probiere es aus und mach dir ein Bild.
Wozu ist "PicAmount" ?
Das ist mir auch unklar.
Ich bin der Meinung, dass dein Code mit der Schleife funktionieren sollte. Um Missverständnisse zu vermeiden, würde ich nur das "1" bei den Variablennamen weg lassen:
var btn_i;
for (btn_i = 1; btn_i < PicAmount; btn_i++){
var modal = document.getElementById("myModal"+btn_i);
var btn = document.getElementById("Pic"+btn_i);
btn.onclick = function() {modal.style.display = "block";}
}denn diese Variablen enthalten ja bei jedem Schleifendurchlauf einen anderen Button/Modal.
Hier müsste deine Frage beantwortet werden:
Das Diagramm werd ich wahrscheinlich über php machen
Das ist eine Möglichkeit und immer dann angebracht, wenn Du nichts an Animationen oder Interaktivität brauchst. Ich habe vor ein paar Wochen mit jpgraph einige Diagramme angefertigt und das hat ganz gut funktioniert:
Hast Du genau in den Einstellungen des Drucken-Dialoges nachgesehen?
Wenn es nicht geht, können wir immer noch ein img-Tag mit object-fit verwenden.
<tr height="25">
<td align="center" class="anfahrt" rowspan="12">
<div class="anfahrtsbild">
<img src="routenmap.png">
</div>
</td>
</tr> div.anfahrtsbild {
width: 470px;
height: 650px;
overflow: hidden;
/* background-image: url(images/routenmap.png);
background-size: cover;
background-position: center center; */
}
div.anfahrtsbild img {
height: 650px;
width: 470px;
object-fit: cover;
object-position: center center;
}Fertiger Code kommt immer gut an. Forenregeln und Eigeninitiative - egal. Womit wir, BTW, einen der "üblichen Verdächtigen" von hier:
Intervalle nehmen keinen gemeinsamen Einfluss vanilla JS
identifiziert hätten.
Wenn ich mir den String ansehe, kommt mir der Verdacht, dass es JSON-kodierte Daten sind. Wo kommt der String denn her? Du ersetzt Anführungszeichen, die in deinem Beispiel nicht zu sehen sind. Kann es sein, dass dein String so aussieht:
{"Peter": 0.998, "Uwe": 0.872541254, "Beate": 0.72, "Maria Dana": 0.854745}