Beiträge von Sempervivum

Das Problem hatte ich auch und es lag bei mir daran, dass die Index-Variablen anderweitig verwendet und verändert wurden. Versuche, es so zu kapseln:

        var counter = 2;
        var whichBloons = [1, 2];
        var bloonCounter = [5, 3];
        var timeLapse = [0, 1];
        var intv = 3000;
        (function () {

            var idx1 = 0, idx2 = 0;
            function startCreate() {
                var idx2 = 0;
                setTimeout(function () {
                    // hier den ersten Bloon entspr. idx1 erzeugen
                    console.log("create bloon " + whichBloons[idx1] + " " + Date.now());
                    idx2++;
                    var timer = setInterval(function () {
                        // hier den naechsten  Bloon entspr. idx1 erzeugen
                        console.log("create bloon " + whichBloons[idx1] + " " + Date.now());
                        idx2++;
                        if (idx2 == bloonCounter[idx1]) {
                            clearInterval(timer);
                            idx1++;
                            if (idx1 < counter) startCreate()
                            else console.log("finished, next level");
                        }
                    }, intv);
                }, timeLapse[idx1] * 1000);
            }
            startCreate();
        })();

Doch, der ändert sich in Zeile 20. Ich habe dein Vorhaben so verstanden:

idx1 = 0:

0 Sek. warten

5-mal bloom 1 erzeugen, aber nicht direkt hintereinander, sondern mit einem Intervall von 3 Sek (intv)

idx1 = 1:

1 Sek. warten

3-mal bloom 2 erzeugen, aber nicht direkt hintereinander, sondern mit einem Intervall von 3 Sek (intv)

(mit den (willkürlichen) Beispielwerten aus meinem Code)

Prüfe mal, ob ich das richtig verstanden habe und dies das tut, war Du dir vorstellst:

    <script>
        var counter = 2;
        var whichBloons = [1, 2];
        var bloonCounter = [5, 3];
        var timeLapse = [0, 1];
        var intv = 3000;
        var idx1 = 0, idx2 = 0;
        function startCreate() {
            var idx2 = 0;
            setTimeout(function () {
                // hier den ersten Bloon entspr. idx1 erzeugen
                console.log("create bloon " + whichBloons[idx1]);
                idx2++;
                var timer = setInterval(function () {
                    // hier den naechsten  Bloon entspr. idx1 erzeugen
                    console.log("create bloon " + whichBloons[idx1]);
                    idx2++;
                    if (idx2 == bloonCounter[idx1]) {
                        clearInterval(timer);
                        idx1++;
                        if (idx1 < counter) startCreate()
                        else console.log("finished, next level");
                    }
                }, intv);
            }, timeLapse[idx1] * 1000);
        }
        startCreate();
    </script>

Das ist auf jeden Fall mit CSS zu realisieren. Informiere dich über Flexlayout:

https://www.html-seminar.de/css-flexbox.htm

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

und Mediaqueries:

https://wiki.selfhtml.org/wiki/CSS/Tutor…g/Media_Queries

Schön, dass Du eine Lösung gefunden hast. Wie so oft gibt es aber auch eine vorgefertigte Funktion, die das tut:
https://wiki.selfhtml.org/wiki/JavaScrip…/Number/toFixed

Selber verwende ich Swiper:

idangero.us/swiper/

Dieses sollte dem entsprechen, was Du suchst:

https://idangero.us/swiper/demos/110-slides-per-view.html

wenn Du die Autoplay-Option hinzu fügst:

https://idangero.us/swiper/api/#autoplay

Das gehört schon zu deinem Problem, denn dieses:

$testarr[0]['abcd'[1]]

entspricht genau diesem:

$_liste[$filename]['bildabmessungen'[0]]

und dieses ist die Lösung:

$testarr[0]['abcd'][1]

Du brauchst es nur auf deinen Code zu übertragen:

$_liste[$filename]['bildabmessungen'][0]

Versuch macht kluch: Man teste z. B. dies:

    $testarr = [['abcd'=>[1, 2], ['xyz'=>[1, 2]]]];
    var_dump($testarr[0]['abcd'][1]);
    var_dump($testarr[0]['abcd'[1]]);
    var_dump('abcd'[2]);

liefert diese Ausgabe:
html-seminar.de/woltlab/attachment/1699/

Was mich betrifft, so habe ich diesen Thread gelesen, aber es war mir zu umfangreich, um dort einzusteigen. Hast Du die Fehleranzeige eingeschaltet? Was heißt genau "funktioniert nicht"?

Zitat

in dem man sich nur den neuesten Eintrag holt

Ich bin von dieser Aussage des TO ausgegangen:

Zitat

wo ich die Werte zusätzlich brauche und eben auch diesen einen "Live-Wert".

Verstehe ich so, dass er alle Einträge auf Clientseite braucht.

Um auf deine ursprüngliche Frage zurück zu kommen:

Zitat

Diese Tabelle wird dann mithilfe von json.encode an das HTML-file übergeben wo ich die Werte zusätzlich brauche und eben auch diesen einen "Live-Wert".

Das ist in wenigen Zeilen zu machen:

echo '<script> var data = ' . json_encode($data) . ';<script>;
mysql_close($con);
?>
<script>
// array nach Zeitstempel sortieren
data.sort(function (l,u) {
    return l.[0] - u[o];
});
// jetzt steht der neueste Eintrag an erster Stelle
var latestVoltage = data[0][1];
</script>

(ungetestet, da ich das ganze Umfeld mit der DB nicht habe.)

Wenn dieser Livewert zyklisch aktualisiert werden soll, holst Du ihn am besten mit Ajax, wie von Arne beschrieben.

Also mir geht es so, dass ich das Ganze nicht verstehe. Diese Funktion getTable steht da ohne den Zusammenhang, wo sie aufgerufen wird und was das für Parameter sind. Keine Ahnung, was ein Payload ist. Und das ganze wäre einfacher zu lesen, wenn Du statt des PHP das generierte HTML und JS posten würdest, denn offenbar liegt das Problem ja auf Javascript-Seite.

Kann ich mit Chrome nicht reproduzieren. Hast Du das Problem inzwischen gelöst?

Geht nicht gibt's nicht:

https://stackoverflow.com/questions/6366…ts-by-classname

Allerdings wird das Ganze dann so kryptisch, dass man bzgl. Lesbarkeit kaum noch einen Vorteil gegenüber Regex hat.

Schau mal, ob dir diese Funktion hilft:

        function formatStr(val) {
            var newstr = "00" + val;
            return (newstr.substr(newstr.length - 2));
        }

Ich bin zwar mit Joomla-Modulen nicht vertraut aber bei Javascript/jQuery-Bibliothen/Plugins gibt es häufig eine Vielzahl von Optionen, mit denen man alles erdenkliche steuern und konfigurieren kann. Hast Du bei deinem Modul genau nachgesehen, ob es etwas derartiges gibt?

Oder gib den Imagewrappern pointer-events:none:

        .imgwrapper {
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 600px;
            transform-origin: center center;
        }

Ich denke, jetzt verstehe ich: Die Container der kleinen Bilder liegen ja über dem Centerimg und überdecken es. Verschiebe das a-tag mit dem Centerimg an das Ende, hinter die Divs.

Du brauchst nur das a-Tag um das centerimg herum zu legen, dann sollte es funktionieren. Wichtig ist, dass diese Bild die ID centerimg hat:

<a data-toggle="modal" data-target="#step1"><img src="images/centerimg.png" id="centerimg"></a>

Zitat

wie genau fügt man den in die Javascript Version weitere bilder ein?

Die Anzahl der Bilder kannst du mit der Variablen nrimg einstellen. Alles andere wird dann automatisch berechnet. Aber ich schrieb ja oben schon, dass Du wahrscheinlich verschiedene Bilder haben willst, Dann musst Du diese in einem Array ablegen und in der for-Schleife in das HTML eintragen. Ich wollte dir ja auch noch etwas zu tun lassen ;D

Zitat

Und ist es möglich den abstand der kleinen bilder zum großen zu verkleinern oder ist das durch die Bildgröße vorgegeben?

Ja, der Abstand wird durch die Größe der beiden Container festgelegt:

        #rotwrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: lightblue;
            width: 600px;
            height: 600px;
            position: relative;
        }

und

        .imgwrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 600px;
            transform-origin: center center;
        }

Wenn Du width und height verkleinerst, rücken die kleinen Bilder näher an das zentrale.

Und diese musst Du anpassen:

        #rotwrapper .imgwrapper img {
            width: 74px;
            height: 74px;
            position: absolute;
            top: 0;
            left: 263px;
        }

und zwar left, so dass das Bild genau in der Mitte ist. Hier: 600px/2 - 74px/2