Beiträge von Sempervivum

Sempervivum

Leider habe ich keine fundierten Kenntnisse in der Implementierung von Browsern, aber weil dir sonst niemand antwortet, versuche ich es mal: Offensichtlich liegen hier Unterschiede in der Implementierung der Browser vor. Ich würde dem nicht so große Bedeutung beimessen, weil Alerts eher geeignet sind, quick and dirty, mal eben etwas anzuzeigen oder abzufragen. Für eine wirklich brauchbare Benutzeroberfläche wird man eher Ein- und Ausgabefelder, evtl. auch Modale benutzen.

Außerdem empfehle ich, auf document.write zu verzichten, weil das Verhalten u. U. schwer zu durchschauen ist.

Sempervivum

Hier wird das gleiche Problem beschrieben und Lösungen angegeben:

https://stackoverflow.com/questions/4111…when-loaded-wit

Sempervivum

Wie lädst Du denn nach, mit jQuery, $.ajax oder $("selector").load, oder mit xmlhttprequest? Und tritt das Problem bei allen Browsern auf?

Sempervivum

Interessantes Problem.

Code

"einfach nochmal aufrufen" habe ich gelesen, aber ich habe kein (Click-)Ereignis, sondern der Code soll ausgeführt werden, sobald das HTML in das entsprechende Element geladen ist

Wäre es eine Alternative, das Javascript im success-Event (bei jQuery) auszuführen? Ich finde es ohnehin verwirrend und schlecht zu überblicken, wenn in Inhalten, die mit Ajax geladen werden, Javascript enthalten ist.

Sempervivum

Wären es Radiobuttons, wäre es ein Leichtes, es mit CSS zu realisieren, aber mit select kenne ich nur eine Lösung mit Javascript:

Code

    <select id="select1">
        <option value="opt1" selected>Option 1</option>
        <option value="opt2">Option 2</option>
    </select>
    <div class="content">Content 1</div>
    <div class="content" style="display:none;">Content 2</div>
    <script>
        select1.addEventListener("change", function() {
            var cont = document.querySelectorAll(".content");
            for (var i = 0; i < cont.length; i++) {
                if (i == this.selectedIndex) cont[i].style.display = "block";
                else cont[i].style.display = "none";
            }
        });
    </script>

Alles anzeigen

Sempervivum

Schön! Woran hat es denn beim Chrome gelegen?

Sempervivum

Möglicher Weise ein Problem mit dem Cache:

https://superuser.com/questions/8980…n-google-chrome

Das Hintergrundbild braucht ewig lange zum Laden, kein Wunder bei über 4 MB. Ich konnte es ohne sichtbaren Qualitätsverlust auf ca. 800kB komprimieren.

Außerdem wird das Hintergrundbild je nach Seitenverhältnis des Browserfensters verzerrt. Besser background-size:cover verwenden:

https://wiki.selfhtml.org/wiki/CSS/Eigen…background-size

Sempervivum

Das geht so:

Code

        li[parent='0'] {
            display: none;
        }

Sempervivum

Von Bootstrap habe ich leider keine Ahnung, aber hier wird angegeben, dass man das Styling durch Bootstrap machen lassen kann:

https://datatables.net/manual/styling/

Sempervivum

Datatables bringt das von Haus aus mit:

https://datatables.net/examples/basic…figuration.html

Das Sortieren kannst Du unterdrücken, wenn Du es nicht möchtest.

Sempervivum

Da musst Du die Tabelle sequenziell absuchen. Ich gehe davon aus, wenn Du Birne suchst, weißt Du, in welcher Spalte diese ist?

Sempervivum

Oder möchtest du an Stelle eines Bildes während des Ladens ein div anzeigen? Dann brauchst Du nur das Bild durch dieses div zu ersetzen.

Sempervivum

Weiß nicht genau, wie Du das meinst. AFAIK hat ein div kein Load-Event. Sinn machen würde das nur, wenn Elemente drin sind, die eines haben und dann müsste man die überwachen und entspr. für das div die Aktionen veranlassen, die man haben will.

Sempervivum

Das geht z. B. so:

https://jsfiddle.net/Sempervivum/uohjxkr9/2/

Sempervivum

Kein Problem, dann musst Du das wrapping wieder einschalten und die Breite auf 33.3% setzen:

Code

        #galerie {
            width: 100%;
            margin: 0 auto;
            text-align: center;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
            margin: 0;
        }
        #galerie a {
            flex-basis: 33.3%;
            flex-grow: 0;
            flex-shrink: 1;
        }
        #galerie a img {
            max-width: 100%;
            height: auto;
        }

Alles anzeigen

Sempervivum

Nachdem ich die Erzeugung von formData entspr. dem Muster bei selfhtml geändert habe, funktioniert es:

Code

<form method="post" action="javascript:AjaxUpload();" enctype="multipart/form-data">
        <input type="file" name="file" id="file" />
        <input type="submit" name="submit" />
    </form>
    <script>
        function AjaxUpload() {
            if (FormData && typeof FormData === "function") {
                //var file = document.getElementById("file");
                //var data = new FormData(file),
                var data = new FormData(document.querySelector('form')),
                    xhr = new XMLHttpRequest();
                xhr.open("POST", "uploaddorty.php");
                xhr.addEventListener('load', function (event) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.responseText);
                    } else {
                        console.warn(xhr.statusText, xhr.responseText);
                    }
                });
                xhr.send(data);
            }
        }
    </script>

Alles anzeigen

https://wiki.selfhtml.org/wiki/JavaScrip…avaScript-Datei

Den Eventlistener braucht man nicht unbedingt; ich habe ihn zu Testzwecken eingebaut.

Sempervivum

Das liegt daran, dass Du "flex-flow: row wrap" gesetzt hast, dadurch erfolgt ein Zeilenumbruch, wenn die Breite die des Browserfensters überschreitet. Änderst Du das auf "nowrap", sind die Bilder nebeneinander, aber wenn die Breite zu groß ist, wird die Scrollbar eingeschaltet. Um das zu vermeiden, kann man die Bilder responsiv machen durch flex-grow und flex-shrink für die a-Elemente.

Code

<article id="galerie">
            <a href="#"><img src="http://lorempixel.com/output/cats-q-c-300-200-7.jpg" alt="hdimage"></a>
            <a href="#"><img src="http://lorempixel.com/output/cats-q-c-300-200-7.jpg" alt="hdimage"></a>
            <a href="#"><img src="http://lorempixel.com/output/cats-q-c-300-200-7.jpg" alt="hdimage"></a>
    </article>
    <style>
        #galerie {
            width: 100%;
            margin: 0 auto;
            text-align: center;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            margin: 0;
        }
        #galerie a {
            flex-grow: 0;
            flex-shrink: 1;
        }
        #galerie a img {
            width: 100%;
            height: auto;
        }
    </style>

Alles anzeigen

Sempervivum

Das kann man entweder mit absoluter Positionierung oder mit negativem Margin machen, etwa so:

https://jsfiddle.net/Sempervivum/3vh7zck0/4/

Sempervivum

Die Funktion add() habe ich in der Doku nicht gefunden, dafür jedoch die Funktion file(). Wenn ich dabei die Option binary auf true setze und dieses:

http://www.henryalgus.com/reading-binary…ng-jquery-ajax/

anwende, komme ich zu diesem Code:

Code

<script src="js/jszip.min.js"></script>
    <script type="text/javascript" src="//stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
    <script type="text/javascript" src="js/fileSaver.js"></script>
</head>
<body>
    <button id="blob" class="btn btn-primary">click to download</button>
    <script>
        jQuery("#blob").on("click", function () {
            //var promise = $.get("test.pdf");
            //zip.file("test.pdf", promise, {binary: true});
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'test.pdf', true);
            xhr.responseType = 'blob';
            xhr.onload = function (e) {
                if (this.status == 200) {
                    // get binary data as a response
                    var blob = this.response;
                    var zip = new JSZip();
                    zip.file("test.pdf", blob, { binary: true });
                    zip.generateAsync({ type: "blob" }).then(function (blob) { // 1) generate the zip file
                        saveAs(blob, "test.zip");                          // 2) trigger the download
                    }, function (err) {
                        jQuery("#blob").text(err);
                    });
                }
            };
            xhr.send();
        });
    </script>

Alles anzeigen

Sempervivum

Meinst Du diese Anordnung, die man hier im Forum links von einem Posting sieht, mit Profilbild und Benutzername?

Beiträge von Sempervivum

Unterschied bei Chrome zu anderen Browsern (Firefox und IE) bei alert

JavaScript in nachgeladenem HTML ausführen

JavaScript in nachgeladenem HTML ausführen

JavaScript in nachgeladenem HTML ausführen

Ausblenden nach Select-Option Auswahl

Meine kleine Lern - Homepage. Unterschiede zwischen Chrome und Firefox / IE in der Hitnergrundbildanzeige

Meine kleine Lern - Homepage. Unterschiede zwischen Chrome und Firefox / IE in der Hitnergrundbildanzeige

Parent per CSS

Bootstrap Daten auf Seiten verteilen

Bootstrap Daten auf Seiten verteilen

Dynamische Tabelle bearbeiten

Beim laden eines I-Frames eine Animation anzeigem

Beim laden eines I-Frames eine Animation anzeigem

Beim laden eines I-Frames eine Animation anzeigem

Box Problem

Fileupload mit Ajax realisieren

Box Problem

Box Problem

Dynamischer Download mehrerer Dateien

Box Problem