Beiträge von Sempervivum

Also bei mir auf dem Samsung S4 tritt der Fehler offenbar auf: Die Tabelle ist hinter "Name 29" abgeschnitten. Das ist doch das Problem, das Du eingangs beschrieben hast, nicht wahr?

Die Höhe habe ich auch schon fest vergeben.

Was heißt das? Mit einer festen Größe wie 500px? Das könnte deine Probleme erklären.

Aber ohne den kompletten Code zu sehen ist das nur Rätselraten. Kannst Du diesen nicht posten mit Dummy-Texten statt der vertraulichen?

PS: Wo bekommst Du denn diese Daten her?

{"message":"Krombacher Pils 0,33l"}
{"message":"Krombacher Pils 0,5l"}
{"message":"Keinen Artikel gefunden"}

Das ist auf keinen Fall valides JSON. Die Objekte müssen in ein Array gepackt werden, damit es valide wird und geparst werden kann:

[
    {"message":"Krombacher Pils 0,33l"},
    {"message":"Krombacher Pils 0,5l"},
    {"message":"Keinen Artikel gefunden"}
]

Ajax works asynchronously, i. e. the request is sent to the server and it takes a short time until the response is received. At that time initialisation for drag&drop (by calling draggable() and droppable())is already done and doesn't come into effect for the boxes being created by the ajax response.

Place the initialisation inside the ajax callback and it should work.

Hier steht wie's geht:

https://datatables.net/forums/discuss…with-new-values

Bin mir nicht sicher, ob ich vollständig durch das System deiner Schleifen und Indizes durchgestiegen bin, aber ich denke, das Problem besteht darin, dass Du den Tabellenkopf innerhalb deiner Schleife generierst:

if (empty($produktId)) {
    if(!empty($warenkorb)){
      for(; $i < $k; $i++) {
        if ($warenkorb[$i] <= 0){
          continue;
        }
    ?>
      <!-- Hier befindest Du dich noch innerhalb der Schleife -->
      <h2>Ihr Warenkorb:</h2>
      <table class="table ">
        <thead>
          <tr>
            <th scope="col">Produkt ID</th>
            <th scope="col">Name</th>
            <th scope="col">Preis pro Stk</th>
            <th scope="col">Menge</th>
            <th scope="col">Preis</th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>

Wenn Du das Ganze vor die Schleife ziehst, sollte das Problem behoben sein.

Ja, genau so. Habe ich in den Developertools getestet und funktioniert.

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')
            });
        }