Beiträge von Sempervivum

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.

Beschreibe doch Mal, wie Du diese Tabellen erzeugst.

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

https://www.html-seminar.de/stylesheets_in_html_einbinden.htm

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.

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.

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

Zitat

1. Error: Start tag form seen in table.

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

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

2. 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:

<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>

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

Ich sehe da einen Syntaxfehler in Zeile 7:

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

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

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

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);

Auf solche Probleme wird auch bei Selfhtml hingewiesen:

https://wiki.selfhtml.org/wiki/CSS/Eigen…ist-style-image

Lösung mit Hintergrundgrafik, wie dort empfohlen:

https://jsfiddle.net/Sempervivum/5hks9zpd/13/

Mir schein, da fehlt jetzt das Bootstrap-JS. Ohne das wird das Modal nicht funktionieren.

Wenn ich das Javascript ganz unten, Zeilen 187 bis 193 heraus nehme, funktioniert alles wie gewünscht. Ich denke, den IE10 brauchen wir wirklich nicht mehr zu berücksichtigen.

Gestern war ich zufällig auch in der Situation, auf meinem Android-Handy ganz schnell einen FTP-Client zu brauchen. Ich habe mich dann auf Grund der Bewertungen für Admin Hands entschieden und dieser hat einwandfrei funktioniert.

Klappt's denn jetzt mit den Umlauten?

Eher nicht, das zweite meta-Tag mit charset=iso8859-1 löschen. Ich erwarte, dass es das erste mit utf-8 überschreibt.

Ändere den Beginn deines HTML so:

<!DOCTYPE HTML>
<html>
<head>
<title>www.homepage-vorlagen-webdesign.de/homepagevorlagen Homepagevorlage Nr. 12 Orange juice</title>
<meta charset="utf-8">

Siehe auch:

https://wiki.selfhtml.org/wiki/HTML/Kopf…eichencodierung

Und dann die Datei als UTF-8 speichern. Wie das mit deinem Editor geht, musst Du selbst heraus finden. I. allg. kann man es im Speichern-Unter-Dialog einstellen.

Geht mir genau so. Sofern es sich um das reine Setzen und Auslesen einer Variablen handelt, kann ich keinen Nutzen erkennen. Anders sieht es aus, wenn zwingend mit dem Setzen der Variablen weitere Aktionen verbunden sein müssen, z. B. Variable abc setzen erfordert gleichzeitig Aktion x und Aktion y. Dann ist ein Setter durchaus sinnvoll.

Google findet zu dieser Fehlermeldung einiges, z. B. dies:

https://forum.bplaced.net/t/die-gewuensc…terhelfen/35798

PPS: Etwas eleganter kann man diesen Überschwinger mit einer geeigneten Timing-Function realisieren:

        p.slogan {
            text-align: center;
            z-index: 800;
            animation: text 2s;
            animation-fill-mode: forwards;
            animation-delay: 5s;
            animation-timing-function: cubic-bezier(.17, .67, .72, 1.32);
            font-size: 100%;
            transform: scale(0);
        }

        @keyframes text {
            0% {
                transform: scale(0);
            }

            100% {
                transform: scale(1.2);
            }
        }

PS: Vielleicht ist es so hübscher:

        p.slogan {
            text-align: center;
            z-index: 800;
            animation: text 2s;
            animation-fill-mode: forwards;
            animation-delay: 5s;
            font-size: 100%;
            transform: scale(0);
        }

        @keyframes text {
            0% {
                transform: scale(0);
            }

            90% {
                transform: scale(1.3);
            }

            100% {
                transform: scale(1.2);
            }
        }