Bei der alten Version geht die Drehung auch auf dem Smartphone ... wenn man auf das Logo tippt, dreht es sich wie ein Propeller, solange bis man auf einen anderen Platz tippt.
Tatsächlich, ich bin überrascht! Geht mit der neuen Version genau so gut:
http://webentwicklung.ulrichbangert.de/spinner.html
Getestet mit Samsung-Browser und Chrome auf Android.
Die Browserentwickler haben da eine brauchbare Übersetzung des hover nach touch gefunden.
Kann man mit Flex-direction auch die Anzeige für Smartphone Landscape anderst gestalten wie für Portrait?
Ja, Du brauchst dazu eine geeignete Mediaquery, die Orientierung des Bildschirms kannst Du abfragen und entsprechend flex-direction festlegen:
https://wiki.selfhtml.org/wiki/CSS/Media_Queries#orientation
Browsersupport scheint aber nicht so gut zu sein, für Apple-Geräte gar nicht, vielleicht besser mit Javascript abfragen.
ich habe es jetzt mit flex versucht, aber das kommt auf dem Smartphone nicht so richtig (die icones kommen in einer Spalte neben dem Logo und diese Spalte ist dann höher wie das Logo).
Deshalb habe ich die icones mal vorläufig unter das Logo gesetzt ... das sieht eigentlich ganz gut aus und ist auch auf dem Smartphone ok.
Das ist ein gängiges Problem, dass die Desktop-Ansicht auf dem Smartphone weniger gut aussieht. Du kannst jedoch mit einer Mediaquery abhängig von der Fensterbreite problemlos zwischen beiden Darstellungen umschalten indem Du flex-direction änderst.
Was die Drehung betrifft, so findet sie ja nur beim Hover statt und das gibt es auf dem Smartphone nicht.
Das Problem kenne ich, ich hatte es mal bei einem mehrstufigen Menü, das ich mit dem selben Verfahren gebaut hatte.
Lösung, indem Du, wenn das Kind-Akkordeon aufgeklappt wird, die Höhe des Eltern-Akkordeons korrigierst:
panel.style.maxHeight = panel.scrollHeight + "px";
var parent = this.parentNode;
if (parent.classList.contains("panel")) {
parent.style.maxHeight = (parent.scrollHeight + panel.scrollHeight) + "px";
}Und zum anderen macht es überhaupt keinen Sinn
Das denke ich mir auch häufig, wenn ich die Vorgänge in den Computerforen so beobachte. Man stelle zum Beispiel mal Bastis Posting #18 dem Posting #10 in diesem Thread gegenüber:
das der Kasten mit den Sprachen will einfach nicht neben dem Logo erscheinen, sondern die Ikones kommen immer in der nächsten Zeile
Das liegt daran, dass das Div, in dem der Spinner liegt, ein Blockelement ist und dies nimmt immer eine Zeile für sich ein.
Lösung durch Flexlayout, dadurch kann man die Elemente problemlos nebeneinander anordnen:
Mit addEventListener kannst Du eine Aktion beim Klick durchführen.
Mit querySelektorAll kannst Du eine Nodelist, so eine Art Array, der drei Divs erzeugen.
Dann eine Variable führen, die den Index des Elementes in der Nodelist angibt.
diesen Index von Klick zu Klick um eins erhöhen und das alte Element unsichtbar und das neue sichtbar machen.
Zum Nachschlagen empfehle ich Selfhtml.
Mit "nicht animiert" meinst Du wahrscheinlich, dass die Elemente abrupt, ohne Überblenden, wechseln sollen? Und mit "Bei Klick auf ein div", dass der Wechsel nicht automatisch erfolgen soll, sondern eben durch Klick?
Ich hatte mir vorgestellt, die SVGs in den selben Container .icon zu legen und absolut zu positionieren, so dass sie übereinander liegen. Da es drei Bilder sind, musst Du jedes für 1/3 der Zeit, d. h. 33.33% anzeigen. Und wenn Du statt gezielter Klassen alle Pfade ändern willst, brauchst Du ebenfalls querySelectorAll und eine Schleife, denn es sind ja mehrere Pfade. Und musst den Punkt vor dem "path" weg lassen.
Ausgehend von deiner ersten Version habe ich dies gemacht:
https://codepen.io/Sempervivum/pen/RXoBmm
BTW: Wenn wir bei Opacity sind, kann man mit wenigen Änderungen am Timing einen netten Übergangseffekt erzielen:
PS: Außerdem liefert document.querySelector nur das erste Element. Da dein Selektor mehrere Elemente liefert, musst Du document.querySelectorAll benutzen und die Element in einer Schleife abarbeiten.
Offenbar kann man die Elemente eines SVGs als Hintergrundbild nicht mit CSS gestalten:
https://stackoverflow.com/questions/1336…ackground-image
Because as a background img, it isn't part of the DOM and you can't manipulate it.
Du kannst jedoch den selben Effekt erzielen, indem Du die Grafiken normal einbettest und z. B. die opacity animierst um zwischen den drei Grafiken umzuschalten.
var_dump ist nur für die Ausgabe von Variablen geeignet. Lass es weg, dann wird es funktionieren.
Was das bedeutet, kann man nur beurteilen, wenn man weiß, in welchem Zusammenhang bzw. an welcher Stelle in deinem Code das steht.
var_dump() kann auch ein zweidimensionales Array ausgeben.
Was in_array betrifft, so hängt die Auswertung davon ab, was Du haben willst. Du hattest ja den Wunsch, dass die $carray der Module für jede Kategorie getrennt gespeichert werden.
PS: Ich sehe gerade, dass da ein Fehler ist:
$carray[$categoryname] = $arrayst; muss lauten: $carray[$categoryname] = [$arrayst];
soll ja ein zweidimensionales Array werden.
Jetzt musst Du natürlich auch die Auswertung anpassen, in_array wird bei einem zweidimensionalen nicht funktionieren. Und überprüfen, ob das Array richtig aufgebaut wird, z. B. durch ein var_dump().
Inzwischen glaube ich, dass ich deine Aussage aus Posting #1 jetzt besser verstehe:
Es soll jedoch praktisch für jede Kategorie ein individueller Array erstellt werden. Wie ist das möglich? Danke schonmal!
Lösung: Ein zweidimensionales Array, wie früher schon angeregt:
require 'inclusions/action/preview/checkcategory.php';
if (issset($carray[$categoryname])) $carray[$categoryname][]= $arrayst;
else $carray[$categoryname] = [$arrayst];Schau mal, ob dir das weiter hilft.
Siehe hier:
https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Array/map
Ich hätte erwähnen sollen, dass Du die Überarbeitung am besten vor der Übergabe an die Bibliothek machst, dann ist es übersichtlicher. Würde dann etwa so aussehen:
// Test ist dein originales Array
var test2 = Test.map(function(item) {return item * 200;});Dann das neue Array test2 übergeben:
var Objekt1 = document.getElementById('Button')
var chart = new Chart(Nummer1, {
type: 'line',
data: {
labels: Jahre ,
datasets : [{label:"Objekt1",
data: test2 // hier das überarbeitete Array übergeben
}]}});Nein, so einfach ist es leider nicht. Du musst schon Element-für-Element das Array abarbeiten und den jeweiligen Eintrag mi 200 mulitplizieren. Recht elegant geht das mit der Funktion map().
Verstehe es immer noch nicht richtig. Wo werden die Werte true/false denn ausgegeben? Und ist $arrayst nun ein Array oder ein einfaches boolean?