Versuche, im Ausgangszustand den Text schon unsichtbar zu machen:
p.slogan {
text-align: center;
z-index: 800;
animation: text 2s;
animation-fill-mode: forwards;
animation-delay: 5s;
font-size: 0%;
opacity: 0;
}Ja, das ist möglich und zwar indem Du das Event-Bubbling durch Aufruf der Funktion stopPropation() für das #edge5 unterbindest:
var inside = document.getElementById("edge5");
inside.addEventListener("mousemove", event => {
event.stopPropagation();
});In dem Fall dürfte dir animation-delay weiterhelfen:
https://wiki.selfhtml.org/wiki/CSS/Eigen…animation-delay
damit kannst Du die einzelnen Animationen verzögern, so dass sich der richtige Ablauf einstellt.
Du hast da zwei Elemente mit der ID "xfield". Für den Anfang ist es wahrscheinlich am einfachsten, wenn Du die IDs eindeutig machst und an die Funktion myRange() übergibst:
<form oninput=myRange(parseInt(a.value),parseInt(b.value), "xfield1");>
0<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" id="xfield1" for="a b"></output>
</form>
<br>
<form oninput=myRange(parseInt(c.value),parseInt(d.value), "xfield2");>
0<input type="range" id="c" value="25">100
+<input type="number" id="d" value="25">
=<output name="x" id="xfield2" for="c d"></output>
</form>
</body>
<script>
function myRange(a1, a2, idout) {
var x = document.getElementById(idout);
x.value = a1 + a2;
}
</script>Ich bin da nicht bis ins letzte Detail eingestiegen, aber mir scheint, das Problem liegt darin, dass die Eventlistener für die accuButtons innerhalb des Click-Handlers für #button-cart registriert werden. D. h. bei jedem Klick auf #button-cart kommt jeweils ein neuer Eventhandler dazu, so dass es immer mehr Eventhandler gibt, die getriggert werden.
Bei dir heißen die Daten ja chartdata. Willst Du diese komplett austauschen, müsste es so aussehen:
barGraph.data = chartdata;
Willst Du die Labels beibehalten, so:
barGraph.data.datasets = chartdata.datasets;
alles ungetestet.
Wie ich gerade sehe, habe ich da ein wenig daneben gelegen: Es ist sehr einfach, die Daten einfach zu überschreiben, wie dieses Beispiel aus dem Handbuch zeigt:
myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.Ah so. Du hast ja dieses, um den Chart aufzubauen:
var barGraph = new Chart(ctx, {Die Variable barGraph ist dabei im success-Handler deines Ajax-Aufrufes gekapselt und Du kannst später nicht darauf zugreifen. Daher muss Du sie zunächst global machen, indem Du das var wegnimmst und sie stattdessen außerhalb des Dokument-Ready definierst:
var barGraph;
Anscheinend ist es nicht möglich, einfach die Daten zu überschreiben; an dieser Stelle merke ich, dass es einfacher ist, den Chart neu anzulegen, anstatt ihn zu aktualisieren. Damit dann nicht alte Daten herum geistern, wie Du es bei dem Mouseover hast, musst Du den alten Chart vorher löschen. Auch dafür gibt es eine Funktion:
https://www.chartjs.org/docs/latest/developers/api.html
Also barGraph.destroy();
Dann kannst Du den neuen Chart genau so neu erzeugen wie beim ersten Mal.
Wer kann mir helfen?
Am besten das Handbuch 
Es gibt da eine Funktion update(), um einen Chart nach Änderung zu aktualisieren:
Ist das das Open-Source chart.js, was Du benutzt?
Vielleicht wird der Sinn klarer, wenn man es mit document.querySelector() vergleicht: Hier kann man auch ein anderes Element als document verwenden und der Selector im Parameter wird dann nur innerhalb dieses Elementes gesucht. Z. B. so:
const thediv = document.getElementById("mydiv1");
const thespan = thediv.querySelector("#myspan1"); // das Element #myspan1 wird innerhalb von #mydiv1 gesuchtBei getElementById geht das nicht, weil es eine ID immer nur einmal im Dokument gibt, aber ich vermute, dass man es aus Gründen der Einheitlichkeit so belassen hat, dass das document davor gestellt werden muss.
Angesehen habe ich es mir aber leider verstehe ich es nicht: Es ist entweder das Menü oder das Hamburger-Icon sichtbar. Wie kann da das Menü das Icon überdecken?
Solltest du also in deinem Code über eines der Elemente mit deinem Mauszeiger gehen, wird dir immer das letzte Element der For Loop angezeigt.
Hast Du das getestet oder ist das eine Mutmaßung? Wenn man let statt var verwendet, passiert das nicht und es braucht keine Klimmzüge.
Wenn ich mal deinen kryptischen Code außen vor lasse und nur dies lese:
ich möchte gerne ein mouseover Event für eine vordefinierte Klasse erstellen.
müsste dieser einfache und geradlinige Code doch tun, was Du vorhast:
var shadows = document.getElementsByClassName('shadow-primary');
for (let i = 0; i < shadows.length; i++) {
const theShadow = shadows[i];
theShadow.addEventListener('mouseover', funktion() {
console.log(i, this);
});
theShadow.addEventListener('mouseout', funktion() {
console.log(i, this);
});
}eine möglchst effiziente Lösung zu finden, bei der Datenvolumen gespart wird und alles möglichst schnell angezeigt werden kann
Die beiden Lösungen haben gegensätzliche Eigenschaften:
Alles holen und clientseitig filtern:
Das erste Laden dauert länger aber die Umschaltung des Filters geht schnell. In jedem Fall wird das max. Datenvolumen übertragen.
Daten holen, je nachdem wie der Filter eingestellt ist:
Das erste Laden geht schneller aber es entsteht eine geringe Wartezeit, wenn der Filter umgeschaltet wird. Wird der Filter nicht umgeschaltet, ist das Datenvolumen geringer.
Ich würde es vom Datenvolumen abhängig machen:
Wenn relativ gering dann alles holen und clientseitig filtern.
Andernfalls nach Filtereinstellung holen.
Ich müsste doch eigentlich dann den PHP-Code ändern, nun gibt er ja eben diese Selectliste raus
Ob das einfach oder kompliziert ist, hängt wesentlich davon ab, ob Du auf das PHP auf der einen Seite und die Auswertung auf der anderen Seite ohne weiteres Zugriff hast. Du schreibst ja, dass Du Joomla verwendest und dann ist es u. U. im CMS vergraben und Du bist auf CSS angewiesen.
Togglebutton wäre auch kein Problem, einfach einen Checkbutton mit Label und entspr. gestalten.
Wenn es nur zwei Optionen sind, könnte man daran denken, statt eines Select Radiobuttons mit Labels zu verwenden. Dann tut man sich mit der Gestaltung wesentlich leichter und ein benutzerdefinierter Haken wäre kein Problem.
Man muss dem Bild sowohl Breite als auch Höhe zuweisen, damit der Browser weiß, woran er es anpassen soll:
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}Bei mir funktioniert das mit dem Text nicht
Text? Möglicher Weise ein Missverständnis, mein Hinweis mit object-fit bezog sich auf das Bild:
Aber das andere soll schon so sein, dass das Bild dann nur als Ausschnitt gezeigt wird und je nachdem wie das Fenster gezogen wird mehr oder weniger sichtbar wird.