Beiträge von Sempervivum

Sempervivum · 14. Februar 2020

Das komplette Einfärben der Zellen passiert jetzt auch, wenn man irgend wo auf der Seite klickt. Wahrscheinlich sieht man es gar nicht, weil ja genau so eingefärbt wird, wie es schon war, aber ist unsauber.

Sempervivum · 14. Februar 2020

Ja, wie ich vermutet hatte, jetzt werden die Tabellen auch gefärbt, wenn man irgend wo im Fenster klickt.

Versuche dies:

Code

    <script type="text/javascript">

        window.addEventListener('load', function () {
            changeColors();
            var nextButton = document.querySelectorAll('.dataTables_wrapper.no-footer .paginate_button.next');
            for (var j = 0; j < nextButton.length; j++) {
                nextButton[j].addEventListener('click', changeColors);
            }
        });
        function changeColors() {

            var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');

            for (var i = 0; i < tds.length; i++) {

                if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';

                else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';

                else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';

                else if (tds[i].innerText === 'Total') {

                    tds[i].parentElement.style.fontWeight = 'bold';

                    tds[i].parentElement.style.backgroundColor = '#AFDBF1';

                }

            }

            // die folgende Anweisung deaktivieren:

            // nextButton = document.querySelector('.dataTables_wrapper.no-footer .paginate_button.next');

            // die folgende Anweisung hinzu fuegen:
            if (this != Window) this.addEventListener('click', changeColors);
        }
    </script>

Alles anzeigen

Sempervivum · 14. Februar 2020

Super, freut mich, dass das funktioniert! Da ist aber noch etwas unsauber, wahrscheinlich wird jetzt ein Eventlistener auch für das Window-Objekt registriert und das könnte unerwünschte Nebeneffekte haben. Moment, ich untersuche das ...

Sempervivum · 14. Februar 2020

Versuche dies (leider kann ich es nicht testen, weil mir die ganze Umgebung fehlt):

Code

<script type="text/javascript">

        window.addEventListener('load', function () {
            changeColors();
            var nextButton = document.querySelectorAll('.dataTables_wrapper.no-footer .paginate_button.next');
            for (var j = 0; j < nextButton.length; j++) {
                nextButton[j].addEventListener('click', changeColors);
            }
        });
        function changeColors() {

            var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');

            for (var i = 0; i < tds.length; i++) {

                if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';

                else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';

                else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';

                else if (tds[i].innerText === 'Total') {

                    tds[i].parentElement.style.fontWeight = 'bold';

                    tds[i].parentElement.style.backgroundColor = '#AFDBF1';

                }

            }

            // die folgende Anweisung deaktivieren:

            // nextButton = document.querySelector('.dataTables_wrapper.no-footer .paginate_button.next');

            // die folgende Anweisung hinzu fuegen:
            this.addEventListener('click', changeColors);
        }
    </script>

Alles anzeigen

Sempervivum · 14. Februar 2020

OK, wenn das so funktioniert, müssen wir das jetzt auf alle Tabellen anwenden. Moment ...

Sempervivum · 14. Februar 2020

Ja, ich habe mich jetzt erst Mal auf die Tabelle 5 konzentriert und die ID verwendet. Du hast jedoch einen Fehler gemacht: Die neue Zeile muss oberhalb der schließenden Klammer stehen. Sie dir genau den Code in Posting #13 an.

Aber zur Klärung: Betrifft das Problem alle Tabellen?

Sempervivum · 14. Februar 2020

Jetzt füge eine Zeile ganz am Schluss ein, entspr. Kommentar

Code

<script type="text/javascript">

        window.addEventListener('load', function () {
            changeColors();
            var nextButton = document.querySelectorAll('.dataTables_wrapper.no-footer .paginate_button.next');
            for (var j = 0; j < nextButton.length; j++) {
                nextButton[j].addEventListener('click', function () {
                    changeColors();
                });
            }
        });
        function changeColors() {

            var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');

            for (var i = 0; i < tds.length; i++) {

                if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';

                else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';

                else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';

                else if (tds[i].innerText === 'Total') {

                    tds[i].parentElement.style.fontWeight = 'bold';

                    tds[i].parentElement.style.backgroundColor = '#AFDBF1';

                }

            }

            // die folgende Anweisung deaktivieren:

            // nextButton = document.querySelector('.dataTables_wrapper.no-footer .paginate_button.next');

            // die folgende Anweisung hinzu fuegen:
            document.getElementById('DataTables_Table_5_next').addEventListener('click', changeColors);

        }
    </script>

Alles anzeigen

Sempervivum · 14. Februar 2020

So geht es wieder. Moment, ich sehe weiter hinein ...

Sempervivum · 14. Februar 2020

Du musst das Javascript darüber beibehalten:

Code

<script type="text/javascript">
    window.addEventListener('load', function() {
        changeColors();
        var nextButton = document.querySelectorAll('.dataTables_wrapper.no-footer .paginate_button.next');
        for(var j = 0; j<nextButton.length; j++) {
            nextButton[j].addEventListener('click', function () {
                changeColors();
            });
        }
    });
function changeColors() {
    var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');
    for (var i = 0; i < tds.length; i++) {
        if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';
        else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';
        else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';
        else if (tds[i].innerText === 'Total') {
            tds[i].parentElement.style.fontWeight= 'bold';
            tds[i].parentElement.style.backgroundColor = '#AFDBF1';
        }
    }
    // die folgende Zeile auskommentieren:
    //nextButton = document.querySelector('.dataTables_wrapper.no-footer .paginate_button.next');
}
</script>

Alles anzeigen

Sempervivum · 14. Februar 2020

Versuche folgendes:

Code

function changeColors() {
    var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');
    for (var i = 0; i < tds.length; i++) {
        if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';
        else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';
        else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';
        else if (tds[i].innerText === 'Total') {
            tds[i].parentElement.style.fontWeight= 'bold';
            tds[i].parentElement.style.backgroundColor = '#AFDBF1';
        }
    }
    // die folgende Anweisung deaktivieren:
    // nextButton = document.querySelector('.dataTables_wrapper.no-footer .paginate_button.next');
}

Alles anzeigen

Sempervivum · 14. Februar 2020

Wenn Du es nicht weißt, ist das alles vorgefertigt für eine Seite über Handball?

Sempervivum · 14. Februar 2020

Und wo kommen die Daten her? Die Vermutung liegt nahe, dass sie von einer API geholt werden und dass diese asynchron arbeitet, d. h. wenn Du next drückst, wird eine Anfrage an den Server geschickt. Weil dies einen kurzen Moment dauert, ist das Einfärben schon vorbei. Aber nur eine Vermutung.

Sempervivum · 14. Februar 2020

Beschreibe doch Mal, wie Du diese Tabellen erzeugst.

Sempervivum · 14. Februar 2020

Informiere dich erst Mal, wie man CSS einbindet, z. B. hier:

https://www.html-seminar.de/st…ets_in_html_einbinden.htm

Sempervivum · 14. Februar 2020

Fangen wir mit dem einfachen an, einem Bild. Da gibt es zwei Möglichkeiten:

1. Das Bild mit CSS als Hintergrund für den Container einstellen. Dann gibt es bei CSS ein background-size: cover; das den Browser anweist, das Bild so einzurichten, wie Du es oben beschrieben hast.

2. Das Bild allein zu verwenden. Dann gibt es bei CSS ein object-fit: cover; , das das Bild ebenfalls so einrichtet.

Um den Container bzw. das Bild so einzustellen, dass es das Browserfenster ausfüllt, wirst Du Viewport-Units brauchen.

Sempervivum · 14. Februar 2020

Ich habe da mal ein Fiddle gemacht, das die wesentlichen Effekte demonstriert:

https://jsfiddle.net/Sempervivum/zn0sp6mw/36/

In die Darstellung der Icons mit Fontawesome, Flaticon o. ä. bin ich dabei nicht eingestiegen.

Sempervivum · 13. Februar 2020

Ich konnte den Fehler reproduzieren. Es ist so, dass dein HTML nicht valide ist:

Zitat

Error: Start tag form seen in table.

From line 18, column 17; to line 19, column 36

</thead>↩ <form id='list' name='list'>↩

Error: Element form not allowed as child of element table in this context. (Suppressing further errors from this subtree.)

From line 18, column 17; to line 19, column 36

</thead>↩ <form id='list' name='list'>↩

Alles anzeigen

D. h. ein Formular in einer Tabelle ist nicht zulässig. Wohl aber der umgekehrte Fall: Wenn ich das HTML so ändere, funktioniert alles:

Code

<form id='list' name='list'>
        <table>
            <thead>
                <tr>
                    <th>Spalte 1</th>
                    <th>Spalte 2</th>
                    <th>Spalte 3</th>
                </tr>
            </thead>
            <tbody id='list-content'> //Hier wird der Inhalt neu rein geladen
                <tr>
                    <td><input type='checkbox' name='raw[]' id='raw_1' value='x1' /></td>
                    <td>Inhalt 1</td>
                    <td>Inhalt 2</td>
                </tr>
                <tr>
                    <td><input type='checkbox' name='raw[]' id='raw_2' value='x2' /></td>
                    <td>Inhalt 3</td>
                    <td>Inhalt 4</td>
                </tr>
                <tr>
                    <td><input type='checkbox' name='raw[]' id='raw_3' value='x3' /></td>
                    <td>Inhalt 5</td>
                    <td>Inhalt 6</td>
                </tr>
            </tbody>
        </table>
    </form>

Alles anzeigen

Sempervivum · 12. Februar 2020

Wie wird das Versenden des Formulars denn überhaupt angestoßen? In dem Code, den Du gepostet hast, liegt es in einem document-ready?

Sempervivum · 11. Februar 2020

Ich sehe da einen Syntaxfehler in Zeile 7:

data: $(list).serialize()},

die schließende geschweifte Klammer gehört da nicht hin.

Sempervivum · 11. Februar 2020

Da war eine Lösung mit substr etc. aber ich habe mal selbst etwas ausgearbeitet:

Code

function mb_substr_replace($subject, $start, $length, $replace)
{
    $pattern = '(.{' . $start . '})(.{' . $length . '})';
    $replace = '\\1' . $replace;
    return mb_ereg_replace($pattern, $replace, $subject);
}
$subject = 'äöüßßüöäaaaaa';
$result = mb_substr_replace($subject, 5, 3, "xxxxx");
var_dump($result);
$subject2 = 'aaaaabbbccccc';
$result = mb_substr_replace($subject2, 5, 3, "yyyyy");
var_dump($result);

Alles anzeigen

Beiträge von Sempervivum

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Element zoomen auf Bildschirm Höhe/Breite ohne Verzerren für alle BildschirmTypen.

Element zoomen auf Bildschirm Höhe/Breite ohne Verzerren für alle BildschirmTypen.

Link Icon über Image bei Hover

Nachgeladenes Formular per Jquery ajax senden

Nachgeladenes Formular per Jquery ajax senden

Nachgeladenes Formular per Jquery ajax senden

substr_replace - deutsche Umlaute werden falsch dargestellt