Beiträge von Sempervivum

Zitat

Soll es beides mal der gleiche Link sein?

Oh nein, für die Bilder dieser:

https://wiki.selfhtml.org/wiki/HTML/Text…urierung/figure

Da hast Du ja noch eine Menge Arbeit vor dir. Lies dir mal diese Seite durch, dort wird beschrieben, wie man mit Hilfe von Flexlayout Element anordnet:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox

Und dieses, dort wird beschrieben, wie man Bilder mit Beschreibungen anlegt:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox

In dem Fiddle aus #21 hast Du die Größe des Bildes nicht geändert

Ich bin mir ziemlich sicher, dass dieses richtig ist, aber dabei kommt nur Grau heraus, das Blaue geht verloren:

https://jsfiddle.net/Sempervivum/ggdqbafq/1/

Mache ich das Verkleinern mit meiner Bildbearbeitung, kommt Hellblau heraus. Entweder in dem Skript ist noch ein Fehler oder es liegt am Verkleinern durch die Canvas-API.

Zitat

Wüsste nicht wie ich das schreiben müsste

Siehe hier:

https://projects.calebevans.me/jcanvas/docs/images/

Bei "Custom width/height"

Zitat

Wie kann ich denn am besten Javascript lernen.

Ich würde sagen, gleich hier:
https://www.html-seminar.de/javascript.htm

Zitat

Was macht den das fromCenter ?

Das wird hier erklärt:

https://projects.calebevans.me/jcanvas/docs/rectangles/

Zitat

weil ich auch nicht weiss was das macht.

Ich habe es heraus gefunden, indem ich die RGB-Werte in der Console ausgegeben habe. Dabei sah man sofort, dass in jeder Zeile 32-mal 0,0,0 ausgegeben wurde.

Zitat

Wie functioniert das den bei dir

Wenn man setPixels aufruft, führt jCanvas natürlich auch ein Schleife über alle Pixel aus und ruft für jedes Pixel das each-Callback auf. Soweit ich weiß, sind in der Funktion dann nur die RGB-Werte verfügbar. Braucht man x und y, muss man dies selber berechnen.

Zitat

wenn ich Kommentare von Post-Id 48 und ich es dann unterhalb schreibe haben alle Posts die Kommentare von Post-Id 48.

Ich vermute, dort befindest Du dich in einer Schleife über alle Posts. Um das Problem zu beheben. musst Du abfragen, ob der aktuelle Schleifendurchlauf für den Post ist, zu dem die Kommentare gehören.

Da fehlt ein fromCenter in meinem Code. So ist es richtig:

                    cv.setPixels({
                        x: 0, y: 0,
                        width: width, height: height,
                        fromCenter: false,
                        each: function (px) {

Zitat

müsste wenn man Blau mit weiss mischt nicht hellblau rauskommen

Das stimmt natürlich. Muss ich mir mal ansehen ...

Siehe hier:

https://api.jquery.com/lt-selector/

Das ist in der Tat ziemlich ineffizient:

1. Mit setPixels kann man das ganze Bild auf einmal abarbeiten. Ruft man setPixels für jedes Pixel auf mit width:1 und height:1 wird das Bild bei jedem Aufruf mit getImageData aus dem Canvas gelesen und mit putImageData zurück geschrieben.

2. Die RGB-Werte kann man in Variablen führen. Andernfalls muss für jedes Pixel der RGB-Wert aus dem Localstorage gelesen und zurück geschrieben werden.

Ich schlage dieses vor:

    <canvas id="avgcolor"></canvas>
    <script>
        var cv = $("#avgcolor");
        var im = new Image();
        im.onload = function () {
            var width = this.width, height = this.height;
            console.log(width, height);
            cv.attr("width", width).attr("height", height + 100);
            cv.drawImage({
                layer: true,
                source: im.src,
                x: 0, y: 0,
                fromCenter: false,
                load: function () {
                    var sumr = 0, sumg = 0, sumb = 0;
                    cv.setPixels({
                        x: 0, y: 0,
                        width: width, height: height,
                        each: function (px) {
                            sumr += px.r;
                            sumg += px.g;
                            sumb += px.b;
                        }
                    });
                    var nrpx = width * height;
                    var avgr = Math.floor(sumr / nrpx),
                        avgg = Math.floor(sumg / nrpx),
                        avgb = Math.floor(sumb / nrpx);
                    console.log(avgr, avgg, avgb);
                    cv.drawRect({
                        width: 100, height: 100,
                        x: 0, y: height,
                        fromCenter: false,
                        fillStyle: "rgb(" + avgr + "," + avgg + "," + avgb +")"
                    })
                }
            });
        }
        im.src = "images/bg_sprite.png";
    </script>

Getestet hatte ich das auch mit dem Ergenis, dass nur die Funktion aufgerufen wurde, die als erstes dem Event zugwiesen wurde.

Vor allem zunächst auf absolute Positionierung verzichten und ja, die Größe in Prozent zu definieren ist ebenfalls schon ein guter Ansatz. Poste doch mal das HTML, CSS und JS, möglicher Weise als ZIP-Datei oder die URL der Seite, falls sie online ist. Es geht ja hier um die Darstellung und die Dynamik der Balken braucht dafür nicht zu funktionieren.

Den Kern der Sache, nämlich die Funktion AN() finde ich nicht in dem Code, den Du gepostet hast. Hast Du das soweit selbst entwickelt oder von irgendwoher übernommen?

Wenn ich mich richtig erinnere, waren das dynamische Balken, die mit Canvas und jCanvas gezeichnet werden. Ich habe mir jetzt nicht die Mühe gemacht, die Threads heraus zu suchen.

Diese Frage wird häufig gepostet und das Problem ist vielschichtig und schwer in wenigen Sätzen zu beantworten. Generell kann man jedoch sagen, dass absolute Positionierung der Feind eines responsiven Layouts ist, wo sich die Elemente dynamisch an die Bildschirmabmessungen anpassen. Besser andere Layoutmöglichkeiten verwenden.

Wahrscheinlich brauchst Du dafür kein try/catch. Das Handbuch sagt:

Zitat

Im Fehlerfall gibt file_get_contents() FALSEzurück.

http://php.net/manual/de/function.file-get-contents.php

Du kannst es jedoch so machen wie die echte Fancybox und den Inhalt (.fancybox-inner) parallel zum Hintergrund (.fancybox-g) anlegen anstatt als Kindelement:

html-seminar.de/woltlab/attachment/1352/

Muss denn die Funktion addNewBird an die Suche gebunden sein? Einfacher wäre es, wenn Du sie dort definieren würdest, wo die Liste aufgebaut wird und wo der Listener registriert werden muss.

Oh, das tut mir Leid! Ich wollte dich nicht angreifen. Hatte vermutet, dass das ein Muster ist, das von der Aufgabe vorgegeben wurde. Weil Du in anderem Zusammenhang mal geschrieben hattest, dass Du etwas nicht anwenden kannst, weil die Aufgabe es anders verlangt.

Und da heißt es immer, OOP verbessere die Wartbarkeit und Änderungsfreundlichkeit oder stelle sie gar sicher. Beides setzt Lesbarkeit voraus aber hier sucht man sich ja dumm und dämlich, bis man etwas gefunden hat.