Beiträge von Sempervivum

Das Ändern der Größe mit width und height funktioniert im FF leider nicht so wie gewünscht:

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

Besser erst testen bevor man postet

Es handelt sich hier nicht um ein Bild und das Problem ist weniger Unschärfe sondern eine unsaubere Darstellung des Rahmen, jedenfalls bei mir im Opera:

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

Ebenso die Überdeckung der umliegenden Elemente aber die kann man leicht durch ein margin verhindern.

Das wird hier besprochen:

https://stackoverflow.com/questions/3069…-size-using-css

Nachteil der Lösungen dort: Es wird herauf skaliert, was zu einer unscharfen Darstellung führen kann.

Willst Du es perfekt haben, dann verwende ein label-Tag, das kannst Du dann nach Belieben gestalten, einschl. der Größe.

Eigentlich liegst Du schon richtig, wenn Du nach "slideshow" oder "imageslider" suchst, nur: Dieser Effekt ist nicht das, was man gemeinhin darunter versteht. Besser ist es nach "javascript compare images" zu suchen. Dann findet man z. B. dieses, wo die Skripts deinem Beispiel schon relativ nahe kommen:

https://www.cssscript.com/tag/image-comparison/

Willkommen im Forum!

Zitat

oder es besser machen könnte

Kein Drama, aber es ist besser, Code in Textform zu posten, denn wenn man die Frage beantworten will ist es häufig angebracht, eine Testdatei anzulegen und dann tut man sich damit leichter. Und dabei Code-Tags benutzen, das </> in der Werkzeugleiste oben.

Zitat

Wenn ich es richtig verstanden habe, muss ich für die Positionierung von divs nebeneinander "nur" den Befehl display: inline nutzen, oder?

Das stimmt im Prinzip, es gibt jedoch (mindestens) einen Fallstrick bei der Sache:

padding und border werden der Breite zugeschlagen. Z. B. wenn Du zwei Container mit der Breite 50% hast, 10px padding und 2px border und der Platz beträgt 1000px, dann ergibt sich für einen Container jeweils ein Breite von 524px, so dass sie nicht mehr nebeneinander in die verfügbare Breite von 1000px nebeneinander passen.

Lösung 1:

Die Breite berechnen, indem padding und border von den 50% subtrahiert werden.

Lösung 2 (besser):

box-sizing: border-box; verwenden, siehe hier:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing

Lösung 3 (am besten):

Flexlayout verwenden, siehe z. B. hier:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Damit hast Du noch viele weitere Möglichkeiten, die Anordnung der Element zu steuern.

Der Hauptgrund für deine Probleme mit dem Layout ist jedoch, dass Du float verwendest. Auch darauf kannst Du verzichten, wenn Du Flex nimmst.

Zitat

allerdings wird Java von keinem Browser mehr unterstützt

Das trifft nur für die Java-Applets zu, aber nicht für standalone-Programme.

Edit: Möglicher Weise missverständlich: Standalone-Programme haben natürlich mit dem Browser nichts zu tun.

Generell musst Du dich entscheiden, ob dein Spiel im Browser laufen soll, dann Javascript und Canvas, sowie PHP für die Organisation, Highscore speichern etc.

Oder Du programmierst es in Java, dann hat es mit dem Web und dem Browser nichts zu tun und läuft allein lokal.

Zitat

Da der Browser das Bild darstellt, verfügt er über diese Informationen und es ist mir nicht ganz klar, weshalb ich sie dann nicht auslesen kann bzw. wie ich vorgehen muss, um sie auszulesen.

Das wäre eigentlich auch kein Problem, aber die Browser blockieren das unter bestimmten Umständen aus Sicherheitsgründen, siehe "tainted canvas":

https://developer.mozilla.org/en-US/docs/Web…S_enabled_image

animation-fill-mode dürfte dir da weiter helfen:

https://wiki.selfhtml.org/wiki/CSS/Eigen…ation-fill-mode

Erst dachte ich, es kann nicht an den Namen gelegen haben, aber doch. Der Fehler liegt hier:

const totalo = this.parentNode.parentNode;
totalo = totalo.querySelector('.total');        //total = das zu löschende Textfeld

const bedeutet, dass man eine Konstante definiert, d. h. eine Variable die im weiteren Verlauf nicht geändert werden kann. Daher schlägt die Zuweisung in der zweiten Zeile fehl. Ich würde erwarten, dass das auch in der Console angezeigt wird. Hättest Du totalo mit let definiert, hätte es sicher funktioniert.

Nein, weder ist mein Code fehlerhaft, noch hast Du etwas falsch verstanden. Nur unsere Testumgebungen unterscheiden sich offenbar: Ich habe in meiner Testdatei drei Scattercharts und Du nur einen mit unterschiedlichen y-Werten. Da hast Du sehr gut mitgedacht, auf die Idee hätte ich auch selber kommen können.

Denke, jetzt verstehe ich es vollständig. Ich habe jetzt in meiner Testdatei die Zeile mit dem Löschbutton hinzu gefügt:

    <table>
        <tr id="zeile1">
            <form name="Formular" action="">
                <td><input type="text" id="Artikel" size="20"></td>
                <td>
                    <input type="button" class="changeNr" value="-">
                    <input type="text" class="nr-person adult" data-factor="1" size="2" disabled="" value="1" />
                    <input type="button" class="changeNr" value="+">
                </td>
                <td>
                    <input type="button" class="changeNr" value="-">
                    <input type="text" class="nr-person child" data-factor="0.35" size="2" disabled="" value="1" />
                    <input type="button" class="changeNr" value="+">
                </td>
                <td>
                    <input type="text" class="per-item" disabled="disabled" value="23.95" size="5">
                </td>
                <td>
                    <input type="text" class="total" disabled="disabled" value="23.95" size="5">
                </td>
                <td>
                    <!-- <a href="javascript:blend_out('zeile1')"><input type="button" value="X" onclick="reset1()"></a> -->
                    <input type="button" class="delete" value="X">
                </td>
            </form>
        </tr>
    </table>

Wenn ich jetzt dein Javascript aus Posting #8 nehme und nur die Namen ein wenig ändere, funktioniert es, das Eingabefeld für den Gesamtpreis wird gelöscht, wenn man das X klickt.

    const delBtns = document.querySelectorAll('.delete'); //alle delete-Buttons
        for (let i = 0; delBtns.length > i; i++) {
            const thebutton = delBtns[i];
            thebutton.addEventListener('click', function () {
                const theRow = this.parentNode.parentNode;
                totalo = theRow.querySelector('.total');        //total = das zu löschende Textfeld
                totalo.value = 0;
                Summe();
                // blend_out('zeile1')
            });
        }

Was soll denn dieser Button jetzt eigentlich tun? Das Feld für den Gesamtpreis löschen? Und ein Element unsichtbar machen. Aber welches?

Zitat

Da versuche ich hinterher noch, dass irgendwie zusammenzufassen.

Besser gleich weil die Verschachtelung die Ursache dafür sein kann, dass es nicht funktioniert. Du kannst ja beide Aktionen in einem Eventhandler zusammen fassen.

Leider ist mir keine andere Lösung bekannt. Vielleicht kennt aber jemand anders eine.

Außer eine andere Programmiersprache zu verwenden wie Java. Da tut man sich dann leichter, wenn man mit lokalen Dateien arbeitet.

Zitat

Ich habe schon vermutet, dass <a> ebenfalls als Elternelement zählt und deswegen noch ein parentNode drangehängt, aber das ändert auch nichts.

Eigentlich trifft das aber zu, das <a> zählt mit. Um das Ganze übersichtlicher zu machen, empfehle ich aber, die Verschachtelung von einem Button in einem <a> wegzulassen. Diese ist nicht valide und das hat seine Gründe: Was soll jetzt beim Klick ausgeführt werden, der click-Handler der Buttons oder das Javascript im href-Attribut des <a>?

Einen Webserver lokal installieren, z. B. WAMP? Davon kannst Du vielleicht auch später noch profitieren, falls Du dich mit PHP beschäftigst.

Poste am besten auch das HTML, das dazu gehört, denn davon hängt es ab, wie Du im DOM navigieren musst. Von deiner Beschreibung her müsste es funktionieren, denn this.parentNode wäre das <td> und davon das parentNode das <tr>, jedenfalls wenn das HTML so aufgebaut ist wie bisher.

Zitat

aber was mir aufgefallen ist:

die zeit wird nur gezählt wenn das fenster aktiv ist.

und pro minute mit einer echten uhr läuft das script pro minute ca. 6 sek langsamer.

Beides kann man beheben, wenn man nicht einfach herauf zählt sondern die Startzeit merkt und dann die Differenz bildet, etwa so:

https://jsfiddle.net/Sempervivum/L95gjhtw/17/

Ja, weiß ich, freut mich, dass dir der Name gefällt. Es ist auch eine Pflanzengattung:

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