Beiträge von Sempervivum

PS: Ich komme doch immer wieder mit Vanilla-JS und jQuery durcheinander Die Zeile für das Positionieren muss so aussehen:

$('#img-kran').css('left', data.posKran + 'px');

Das zweite Javascript macht nicht so wirklich Sinn. Dies:

{"x": 124, "y": 248}

muss vom Server zurück gegeben werden.

Wenn ich mir das erste Skript ansehe, sieht das aber schon recht viel versprechend aus. Es gibt offenbar eine Info data.posKran die die Position des Krans angibt. Allerdings scheint das nur ein Wert zu sein, während Du früher von x und y geschrieben hast. Wie verhält es sich damit?

Als ersten Ansatz für eine Animation versuche dieses:

    <img id="img-kran" src="{{ url_for('static', filename='Flasche.png') }}" width="120" height="120" style="position:absolute;"/>
    <script type="text/javascript">
        var intervalID = setInterval(update_values,1000);
        function update_values() {
            $.getJSON($SCRIPT_ROOT + '/stuff4',
                function(data) {
                    $('#zeit_PLC').text(data.zeit_PLC);
                    $('#posKran').text(data.posKran); 
                    $('#posKatze').text(data.posKatze); 
                    $('#posHaHu').text(data.posHaHu); 
                    $('#posHiHu').text(data.posHiHu);
                    $('#img-kran').style.left = data.posKran + 'px';                                      
                });
        };
    </script>

Dann müsste sich das Bild eigentlich schon bewegen. Wenn nicht, wirf einen Blick in die Console, ob Fehlermeldungen zu sehen sind.

Zitat

die Navi bar mittig auf max 1600px breite

Wenn Du das Fenster breiter ziehst, so dass das Display auf Desktop umschaltet, wirst Du feststellen, dass dieses CSS genau das tut.

Da fällt sofort auf, dass in dem zweiten Bild nur eine Anfrage zu sehen ist. D. h. userFiles.php wird gar nicht abgerufen. Ich habe auch eine Vermutung warum: Im Success-Callback fragst Du ja auf den Inhalt der Antwort ab:

                   $.ajax({  
                        type: "POST", 
                        url: "includes/deleteFile.php",   
                        data: {del_id:del_id},
                        success: function(data) {
                            if(data) {
                                $("#refreshData").load("userFiles.php?user=" + benutzerID + " #refreshData");
                            }
                        }
                    });

Jetzt ist deleteFolder.php doch interessant, denn dort erkennt man, dass überhaupt nichts ausgegeben wird.

Lass einfach die Abfrage weg und hole die Refresh-Daten unbedingt:

                    $.ajax({  
                        type: "POST", 
                        url: "includes/deleteFile.php",   
                        data: {del_id:del_id},
                        success: function(data) {
                            // if(data) {
                                // Die Refresh-Daten müssen wir in jedem Fall holen
                                $("#refreshData").load("userFiles.php?user=" + benutzerID + " #refreshData");
                            // }
                        }
                    });

Zitat

Mir wurde mal gesagt, dass wenn der Status 200 eintritt, er wohl im Success Teil ist. Habe mal nachgeschaut. Also in dem Status 200 ist er.

Ja, Status 200 sagt, dass die Anfrage an den Server erfolgreich war. Sie sagt jedoch nichts darüber aus ob der Inhalt der Antwort sinnvoll ist oder nicht. Die Antwort kannst Du dir im Netzwerk-Tab der Entwicklerwerkzeuge ansehen und prüfen ob das drin steht was Du brauchst.

Wichtiger als deleteFolder.php wäre der Code von userFiles.php denn dadurch wird ja die Anzeige aufgefrischt. Insofern ist bei den Antworten vom Server auch nur die auf das jQuery-load interessant.

Bei mir in Opera funktioniert der Debugger einwandfrei. Sehr sporadisch habe ich das Problem, dass er sich irgend wie verklemmt und ich muss dann den Tab schließen und die Seite neu öffnen oder sogar den Browser neu starten. Aber bei dir scheint ja das Problem dauerhaft zu bestehen.

Zitat

Diese verschachtelten Event-Handler finde ich jetzt persönlich eher unschön, aber das ist sicher Geschmackssache.

Das ist allerdings Ansichtssache, an anderer Stelle wurde dieses Verfahren mit dem Eventbubbling als "ultima ratio" und "best practice" propagiert Gerade wenn es um dynamisch hinzu gefügte Elemente geht, finde ich diesen Weg sehr elegant und man vermeidet damit alle Probleme, die sonst damit verbunden sein können.

Ich habe das mal so gestaltet wie ich vermute, dass Du, Dekiblago es dir vorstellst und wie ich es in #15 beschrieben habe: Die Nav füllt die gesamte Breite aus und innerhalb sind die Elemente zentriert. Sieht dann so aus:

https://jsfiddle.net/Sempervivum/zhypLbgu/2/

Prüfe, ob das deinen Vorstellungen entspricht.

Zitat

Und 2500px breite ist heute Standard für Monitore

Dann bin ich ja ein Dinosaurier, denn ich habe nur einen FullHD-Monitor und bin glücklich damit Und normaler Weise habe ich meinen Browser auch nicht im Vollbild.

Die Inhalte der Timervariablen werden Javascript-intern geführt, die muss man nicht verstehen. Du brauchst sie jedoch, um einen laufenden Timer abbrechen zu können, siehe #29

if (timer) {
    clearTimeout(timer);
}

Hier das Javascript mit Kommentaren:

    function myTimeout1() {
            document.getElementById('lastwords').style.display = 'inline-block';
        }
        function myTimeout2() {
            document.getElementById('lastwords').classList.add('morecolor');
            document.getElementById('questionAnswers').classList.add('lesscolor');
        }
        function myTimeout3() {
            document.getElementById('clicker').innerHTML = again;
        }
        function myTimeout4() {
            document.getElementById('clicker').style.backgroundColor = 'none';
            document.getElementById('clicker').classList.add('blink');
        }

        const sequence = [
            {
                // Die Zeit, um die der Aufruf der Funktion (callback)
                // verzögert werden soll:
                delay: 50,
                // Die Funktion, die aufgerufen werden soll:
                callback: myTimeout1
            },
            { delay: 500, callback: myTimeout2 },
            { delay: 3000, callback: myTimeout3 },
            { delay: 1500, callback: myTimeout4 },
        ];

        // Bearbeitet jeweils einen Eintrag im Array sequence:
        function doIt() {
            // Die aktuelle Aktion wird nach der gewünschten Verzögerung ausgeführt:
            timer = setTimeout(() => {
                // Die Funktion aufrufen, die im aktuellen Datensatz in dem Array
                // sequence als callback eingetragen ist, z. B. myTimeout2
                // beim zweiten Datensatz:
                sequence[idx].callback();
                // Index für das Array sequence erhöhen:
                idx++;
                // Sind wir noch nicht am Ende des Arrays sequence angelangt?
                if (idx < sequence.length) {
                    // Den aktuellen Eintrag im Array (nach Erhöhen des Index)
                    // bearbeiten:
                    doIt();
                }
            }, sequence[idx].delay)
            // Der zweite Parameter beim Aufruf der Funktion setTimeout ist die Verzögerungszeit.
            // Diese ist im Array sequence unter delay eingetragen, z. B. 500 
            // beim zweiten Datensatz.
        }
        let
            // Wir beginnen mit dem ersten Datensatz in sequence,
            // also den Index auf 0 setzen:
            idx = 0,
            // Timervariable, hier wird die ID des aktuellen Timers
            // gespeichert, wir brauchen sie, um den Timer abbrechen zu können:
            timer;
        // Jetzt beginnen wir die Sequenz durch den Aufruf der Funktion doIt:
        doIt();

Im Moment habe ich mehrere Aktivitäten laufen, daher habe ich meinen Grundsatz, das was ich poste auch zu erklären, leider zunächst vernachlässigt.

Zitat

Die gesamte Funktion "doIt" ist mir derzeit noch ein Rätsel, ich begreife beim besten Willen nicht, was sie tut

Ich werde ein paar Kommentare hinein schreiben, damit es verständlich wird.

Zitat

Ich dachte, ich könne den Abbruch der verzögerten Funktionen einfach auf den nächsten Mausklick legen, aber das scheint nicht richtig zu sein ...

Doch, das ist schon richtig. Du hast ja die ID des jeweiligen Timers in der Variablen timer . Dann brauchst Du nur clearInterval aufzurufen, um den Timer zu stoppen:

if (timer) {
    clearTimeout(timer);
}

Und das kannst Du innerhalb des Eventlisteners für den Klicker tun.

Am besten erst Mal den überflüssigen Container .navback löschen, dann gibt es kein Rätselraten, wo man überall welche Eigenschaft setzen muss. Und dann die äußeren Container mit stretch versehen bzw. align-items weg lassen aber für den inneren center verwenden, damit die Inhalte zentriert werden.

Auf das Problem mit den Timern hatte ich jetzt gar nicht das Augenmerk gerichtet, sondern wollte nur eine Alternative zu der Endphase vorschlagen. Die Timer-ID steht dort in der Variablen timer und damit kannst Du das setTimeout, das jeweils aktiv ist, abbrechen.

Zitat

mir ist bloß wichtig die Navi bar, warum die sich zusammen zieht und nicht auf 1600px breite bleibt und erst beim geringeren des Fenster zusammen zieht

Das ist genau das, was man normaler Weise will, wenn man Flexlayout verwendet. Sie zieht sich zusammen, weil Du align-items: center; für Body und .navback verwendet hast. In dem Fall wird sie nicht breiter als die Inhalte darin es erfordern. Nimmst Du statt dessen stretch, werden die Elemente die ganze Breite ausfüllen.

Zitat

in jedem Fall gilt doch: je kürzer, desto besser.

Da stimme ich nur bedingt zu: Abgesehen von Variablen wie i und skurrilen Wettbewerben namens "Codegolfing" ziehe ich Klarheit und Lesbarkeit der Kürze vor, auch wenn es um sprechende Variablennamen geht. Also, wie anfangs vorgeschlagen, eine Status-Variable mit den Werten "zeigeFrage" und "zeigeAntwort" oder wenn man ein boolean nimmt, einen Namen, der angibt, was drin steht, z. B. let zeigeAntwort = false; Ist diese false gilt dann "zeigeFrage".

Was Klarheit und Lesbarkeit betrifft, ist deine Lösung, Failix aus #17 IMO im Vorteil, weil man sehr schnell erkennt, was Du vor hast. Will man die Timer stoppen, sehe ich jedoch den Nachteil, dass es gleich 4 Timervariablen gibt. Als Alternative zu setInterval und einer Statuskennung möchte ich eine Lösung vorschlagen, die, wie die Fragen und Antworten, auf einem Array basiert:

        const sequence = [
            { delay: 50, callback: myTimeout1 },
            { delay: 500, callback: myTimeout2 },
            { delay: 3000, callback: myTimeout3 },
            { delay: 1500, callback: myTimeout4 },
        ];

        function doIt() {
            timer = setTimeout(() => {
                sequence[idx].callback();
                idx++;
                if (idx < sequence.length) {
                    doIt();
                }
            }, sequence[idx].delay)
        }
        let idx = 0,
            timer;
        doIt();

(ungetestet)

Zitat

In Javascript ist Sempervivum der Profi hier.

Wäre mal schön zu wissen, was er sagt, wie er das machen würde.

An sich gern aber im Moment zu viele andere Dinge zu tun.

Wünsche ebenfalls ein schönes Wochenende!

OK, dann brauchst Du eine Webseite, die nur den Wert dieser Variablen ausgibt und sonst nichts. Da Du schreibst X und Y würde sich die Kodierung in JSON anbieten, d. h. Du müsstest dies ausgeben:

{"x": 124, "y": 248}

Holen dann über Ajax, z. B. mit fetch:

        fetch('position.json',).then(res => {
            return res.json();
        }).then(res => {
            console.log(res);
            // Jetzt stehen x und y in dekodierter Form
            // im Parameter res zur Verfuegung:
            console.log(res.x);
            console.log(res.y);            
        });

Guten Morgen Knausbaer, Flask/Python ist ja serverseitig. Ich verstehe dich jetzt so, dass diese Variable sich im Betrieb ändert und Du die Position auf Grund der Variablen laufend neu festlegen willst. In dem Fall müsstest Du die Variable mit Ajax immer neu vom Server holen.

Edit: Oder gibt die Variable den Endwert an, wohin der Kreis verschoben werden soll?