Beiträge von Sempervivum

Sempervivum

Das kannst Du relativ leicht erreichen, indem Du nach dem Erzeugen der neuen Bilderreihe einen Klick auf das erste Bild simulierst durch Aufruf der Funktion click():

Code

            function createHeroes(heroes, heroeslist, name) {  // Create, chain Img

                const htmlFragment = document.createDocumentFragment();
                x = 0;
                y = 0;

                for (let i = 0; i < heroes; i++) {
                    const image = document.createElement('section');
                    image.classList.add('hero_img', 'class_' + name);
                    image.id = heroeslist[i];
                    htmlFragment.appendChild(image);
                    image.style.backgroundPosition = x + '% ' + y + '%';
                    statusAvatar(image, x, y, name);
                    console.log(image);
                    moveAxis(x, y);
                }
                htmlFragment.querySelector('.hero_img').click();
                bgHeroes.appendChild(htmlFragment);
            }

Alles anzeigen

BTW: Als ich den Code in meinen Editor übertragen habe, hat dieser beanstandet, dass am Ende des HTML zwei schließende </div> fehlen.

Sempervivum

Vermutlich ist es einfacher, das Layout des Formulars von kontaktformular.com so zu gestalten wie das in deinem Eingangsposting als das PHP für letzteres neu einzurichten.

Sempervivum

Mal sehen, ob ich das richtig verstehe: Drückt man oben einen kreisförmigen Kreis, wird ein Satz von Bildern in die Zeile in der Mitte geladen.

Im Moment erkennt man das nicht, weil bei allen Knöpfen die selben Bilder geladen werden. Dass sich etwas ändert, erkennt man aber daran, dass sich die Anzahl ändert.

Drückt man auf ein Bild in der mittleren Zeile, soll es in dem unteren Fenster mit der Beschreibung angezeigt werden.

Funktioniert soweit alles.

Das Problem ist jetzt: Du möchtest, dass jedes Mal, wenn man einen runden Knopf oben drückt, wieder das erste Bild in dem Fenster mit der Beschreibung angezeigt wird?

Sempervivum

Am besten auch informieren, wie man Dateien in HTML referenziert:

https://wiki.selfhtml.org/wiki/HTML/Tuto…nzieren_in_HTML

Sempervivum

Ja, bei mir sieht das auch so aus, die Rundung ist mehr elliptisch. Man kann sie rund bekommen mit clip-path:

clip-path: circle(200% at 50% -100%);

aber anscheinend ist die y-Position des Kreises der Prozentwert der Breite und nicht der Höhe, so dass man Probleme bekommt, das Ganze responsiv zu bekommen. Kein Problem ist es, wenn der Container entweder quadratisch ist oder eine feste Höhe hat.

Sempervivum

Bei mir sind beide Seiten gleich, allerdings sieht die Rundung ganz anders aus als auf deinem Screenshot. Hast Du Scollbars? Wenn ja, ist das möglicher Weise eine Täuschung und kann behoben werden, indem Du body ein margin: 0; gibst.

Sempervivum

Zitat

Anstelle von Fontawesome kann man auch ein eigenes png nehmen

Dann sind natürlich beide Möglichkeiten gangbar.

Sempervivum

Da gibt es im wesentlichen zwei Möglichkeiten, die jeweils verschiedene Vor- und Nachteile haben. Hier eine Demo:

https://jsfiddle.net/Sempervivum/k84scz1a/24/

PS: Mir ist noch eingefallen: Fraglich, ob es möglich ist, ein Fontawesome-Icon als Hintergrundbild zu setzen?

Sempervivum

Das ist dann leider nicht mehr so einfach. Ich habe da mal eine Lösung gebaut mit allen Bildern in einem Container. Die Umschaltung zwischen einer, zwei und drei Spalten geschieht dabei, indem man die Breite der Bilder setzt auf 100%, 50% und 33.33%. Großer Nachteil: Man muss die Höhe des Containers anpassen, damit die Bilder annähernd gleich auf die Spalten verteilt sind. Dadurch ist das Layout schwer zu erweitern und es wäre am besten, wenn man die optimale Höhe mit Javascript berechnen würde.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Galerie mit drei Spalen</title>
    <style>
        .col {
            display: flex;
            flex-direction: column;
        }

        .col img {
            width: 100%;
            height: auto;
        }

        @media (min-width: 600px) {
            .col {
                flex-wrap: wrap;
                max-height: 1600px;
            }

            .col img {
                width: 50%;
                height: auto;
            }
        }

        @media (min-width: 800px) {
            .col {
                max-height: 800px;
            }

            .col img {
                width: 33.33%;
            }
        }
    </style>
</head>

<body>
    <div class="col">
        <img src="images/dia0.jpg">
        <img src="images/dia1.jpg">
        <img src="images/dia2.jpg">
        <img src="images/busleft.png">
        <img src="images/dia3.jpg">
        <img src="images/dia4.jpg">
        <img src="images/01.png">
        <img src="images/02.png">
        <img src="images/03.png">
    </div>
</body>

</html>

Alles anzeigen

Sempervivum

Auch das ist einfach: Du kannst mit einer Mediaquery die Anordnung der Container auf "column" ändern:

Code

        @media (max-width: 600px) {
            body {
                flex-direction: column;
            }
        }

Sempervivum

Du kannst mit Flexlayout drei Spalten anlegen und die Bilder dort hinein tun:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Galerie mit drei Spalen</title>
    <style>
        body {
            display: flex;
        }

        .col {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .col img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="col">
        <img src="images/dia0.jpg">
        <img src="images/dia1.jpg">
        <img src="images/dia2.jpg">
    </div>
    <div class="col">
        <img src="images/busleft.png">
        <img src="images/dia3.jpg">
        <img src="images/dia4.jpg">
    </div>
    <div class="col">
        <img src="images/01.png">
        <img src="images/02.png">
        <img src="images/03.png">

    </div>

</body>


</html>

Alles anzeigen

Sempervivum

Genau, Du musst nur die Tabelle anlegen, d. h. entweder mit deinem SQL:

Code

CREATE TEMPORARY TABLE fre2 like fre;

oder ebenfalls mit phpmyadmin, dann die Daten einlesen und dann übertragen mit dem letzten Teil ab update.

Sempervivum

Doch, das sind dann zwei Schritte:

Zunächst mit der Importfunktion die Daten in die temp. Tabelle laden.

Dann mit SQL die Daten in die Zieltabelle übertragen.

Sempervivum

Dieses Problem würde sich nicht stellen, wenn Du die Importfunktion von phpmyadmin verwenden würdest, dann hast Du keine Probleme mit Rechten und Pfaden.

Sempervivum

Zitat

worauf bezieht sich das Pfad '/tmp/your_file.csv' bei LOAD DATA INFILE

Ist das das Verzeichnis auf meinem Computer oder ist das das Verzeichnis auf dem Apache-Server?

Das ist die Datei auf dem Server. Aber bei dem Verfahren, das ich selber beschrieben habe, ist das gar nicht relevant, weil Du dann die Datei manuell mit dem Filemanager auswählst. Wie ich oben schrieb:

Zitat

kannst die Import-Funktion von phpmyadmin verwenden, dann kannst Du sie auf deinem lokalen Dateisystem auswählen und sie wird automatisch hochgeladen und eingelesen.

Zitat

Außerdem können die Daten in meiner Tabelle nicht durch Kommas getrennt sein.

Du kannst jedes beliebige Zeichen als Trennzeichen verwenden, auch ; |` etc., Du musst dieses nur beim Export angeben. Wenn dieses Zeichen in deinem Text vorkommen sollte, kannst Du die Einträge in Hochkommas einschließen und das Trennzeichen ggf. escapen.

Wenn Du damit nicht zum Ziel kommst, dann poste mal ein paar Beispieleinträge, die das Problem demonstrieren.

Sempervivum

Ich habe es mal mit Testtabellen und -dateien durch gespielt und es hat problemlos funktioniert. Du brauchst die Datei mit den Daten nicht selber hochzuladen, sondern kannst die Import-Funktion von phpmyadmin verwenden, dann kannst Du sie auf deinem lokalen Dateisystem auswählen und sie wird automatisch hochgeladen und eingelesen.

Du schreibst zwar: "Ich will keine neue Tabelle in phpmyadmin hochladen" aber wenn man den Angaben bei Stackoverflow folgt, musst Du das tun, und zwar zunächst die Daten in eine temporäre Tabelle laden, dann daraus die Daten in die Zieltabelle einfügen. Die temp. Tabelle kannst Du dann wieder löschen.

Die einzelnen Schritte sehen so aus:

1. Spalte in der Zieltabelle auswählen, die sich als ID eignet, d. h. über die man einen Datensatz eindeutig identifizieren kann.

2. Temp. Tabelle erzeugen mit zwei Spalten: ID und Wert, der in die Zieltabelle eingefügt werden soll.

3. Mit phpmyadmin die neue Spalte in der Zieltabelle hinzu fügen.

4. Um sie leicht editieren und in phpmyadmin importieren zu können, die Datei mit den Daten am besten als CSV-Datei anlegen. Bei meinem Test sahen die Daten so aus:

Code

1,data1
2,data2
3,data3
4,data4
5,data5

5. Die temp. Tabelle in phpmyadmin auswählen und in der Werkzeugleiste oben auf "Importieren" klicken.

Format CSV auswählen, in "Spalten getrennt mit" das Komma stehen lassen, "Spalten eingeschlossen mit:" und "Spalten escaped mit" leer machen.

Dies ist der einfachste Fall. Wenn Deine Daten auch Kommas enthalten können, musst Du dies anpassen.

6. Import mit "OK" starten.

7. Wenn der Import erfolgreich war, die Daten mit SQL in die Zieltabelle eintragen:

SQL

UPDATE ZIELTABELLE D SET D.NEWCOL=(SELECT VALUE FROM TEMP WHERE ID=D.ID)

Wenn Du überprüft hast, dass die Daten richtig übernommen wurden, kannst Du die temp. Tabelle wieder löschen.

Sempervivum

Das liegt daran, dass für main die opacity auf 0.8 gestellt ist:

Code

#content_wrap main {
    background-color: #fff;
    opacity: 0.8;
    order: 2;
    width: 50%;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    margin: 0% 2% 0% 0%;
    border-top: 0.5em solid #009618;
    border-bottom: 0.188em solid #009618;
}

Alles anzeigen

Sempervivum

Eine Lösung wird hier beschrieben:

https://stackoverflow.com/questions/1025…redirect=1&lq=1

Sempervivum

Gern geschehen!

Vermutlich meinst Du die Pfeilfunktion und bist die Schreibweise mit function gewohnt.

Auch für die for-Schleife gibt es eine neuere, kompaktere Version:

https://wiki.selfhtml.org/wiki/JavaScrip…e/Array/forEach

Sempervivum

Bei mit funktioniert der Zugriff auch in der Funktion createKnights:

Code

    function createKnights() {

        const htmlFragment = document.createDocumentFragment();
            x = 0;   // X-Axis
            y = 0;   // Y-Axis

        for (let i = 0; i < knightsTotal; i++) {
            const image = document.createElement('section');
            image.classList.add('hero_img', 'class_knights');
            image.id = knightslist[i];
            htmlFragment.appendChild(image);
            image.style.backgroundPosition = x + '% ' + y + '%';
            image.addEventListener('click', e => {
                console.log(image.id + ' clicked')
            });
            moveAxis(x, y);          
        }
        bgHeroes.appendChild(htmlFragment);
    }

Alles anzeigen

Zitat

kann man die Id nur so holen: getElementById('neraxis') oder kann ich auch so: getElementById(knightlist[i])?

Selbstverständlich sollte das zweite auch funktionieren.

Beiträge von Sempervivum

Menü wahl, soll immer erstes bild gewählt werden, wie?

Mail absenden auf Knopfdruck

Menü wahl, soll immer erstes bild gewählt werden, wie?

Musik auf Website einbinden

Abgerundetes Heroimage

Abgerundetes Heroimage

Anzahl Artikel im Warenkorbsymbol anzeigen

Anzahl Artikel im Warenkorbsymbol anzeigen

CSS 3 Spaltenlayout

CSS 3 Spaltenlayout

CSS 3 Spaltenlayout

Daten aus einer Textdatei in die MySql-Tabelle laden

Daten aus einer Textdatei in die MySql-Tabelle laden

Daten aus einer Textdatei in die MySql-Tabelle laden

Daten aus einer Textdatei in die MySql-Tabelle laden

Daten aus einer Textdatei in die MySql-Tabelle laden

Images werden trüb dargestellt.

Daten aus einer Textdatei in die MySql-Tabelle laden

Erstellte id zugreifen, wie?

Erstellte id zugreifen, wie?