Beiträge von Sempervivum

Sempervivum

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

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

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

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

Sempervivum

Ich sehe da einen Syntaxfehler in Zeile 7:

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

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

Sempervivum

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

Sempervivum

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/

Sempervivum

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

Sempervivum

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.

Sempervivum

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.

Sempervivum

Klappt's denn jetzt mit den Umlauten?

Sempervivum

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

Sempervivum

Ändere den Beginn deines HTML so:

HTML

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

Sempervivum

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.

Sempervivum

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

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

Sempervivum

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

Code

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

Code

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

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

Sempervivum

PS: Vielleicht ist es so hübscher:

Code

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

Code

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

            90% {
                transform: scale(1.3);
            }

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

Alles anzeigen

Sempervivum

Versuche, im Ausgangszustand den Text schon unsichtbar zu machen:

Code

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

Sempervivum

Ja, das ist möglich und zwar indem Du das Event-Bubbling durch Aufruf der Funktion stopPropation() für das #edge5 unterbindest:

Code

        var inside = document.getElementById("edge5");
        inside.addEventListener("mousemove", event => {
            event.stopPropagation();
        });

Sempervivum

In dem Fall dürfte dir animation-delay weiterhelfen:

https://wiki.selfhtml.org/wiki/CSS/Eigen…animation-delay

damit kannst Du die einzelnen Animationen verzögern, so dass sich der richtige Ablauf einstellt.

Beiträge von Sempervivum

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

Div mit einer versetzten unordered list

[GELÖST] Modal-Fenster lässt sich nicht schliessen

[GELÖST] Modal-Fenster lässt sich nicht schliessen

Statt Grafik wird nur Code angezeigt

Statt Grafik wird nur Code angezeigt

Statt Grafik wird nur Code angezeigt

Statt Grafik wird nur Code angezeigt

Warum Getter und Setter verwenden

Statt Grafik wird nur Code angezeigt

Animation soll am Endpunkt stehen bleiben

Animation soll am Endpunkt stehen bleiben

Animation soll am Endpunkt stehen bleiben

Javascript event nur auf überliegendem Element ausführen

Animation soll am Endpunkt stehen bleiben