mehrdimensionelle Arrays

[Andreas Vogt]

Hallo, ich möchte ein assoziatives Array zerteilen in mehrere assoziative Arrays ich habe folgenden Konstrukt:

$Arr1 = array();
$Arr2 = array();

foreach( $latest_events as $event ) {
    if ($i % 0 == 0) { 
        $Arr1($k) = $event;
        $i = $i + 1;
    }
    if ($i % 0 == 1) { 
        $Arr2($k) = $event;
        $i = 0;
    }
    $k = $k + 1;
}

Ist natürlich falsch, aber wie gehts richtig? Gruß Andreas

[MudGuard]

Hi,

ich möchte ein assoziatives Array zerteilen in mehrere assoziative Arrays

anhand welcher Kriterien soll die Aufteilung geschehen.

    if ($i % 0 == 0) { 

Division by zero ...

Ist natürlich falsch, aber wie gehts richtig?

Um zu sagen, wie "es" richtig geht, müßte man wissen, was "es" ist. Siehe oben.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

ich möchte ein assoziatives Array zerteilen in mehrere assoziative Arrays

anhand welcher Kriterien soll die Aufteilung geschehen.

Meine Glaskugel sagt: anhand des Index – gerade vs. ungerade. Die guten ins Kröpfchen, die schlechten ins Töpfchen. Oder auch modulo m.

Meine Glaskugel bleibt völlig trübe, wenn ich sie befrage, was denn der Sinn dahinter wäre. Warum soll das Array aufgeteilt werden?

LLAP 🖖

[mermshaus]

Falls es um Aufteilung in Spalten geht:

<?php

function columnize(array $data, $columns)
{
    $ret = array_fill(0, $columns, array());

    $i = 0;

    foreach ($data as $element) {
        $ret[$i++ % $columns][] = $element;
    }

    return $ret;
}

$latest_events = array('foo', 'bar', 'baz', 'qix', 'qox', 'fiz', 'fuz', 'bix', 'box', 'tox');

var_dump(columnize($latest_events, 3));

//array(3) {
//    [0]=>
//  array(4) {
//        [0]=>
//    string(3) "foo"
//        [1]=>
//    string(3) "qix"
//        [2]=>
//    string(3) "fuz"
//        [3]=>
//    string(3) "tox"
//  }
//  [1]=>
//  array(3) {
//        [0]=>
//    string(3) "bar"
//        [1]=>
//    string(3) "qox"
//        [2]=>
//    string(3) "bix"
//  }
//  [2]=>
//  array(3) {
//        [0]=>
//    string(3) "baz"
//        [1]=>
//    string(3) "fiz"
//        [2]=>
//    string(3) "box"
//  }
//}

[Gunnar Bittersmann]

@@mermshaus

Falls es um Aufteilung in Spalten geht:

Warum sollte es darum gehen? Der Sinn wäre welcher?

LLAP 🖖

[mermshaus]

Falls es um Aufteilung in Spalten geht:

Warum sollte es darum gehen?

Weil ich auf Basis des vorliegenden Codes auch sagen würde, dass deine Glaskugel richtig liegt.

Der Sinn wäre welcher?

Aufteilung in Spalten bzw. eben in Untermengen mit gleichmäßiger Anzahl an Elementen.

[Gunnar Bittersmann]

@@mermshaus

Falls es um Aufteilung in Spalten geht: Warum sollte es darum gehen? Der Sinn wäre welcher? Aufteilung in Spalten bzw. eben in Untermengen mit gleichmäßiger Anzahl an Elementen.

Gehen wir der Sache mal auf den Grund und fragen weiter:

Warum sollen die Daten in Spalten mit gleichmäßiger Anzahl aufgeteilt werden?

LLAP 🖖

[mermshaus]

Falls es um Aufteilung in Spalten geht: Warum sollte es darum gehen? Der Sinn wäre welcher? Aufteilung in Spalten bzw. eben in Untermengen mit gleichmäßiger Anzahl an Elementen.

Gehen wir der Sache mal auf den Grund und fragen weiter:

Warum sollen die Daten in Spalten mit gleichmäßiger Anzahl aufgeteilt werden?

Gunnar, ist jetzt nicht böse gemeint, aber für deine kleinen Spielchen möchte ich keine Hirnkapazität aufwenden. :) Wenn du mir etwas mitteilen möchtest, drück dich bitte klar und verständlich aus. Danke!

[Gunnar Bittersmann]

@@mermshaus

Gehen wir der Sache mal auf den Grund und fragen weiter:

Warum sollen die Daten in Spalten mit gleichmäßiger Anzahl aufgeteilt werden?

Gunnar, ist jetzt nicht böse gemeint, aber für deine kleinen Spielchen möchte ich keine Hirnkapazität aufwenden. :)

Dem Problem des Fragenden auf den Grund zu gehen ist kein „kleines Spielchen“.

Wenn du mir etwas mitteilen möchtest, drück dich bitte klar und verständlich aus. Danke!

Ich möchte dir (und anderen) mitteilen, dass man dem Fragenden nur dann sinnvoll antworten kann, wenn überhaupt das Problem klar ist.

Das Problem ist hier nicht das Aufteilen eines Arrays, sondern die Anordnung der Boxen.

LLAP 🖖

[Andreas Vogt]

Hallo, ja sorry, hätte das Problem besser beschreiben sollen. Ich habe ein assoziatives Array (Wordpress) das in einer Schleife eine Ansicht erstellt. Diese besteht aus 5 nebeneinander liegenden Div-Containern, siehe Webseite. Dabei habe ich aber das Problem, dass die Reihenfolge so abläuft, dass erst der 1. Container gefüllt wird, dann der 2. usw. Nun möchte ich das Array aufteilen in 5 einzelne Arrays, und jeden Container aus einem Array befüllen, damit die Reihenfolge stimmt. Deswegen die Modulo Operation. D.H. 1, 6, 11. Item des Arrays sollten im Arr1 stehen.

Hoffe ich habe es nun besser beschrieben. Gruß Andreas

[Gunnar Bittersmann]

@@Andreas Vogt

ja sorry, hätte das Problem besser beschreiben sollen. Ich habe ein assoziatives Array (Wordpress) das in einer Schleife eine Ansicht erstellt. Diese besteht aus 5 nebeneinander liegenden Div-Containern, siehe Webseite.

Das ist dein Problem.

Die Lösung ist nicht, die Daten so zu verunstalten, dass sie in dein verhunztes Markup passen. Stattdessen solltest du dein Markup berichtigen.

Heißt in dem Fall: auf die Container <div class="column"> zu verzichten. Einfach alle <div class="pincard"> hintereinander. Der Container <div class="pwrapper"> wird eine Flexbox mit flex-flow: row wrap, die Flexitems bekommen eine Breite – Problem gelöst.

LLAP 🖖

[Andreas Vogt]

Hallo, hier mein erster Versuch: swhv-kg13.de/test.htm

Leider entstehen Lücken. Andreas

[Gunnar Bittersmann]

@@Andreas Vogt

Hallo, hier mein erster Versuch: swhv-kg13.de/test.htm

Leider entstehen Lücken.

Du meinst in der Vertikalen? Also, dass die Boxen nicht alle gleich hoch sind?

Du hat ja auch display: inline-box verwendet anstatt Flexbox.

Das flex-flow: row wrap ist wirkungslos, da nirgends eine Flexbox ist. Die Flexbox (d.h. das Element mit display: flex) darf auch nicht irgendein Vorfahrenelement, sondern muss das Elternelement der Flexitems sein.^[1]

width: 900px ist auch nicht gut. Viewports sind üblicherweise deutlich schmaler. Nutzer zu horizontalem Scrollen zu zwingen ist doof.

Und du solltest sämtliche Stilangaben ins Stylesheet schreiben; nicht inline in style-Attribute.

LLAP 🖖

---

1. zumindest, wenn kein display: contents im Spiel ist ↩︎

[Andreas Vogt]

Hallo, hab rausgefunden dass man das ganze wohl Masonry-Style nennt: http://w3bits.com/css-masonry/ Meine Testseite hab ich demnach aufgebaut: http://swhv-kg13.de/test.htm

Sieht eigentlich ganz gut aus - aber ich hab das gleiche Problem wie zu Anfang. Die Reihenfolge ist von Oben nach Unten und von Links nach Rechts. Ich benötige aber die Reihenfolge von Links nach rechts und von Oben nach Unten.

Lässt sich das anpassen die Reihenfolge? Alternativ wohl doch wieder das Ausgangs-Array sortieren?

Andreas

[Gunnar Bittersmann]

@@Andreas Vogt

hab rausgefunden dass man das ganze wohl Masonry-Style nennt: http://w3bits.com/css-masonry/

Ah, du willst gar nicht, dass die Boxen dieselbe Höhe haben.

Lässt sich das anpassen die Reihenfolge? Alternativ wohl doch wieder das Ausgangs-Array sortieren?

Nein. Lass mal deine Daten so, wie sie sind.

Allerdings brauchst du etwas JavaScript dafür. (Mit CSS-Grids könnte es demnächst auch ohne gehen.)

Ich hatte das letztens mal gebaut.

(Die Inline-Styleangaben im Bespiel sind nur dazu da, dass die Boxen verschiede Höhen haben. Das entfällt bei dir selbstverständlich, da sich die Höhen aus den Inhalten ergeben.)

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ah, du willst gar nicht, dass die Boxen dieselbe Höhe haben.

Beachte aber, dass bei Masonry-Style der Nutzer die (bei dir zeitliche) Ordnung nicht immer erkennt. Du kannst nicht beides haben.

Nein. Lass mal deine Daten so, wie sie sind.

Ein Grund dafür ist auch, dass du gar nicht wissen kannst, wieviele Spalten beim Nutzer nebeneinanderpassen.

Ändere bei meinem CodePen die Fenstergröße und du siehst, wie sich die Spaltenanzahl der Viewportbreite anpasst.

LLAP 🖖

[Andreas Vogt]

Hallo, ich habe probiert deinen Code auf eine html-Datei anzuwenden: http://www.swhv-kg13.de/test6.html

Da wird nichts entsprechend formatiert. Wo ist denn das Problem?

Andreas

[Gunnar Bittersmann]

@@Andreas Vogt

Wo ist denn das Problem?

Dass du das Script (insb. Zeile var thisElement = document.querySelector('#this');) schon ausführen lässt, bevor das Element überhaupt im DOM existiert.

Das Script ans Ende des body tun. (Oder per Eventhandler document.addEventListener('DOMContentLoaded', …))

LLAP 🖖

[Andreas Vogt]

Danke, tut jetzt. Werde mal versuchen das auf mein Content anzuwenden.

Gruß Andreas

[Andreas Vogt]

OK, habs hinbekommen: http://swhv-kg13.de/terminkalender/ Lädt aber verdammt lange. (vorallem im Firefox)

Gruß Andreas

[Gunnar Bittersmann]

@@Andreas Vogt

OK, habs hinbekommen: http://swhv-kg13.de/terminkalender/

2. Zeile bei 5 Elementen pro Zeile: 02.04., 02.04., 30.04., 23.04., 09.04. Ich sag doch, „dass bei Masonry-Style der Nutzer die (bei dir zeitliche) Ordnung nicht immer erkennt.“

Durcheinander? Der Algorithmus, der die Spalten derart befüllt, ist für deine Zwecke nicht so gut geeignet. Bei dir wäre es besser, tatsächlich die Spalten der Reihe nach zu befüllen.

Das JavaScript wäre dementsprechend anzupassen.

Lädt aber verdammt lange. (vorallem im Firefox)

Kann ich nicht feststellen.

LLAP 🖖

[Andreas Vogt]

Hallo, wenn ich in Firefox den Terminkalender öffne sehe ich nach dem Laden zuerst dieses Bild für 3-4 Sekunden.

Und das ist für mich eigentlich schon zu lange. Bei Chrome und Edge geht das flüssiger. Hängt das mit der Anzahl der Items zusammen? Ich habe schon gedacht weniger laden zu lassen und bei Klick auf Button weitere zu laden.

Andreas

[Gunnar Bittersmann]

@@Andreas Vogt

wenn ich in Firefox den Terminkalender öffne sehe ich nach dem Laden zuerst dieses Bild für 3-4 Sekunden.

Bei mir ist es so etwa eine halbe Sekunde, aber die Verzögerung sehe ich auch.

Ich hab das CSS und JavaScript im Pen noch verbessert; dann liegen nicht alle Items übereinander.

Und das ist für mich eigentlich schon zu lange. Bei Chrome und Edge geht das flüssiger. Hängt das mit der Anzahl der Items zusammen?

Nein, damit ganz sicher nicht. Es hängt mit der Anzahl von externen Ressourcen zusammen, die da geladen werden. Eine Unmenge an Stylesheets und JavaScript: jQuery, jQuery, jQuery, …, Wordpress-Plugins, …

Welche im head stehen und während des Ladens das Rendern der Seite blockieren. Das macht deine Seite langsam.

Du solltest da mal durchsehen, was du davon wirklich brauchst. Und die verbleibenden CSS- und JavaScript-Dateien zu jeweils einer zusammenfassen.

Dann sind da noch ein paar Hintergrundbilder von vor etlichen Jahren (gefühlt: Jahrzehnten), als es in CSS weder border-radius noch linear-gradient gab. Gibt’s jetzt aber; kannst du verwenden. Lies: solltest, und die Grafiken entsorgen.

LLAP 🖖

[Andreas Vogt]

Hallo, Ja ist wirklich viel Overhead was geladen werden muss, aber das sind nicht die Bremser. Der 'Schuldige' ist die Admin-Bar von Wordpress, und die bekommst du ja nicht zu sehen. Brauch die nur ausblenden und OK ists.

Danke für die Hilfe.

[Matthias Apsel]

Hallo Andreas Vogt,

Ja ist wirklich viel Overhead was geladen werden muss, aber das sind nicht die Bremser. Der 'Schuldige' ist die Admin-Bar von Wordpress, und die bekommst du ja nicht zu sehen.

Kleinvieh macht auch Mist. Du solltest nur das laden, was auch tatsächlich benötigt wird.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Kleinvieh macht auch Mist. Du solltest nur das laden, was auch tatsächlich benötigt wird.

Und erst dann laden, wenn es tatsächlich benötigt wird.

JavaScript so laden, dass es das Rendern der Seite nicht blockiert, d.h. nach dem Rendern oder asynchron.

Ressourcen zusammenfassen, um HTTP-Requests zu sparen. Es sei denn, man ist auf Speed – äh HTTP/2.

LLAP 🖖

[Gunnar Bittersmann]

@@Andreas Vogt

Brauch die nur ausblenden und OK ists.

Nö, nicht OK. Der Effekt ist da. Wenn auch kürzer – er macht sich störend bemerkbar. Da solltest du optimieren.

LLAP 🖖

[Andreas Vogt]

Hallo, Problem bei der Sache ist dass ich da kaum Handhabe habe. Die geladenen Plugins laden ihren Content so wie sie entwickelt wurden. Wenn ich den ändern würde, wäre meine Änderung bei der nächsten Aktualisierung des Plugins wieder weg. Und das würde sehr häufig geschehen.

Habe aber noch ein paar Tests gemacht und herausgefunden dass als noch größte Bremse die initialisierung des superfish (Menü Script) darstellt - obwohl die gar nicht wichtig ist. Hab das auskommentiert und jetzt läuft es flüssig - für mich Aktzeptabel.

Gruß Andreas

[Gunnar Bittersmann]

@@Andreas Vogt

Problem bei der Sache ist dass ich da kaum Handhabe habe. Die geladenen Plugins laden ihren Content so wie sie entwickelt wurden. Wenn ich den ändern würde, wäre meine Änderung bei der nächsten Aktualisierung des Plugins wieder weg. Und das würde sehr häufig geschehen.

Bei einem child theme sollte man beeinflussen können, wie Plugins geladen werden, oder?

BTW, hast du meine Verbesserungen übernommen?

LLAP 🖖

[Andreas Vogt]

Hallo, nein, deine Verbesserungen habe ich nicht übernommen. Habe knapp 2 Stunden mich am korrekten Box-Shadow versucht, bekomm es aber nicht so hin wie mit den Grafiken. Daher belass ich es bei den Grafiken.

Gruß Andreas

[Gunnar Bittersmann]

@@Andreas Vogt

nein, deine Verbesserungen habe ich nicht übernommen.

Solltest du noch.

Habe knapp 2 Stunden mich am korrekten Box-Shadow versucht

Shadow??

bekomm es aber nicht so hin wie mit den Grafiken.

Was kriegst du da nicht hin?

Mit einem Colorpicker (Firefox stellt einen für <input type="color"/> zur Verfügung) die Farbwerte für deinen blauen Farbverlauf ermittelt: oben #2161A7, unten #16406C.

Also einfach für das Container-Element
background-image: linear-gradient(to bottom, #2161A7, #16406C)

Dieses soll noch runde Ecken recht unten und links untern haben (die anderen beiden also Radius 0):
border-radius: 0 0 2em 2em

Für den Hovereffekt musst du nur den Gradienten umdrehen, also entweder die Farbwerte vertauschen oder die Richtung in to top ändern.

Den Effekt (oder besser einen noch auffälligeren) solltest du unbedingt auch für :focus angeben, sonst sieht man bei Tastatursteuerung nicht, wo man sich gerade befindet.

Das könnte dann so aussehen. Mehr HTML-Elemente braucht man dazu nicht. (Es würde sogar ohne ul und li gehen.)

Daher belass ich es bei den Grafiken.

Die Headergrafik solltest unbedingt überarbeiten, die ist völlig verwaschen. Außerdem ist das keine Verzierung, die gehört nicht als Hintergrundbild ins CSS, sondern als img-Element ins HTML. Und zwar mit Alternativtext, der denselben Inhalt auch für Nutzer angibt, die die Grafik nicht sehen können (oder wollen und Grafiken laden abgeschaltet haben).

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

(Mit CSS-Grids könnte es demnächst auch ohne gehen.)

Oder auch nicht, wie mir Jen Simmons und mein geschätzter Kollege bestätigten.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich hatte das letztens mal gebaut.

Und nun umgebaut. position: absolute für die Listitems darf natürlich nur gesetzt werden, wenn das JavaScript tatsächlich ausgeführt wird und deren Position berechnet.

Das JavaScript ist jetzt progressive enhancement zum vorhandenen Fallback mit float.

LLAP 🖖

[TS]

Hallo und guten Morgen,

die Aufgabe ist gar nicht so trivial, wenn der assoziative Key erhalten bleiben soll.

Aufteilung eines Arrays in zwei oder mehr getrennte nach Position im Array:

Position != Key

$Arr1 = array();
$Arr2 = array();
## ...
# $ArrN = array();

while (count($latest_events) > 0)
{
    if (count($latest_events) > 0) $Arr1[key($latest_events)] = array_shift($latest_events);
    if (count($latest_events) > 0) $Arr2[key($latest_events)] = array_shift($latest_events);
##  und so weiter für N Zielarrays.
#   if (count($latest_events) > 0) $ArrN[key($latest_events)] = array_shift($latest_events);
}

Ich kann es nicht ausprobieren hier, aber zumindest kurz erklären, was mMn passiert:

Es wird dem Originalarray gearbeitet.
Solange dieses Elemente enthält, wird die Schleife durchlaufen.
Der Positionszeiger im Originalarray zeigt immer auf das erste Element.
Bei jedem Schleifendurchlauf wird dem jeweiligen Zielarray das erste Element des Originalarrays zugewiesen und dieses Array um eben dieses Element gekürzt. Der assoziative Key des Originalelements wird dabei ins Ziel mit übernommen.
Da man nicht weiß, wieviele Elemente das Originalarray hatte, wird vor jeder Übertragung in die Zielarrays nochmals geprüft, ob überhaupt noch ein Element vorhanden ist.

Ich hoffe, es funktioniert so.

Grüße
TS

[Gunnar Bittersmann]

@@TS

Ich hoffe, es funktioniert so.

Nein. Deine „Lösung“ geht am Problem vorbei.

LLAP 🖖

[TS]

Hallo und guten Gunnar,

Ich hoffe, es funktioniert so.

Nein, deine „Lösung“ geht am Problem vorbei.

Ich habe mich lediglich bemüht, die PHP-Aufgabe zu lösen. Um andere Lösungswege mittels Umstellung des Markups kümmerst Du dich ja schon. Aber auch hier wieder meine herzliche Bitte an Dich:

Zeige bitte ausführlich, wie es geht und wirf nicht nur ein Begriffe hin. Dein Niveau ist inzwischen so hoch, dass kein Anfänger mehr mitkommt!

Grüße
TS

[Gunnar Bittersmann]

@@TS

Nein, deine „Lösung“ geht am Problem vorbei.

Ich habe mich lediglich bemüht, die PHP-Aufgabe zu lösen.

Mit anderen Worten: Du hast dir keine Mühe gemacht, überhaupt das Problem zu erkennen.

Zeige bitte ausführlich, wie es geht und wird nicht nur ein Begriffe hin.

Wie wär’s mit einem Link, wo ausführlich gezeigt wird, wie es geht? Ach so, war ja da.

Ich kann natürlich gerne das Internet für dich nochmal abtippen …

Dein Niveau ist inzwischen so hoch, dass kein Anfänger mehr mitkommt!

Einem Link zu folgen sollte das Niveau von Anfängern nicht übersteigen.

LLAP 🖖