Beiträge von Sempervivum

Sempervivum · 25. April 2019

In checkdir.php die img-Tags generieren:

PHP

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
if (isset($_POST['dir'])) {
    if (file_exists($_POST['dir'])) {
        $imgs = glob($_POST['dir'] . "*.jpg");
        foreach ($imgs as $img) {
            echo '<img src="' . $img . '">' . PHP_EOL;
        }
    }
}
?>

Alles anzeigen

In der Lightbox einen Container für die Bilder hinzu fügen:

Code

<!-- Wird aktiviert wenn ein Verzeichnis (ArtNr) bereits vorhanden ist -->
        <div id="frage">
            <span id="dir"></span>
            <div id="imgs-on-server"></div>
            <form>
                <p>Der Ordner ist vorhanden, was soll mit den Dateien passieren:</p>
                <fieldset>
                    <input type="radio" id="ueberschreiben" name="doppelt" value="ueberschreiben">
                    <label for="ueberschreiben"> bestehende Bilder überschreiben</label>
                    <input type="radio" id="anhaengen" name="doppelt" value="anhaengen">
                    <label for="anhaengen"> neue Dateien anhängen</label>
                    <div id="ok" name="doppelt">OK</div>
                </fieldset>
            </form>
        </div>

Alles anzeigen

Und in der Funktion check() die img-Tags dort eintragen:

Code

//       Prüft ob das Verzeichnis bereits existiert
function check(text) {
    var vval = ($("#text").val());
    var vdir = './upload/' + vval + '/';


    $.ajax({
        url: "checkdir.php",
        method: "post",
        data: { dir: vdir }
    }).done(function (output) {
        if (output != "") {
            console.log(output)
            document.getElementById("dir").innerHTML = vdir;
            $('#output').val(output);
            $('#frage').animate({ "opacity": "1" }, 500);
            $('#background').animate({ "opacity": ".70" }, 500);
            $('#background, #frage').css({ "display": "block", "margin": "1% auto" });
            $("#imgs-on-server").html(output);
        } else console.log(vdir + " existiert nicht");
        $('#output').val(output);
    });

}

Alles anzeigen

Sempervivum · 25. April 2019

Wie so häufig ist auch hier Flexlayout dein Freund. Den Container #conti so ändern, dass er die beiden Bilder umschließt und mit display: flex; und justify-content: center; nebeneinander anordnen:

https://codepen.io/Sempervivum/pen/dLQJJG

Sempervivum · 24. April 2019

OK, wenn ich dich richtig verstehe, willst Du die Bilder in einer Lightbox anzeigen. Dann sehe ich zwei Möglichkeiten:

Du generierst das HTML für die Anzeige der Bilder auf dem dem Server mit PHP oder
Du gibst nur eine Liste der Dateinamen der Bilder aus und erzeugst das HTML mit Javascript

Was möchtest Du denn für eine Lightbox verwenden, vorgefertigt wie Fancybox oder selbstgemacht?

Sempervivum · 24. April 2019

Das kann auch kein Problem sein. Poste mal das Umfeld von dem Ajax und die php-Datei checkdir.php

Sempervivum · 24. April 2019

ichunddu Ich hatte dich doch gebeten, es zu checken, ob die Daten das sind, was Du brauchst. Und jetzt auf einmal ganz etwas anderes?

Sempervivum · 24. April 2019

Möglich ist es in jedem Fall, indem man die Dateien lokal editiert und anschließend hochlädt.

Sempervivum · 24. April 2019

PS: Inzwischen ist mir aufgefallen, dass im Javascript eine Schleife zu viel war. So sollte es besser sein:

Code

    <script>
        $.ajax({
            url: "https://raider.io/api/v1/guilds/profile?region=eu&realm=Norgannon&name=Infinitum%20animus&fields=name,faction,region,realm,profile_url,raid_rankings",
            dataType: "json",
            success: function (output) {
                console.log(output);
                var thehtml = $("#api-template").html()
                    .replace("{name}", output.name)
                    .replace("{faction}", output.faction)
                    .replace("{region}", output.region)
                    .replace("{realm}", output.realm)
                    .replace("{profile_url}", output.profile_url);
                $("#api-content").html(thehtml);
                var thetbody = $("#api-table-body");
                for (var key1 in output.raid_rankings) {
                    var thehtml = $("#api-template-tr").html().replace("{key1}", key1);
                    for (var key2 in output.raid_rankings[key1]) {
                        thehtml = thehtml.replace("{" + key2 + "-world}",
                            output.raid_rankings[key1][key2]["world"])
                            .replace("{" + key2 + "-region}",
                                output.raid_rankings[key1][key2]["region"])
                            .replace("{" + key2 + "-realm}",
                                output.raid_rankings[key1][key2]["realm"]);
                    }
                    thetbody.html(thetbody.html() + thehtml);
                }
            }
        });
    </script>

Alles anzeigen

Sempervivum · 24. April 2019

Verstehe, da lese ich das:

Zitat

Edit your files in your ftp server using ftp-simple andvisual studio code.

Bedenke, dass man die Dateien nicht wirklich "auf dem Server" editieren kann, sondern dass sie jedes Mal beim Öffnen herunter und beim Speichern wieder herauf geladen werden müssen. Möglicher Weise funktioniert deshalb das Suchen und Ersetzen über mehrere Dateien nicht.

Ist im VS Code ohnehin unbefriedigend gelöst:

Man kann nicht wählen, ob Unterverzeichnisse einbezogen werden sollen.

Man kann nicht wählen, ob alle vorhandenen Dateien oder nur die offenen einbezogen werden sollen.

Sempervivum · 24. April 2019

Mit den Headern braucht man sich i. allg. nicht zu befassen.

Zitat

aber wie oder besser wo ist die Antwort auf meine abfrage ?

Code

$.ajax({
            url: "https://raider.io/api/v1/guilds/profile?region=eu&realm=Norgannon&name=Infinitum%20animus&fields=name,faction,region,realm,profile_url,raid_rankings",
            dataType: "json",
            success: function (output) {
                // Diese Funktion ohne Name wird aufgerufen, wenn die Abfrage erfolgreich war.
                // Der Parameter output enthält die Antwort auf die Anfrage
                // Das JSON wurde schon dekodiert, d. h. es handelt sich um ein Javascript-Objekt
                console.log(output);

Sempervivum · 24. April 2019

Zitat

So, habe grad gefunden das man tatsächlich über Visual Studio Code durch mehrere Dateien "suchen und ersetzen" anwenden kann.

Allerdings geht das nicht mit mein FTP Server.

Ich bin nicht direkt Profi für VSC aber ich benutze ihn ebenfalls. Was hat das mit dem FTP-Server zu tun?

Sempervivum · 23. April 2019

Ich habe da mal etwas zusammen gebaut, und zwar habe ich Templates verwendet, damit Du das HTML einfach an deine Wünsche anpassen kannst. Die URL ist noch statisch, wenn Du die Parameter dynamisch machen willst, muss man das noch ändern.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>JSON-API</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- in den folgenden Templates stehen Platzhalter, die durch die Elemente,
        die von der API geliefert werden, ersetzt werden 
        Beispiel: {name} wird durch "Infinitum animus" ersetzt und ist dann so
        auf deiner Seite sichtbar.
        Das HTML außerhalb der geschweiften Klammern kannst Du anpassen -->
    <template id="api-template">
        <div>Name: {name}</div>
        <div>Faction: {faction}</div>
        <div>Region: {region}</div>
        <div>Realm: {realm}</div>
        <div>Profil: <a href="{profile_url}">Hier klicken</a></div>
        <table>
            <!-- hier den Tabellenkopf statisch einfügen -->
            <tbody id="api-table-body"></tbody>
        </table>
    </template>
    <template id="api-template-tr">
        <tr>
            <td>{key1}</td>
            <td>{normal-world}</td>
            <td>{normal-region}</td>
            <td>{normal-realm}</td>
            <td>{heroic-world}</td>
            <td>{heroic-region}</td>
            <td>{heroic-realm}</td>
            <td>{mythic-world}</td>
            <td>{mythic-region}</td>
            <td>{mythic-realm}</td>
        </tr>
    </template>
</head>

<body>
    <div id="api-content">

    </div>
    <script>
        $.ajax({
            url: "https://raider.io/api/v1/guilds/profile?region=eu&realm=Norgannon&name=Infinitum%20animus&fields=name,faction,region,realm,profile_url,raid_rankings",
            dataType: "json",
            success: function (output) {
                console.log(output);
                var thehtml = $("#api-template").html()
                    .replace("{name}", output.name)
                    .replace("{faction}", output.faction)
                    .replace("{region}", output.region)
                    .replace("{realm}", output.realm)
                    .replace("{profile_url}", output.profile_url);
                $("#api-content").html(thehtml);
                var thetbody = $("#api-table-body");
                for (var key1 in output.raid_rankings) {
                    var thehtml = $("#api-template-tr").html().replace("{key1}", key1);
                    for (var key2 in output.raid_rankings) {
                        for (var key3 in output.raid_rankings[key2]) {
                            thehtml = thehtml.replace("{" + key3 + "-world}",
                                    output.raid_rankings[key2][key3]["world"])
                                .replace("{" + key3 + "-region}",
                                    output.raid_rankings[key2][key3]["region"])
                                .replace("{" + key3 + "-realm}",
                                    output.raid_rankings[key2][key3]["realm"]);
                        }
                    }
                    thetbody.html(thetbody.html() + thehtml);
                }
            }
        });
    </script>
</body>

</html>

Alles anzeigen

Sempervivum · 23. April 2019

Hast Du denn ein wenig Erfahrung mit Javascript? Wenn gar nicht, wird wohl kein Weg daran vorbeiführen, dir eine Lösung zu geben, obwohl es den Forenregeln widerspricht.

Sempervivum · 23. April 2019

In dem gelben Fenster sind die Informationen dargestellt, die die API liefert. Prüfe zunächst, ob es die sind, die Du brauchst, und wenn ja, können wir dir dann erklären, wie Du sie auswerten und auf deiner Homepage darstellen kannst.

Sempervivum · 23. April 2019

Informiere dich über jQuery-load, damit geht das:

http://api.jquery.com/load/

Sempervivum · 21. April 2019

Besser Code in Textform mit Codetags posten als Bilder: Das </> in der Werkzeugleiste oben.

Zitat

Dies wird -wie erwartet- für alle Überschriften übernommen. Jedoch wollte ich jeweils eine Ausnahme hinzufügen, wo das vorgegebene nicht übernommen wird.

Einfach der betr. Überschrift eine Klasse geben, z. B. "ausnahme" und für diese die abweichenden Regeln definieren:

Code

<h2>Die allgemeine Überschrift</h2>
<h2>Noch eine allgemeine</h2>
<h2 class="ausnahme">Dies ist die Ausnahme</h2>

Und das CSS:

Code

h2 {
    /* die allgemeinen Regeln */
}

h2.ausnahme {
    /* die Regeln für die Ausnahme */
}

Sempervivum · 21. April 2019

Ich sehe gerade, dass Du auch nach einer Lösung mit CSS gefragt hast. Ist auch kein Problem, aber dann wird es unübersichtlicher und weniger änderungsfreundlich:

HTML

<!doctype html>
<html>

<head>
    <title>Test</title>
    <style>
        input {
            display: none;
        }

        section.container {
            display: none;
        }

        input#all:checked~section {
            display: block;
        }

        input#hund:checked~section.hund {
            display: block;
        }

        input#katze:checked~section.katze {
            display: block;
        }

        input#maus:checked~section.maus {
            display: block;
        }
    </style>
</head>

<body>
    <h1>Filter:</h1>
    <div class="buttons">
        <label for="all">Alle</label>
        <label for="hund">Hund</label>
        <label for="katze">Katze</label>
        <label for="maus">Maus</label>
    </div>
    <input type="radio" name="rdgroup" id="all" checked>
    <input type="radio" name="rdgroup" id="hund">
    <input type="radio" name="rdgroup" id="katze">
    <input type="radio" name="rdgroup" id="maus">
    <section class="container hund">
         <h2>Hunde</h2>
        <h3>Hund 1</h3>
        <h3>Hund 2</h3>
    </section>
    <section class="container katze">
         <h2>Katzen</h2>
        <h3>Katze 1</h3>
        <h3>Katze 2</h3>
    </section>
    <section class="container maus">
         <h2>Mäuse</h2>
        <h3>Maus 1</h3>
        <h3>Maus 2</h3>
    </section>
</body>

</html>

Alles anzeigen

Sempervivum · 21. April 2019

BTW: Möglicher Weise lässt sich das Ganze noch vereinfachen und übersichtlicher machen, wenn Du das HTML etwas anders arrangierst und jeweils eine Tiergruppe in einen übergeordneten Container legst:

HTML

<!doctype html>
<html>

<head>
    <title>Test</title>
    <script src="http://www.muench-herdecke.de/js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.buttons a').click(function () {
                $('.container').hide();
                var sAttr = $(this).attr("data-filter");
                if (sAttr == 'all')
                    $('.container').show();
                else
                    $('.' + sAttr).show();
                return false;
            });
        });
    </script>
</head>

<body>
    <h1>Filter:</h1>
    <div class="buttons">
        <a data-filter="all">alle Tiere</a>
        &nbsp;I&nbsp;
        <a data-filter="hund">Hund</a>
        &nbsp;I&nbsp;
        <a data-filter="katze">Katze</a>
        &nbsp;I&nbsp;
        <a data-filter="maus">Maus</a>
    </div>
    <section class="container hund">
         <h2>Hunde</h2>
        <h3>Hund 1</h3>
        <h3>Hund 2</h3>
    </section>
    <section class="container katze">
         <h2>Katzen</h2>
        <h3>Katze 1</h3>
        <h3>Katze 2</h3>
    </section>
    <section class="container maus">
         <h2>Mäuse</h2>
        <h3>Maus 1</h3>
        <h3>Maus 2</h3>
    </section>
</body>

</html>

Alles anzeigen

Sempervivum · 21. April 2019

Das lässt sich leicht machen: Gib den Überschriften ebenfalls die geeigneten Klassen und beziehe dies beim Ausblenden ein:

HTML

<!doctype html>
<html>

<head>
    <title>Test</title>
    <script src="http://www.muench-herdecke.de/js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.buttons a').click(function () {
                $('.container, .headline').hide();
                var sAttr = $(this).attr("data-filter");
                if (sAttr == 'all')
                    $('.container').show();
                else
                    $('.' + sAttr).show();
                return false;
            });
        });
    </script>
</head>

<body>
    <h1>Filter:</h1>
    <div class="buttons">
        <a data-filter="all">alle Tiere</a>
        &nbsp;I&nbsp;
        <a data-filter="hund">Hund</a>
        &nbsp;I&nbsp;
        <a data-filter="katze">Katze</a>
        &nbsp;I&nbsp;
        <a data-filter="maus">Maus</a>
    </div>
    <h2 class="headline hund">Hunde</h2>
    <div class="container hund">
        <h3>Hund 1</h3>
    </div>
    <div class="container hund">
        <h3>Hund 2</h3>
    </div>
    <h2 class="headline katze">Katze</h2>
    <div class="container katze">
        <h3>Katze 1</h3>
    </div>
    <div class="container katze">
        <h3>Katze 2</h3>
    </div>
    <h2 class="headline maus">Maus</h2>
    <div class="container maus">
        <h3>Maus 1</h3>
    </div>
    <div class="container maus">
        <h3>Maus 2</h3>
    </div>
</body>

</html>

Alles anzeigen

Sempervivum · 20. April 2019

Zitat

Ich habe irgendwo gelesen, dass es Viewport auch in CSS gibt und dass man da die Seite im querformat anderst anzeigen kann, wie im hochkanntformat.

Dann bin ich mir ziemlich sicher, dass das, was Du gelesen hast, "orientation" war und dann trifft darauf die Einschränkung zu, dass es nicht von allen Browsern unterstützt wird. Wenn Du sicher gehen willst, dass es in allen Browsern funktioniert, dann ermittle die Orientierung mit Javascript und weise den betr. Elementen eine geeignete Klasse zu. Damit kannst Du sie dann mit CSS gestalten.

Sempervivum · 19. April 2019

Glückwunsch, dass Du die Lösung gefunden hast. Freut mich zu lesen.

Beiträge von Sempervivum

Existierendes Verzeichnis erkennen und entsprechend handeln

Bilder nebeneinander stellen

Existierendes Verzeichnis erkennen und entsprechend handeln

Existierendes Verzeichnis erkennen und entsprechend handeln

API in HTML einfügen

Massenbearbeitungen verschiedene Dateien

API in HTML einfügen

Massenbearbeitungen verschiedene Dateien

API in HTML einfügen

Massenbearbeitungen verschiedene Dateien

API in HTML einfügen

API in HTML einfügen

API in HTML einfügen

Dateien per php verlinken

HTML & CSS mit DIV

nicht benötigte Headlines ausblenden

nicht benötigte Headlines ausblenden

nicht benötigte Headlines ausblenden

Viewport

Scrollposition übergeben funktioniert nicht