Ich habe hier mal zwei Varianten zusammen gestellt, wie man etwas über ein Bild legen kann. Was dort Text ist, wäre bei deinem Anwendungsfall das Siegel. Versuche, das auf deine Seite zu übernehmen.
Beiträge von Sempervivum
-
-
Zitat
wie ich hunderte Meetings im Localstorage abspeichern kann
Für größere Datenmengen ist Localstorage weniger geeignet, aber es gibt eine Alternative: IndexedDB:
-
Hallo Sascha, willkommen im Forum!
Selbstverständlich ist das möglich. Eine Template-Datei anlegen mit Platzhaltern. Gängig sind dabei doppelte geschweifte Klammern:
{{datum}}
Und dann ein Formular, wo es für jeden Wert ein Eingabefeld gibt. Beim Abschicken dann mit PHP die Template-Datei laden, die Platzhalter ersetzen und unter dem Zielnamen speichern
-
Hallo Olli,
ich bin mal folgender Maßen vorgegangen: Das letzte Wort, d. h. hinter Leerzeichen oder <br> ermitteln und prüfen, ob es in eine Zeile passt. Wenn nicht, Hinweis an den Benutzer ausgeben. Hat man den Fehlerfall erst Mal erkannt, kann man auch andere Reaktionen programmieren, z. B. zwangsweise einen Zeilenumbruch einzufügen.
Wenn das Wort passt, kann man ganz normal beim ersten Leerzeichen vom Ende aus gesehen einen Zeilenumbruch einfügen.
HTML
Alles anzeigen<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <title>Automatic Wrapping</title> <style> #text-container, #help-container { display: inline-block; border: 2px solid lightblue; min-height: 1em; } #text-container { width: 200px; } #help-container { min-width: 200px; } </style> </head> <body> <div id="text-container" contenteditable="true"></div> <div id="help-container"></div> <textarea id="help-textarea"></textarea> <script> const container = document.getElementById('text-container'); const helpcontainer = document.getElementById('help-container'); const textarea = document.getElementById('help-textarea'); const maxWidth = 200; container.addEventListener('keyup', (event) => { let text = container.innerHTML; console.log(text); let helptext = ''; for (let i = 0; i < text.length; i++) { helptext += text.charAt(i); helpcontainer.innerHTML = helptext; // Aktuelle Breite des Hilfscontainers ermitteln let currentWidth = helpcontainer.clientWidth; // Ist diese Breite groesser als die maximale? if (currentWidth > maxWidth) { // Jetzt ermitteln wir das letzte (u. U. sehr lange) Wort helptext2 = helptext.match(/(\s|<br>)([^\s]+)$/)[2]; // und tragen es in den Hilfscontainer ein helpcontainer.innerHTML = helptext2; // Ist die Breite des Hilfscontainers bzw. die Breite // des letzten Wortes kleiner oder gleich der max. Breite? if (helpcontainer.clientWidth <= maxWidth) { // Alles OK: Zeilenumbruch beim letzten Leerzeichen einfuegen helptext = helptext.replace(/\s([^\s]+)$/, '<br>$1'); } else { // Das Wort ist zu lang und passt nicht in die Zeile: // Hinweis an den Benutzer console.log('Das Wort ' + helptext2 + ' ist zu lang'); // Schleife abbrechen, damit der Hinweis nicht wiederholt wird break; } } } textarea.value = helptext; }); </script> </body> </html> -
So etwas kann man sehr gut mit vue.js machen:
https://vuejs.org/v2/cookbook/us…nsume-apis.html
Dann brauchst Du kein $.get weil das Holen des JSON durch axios erledigt wird.
Da Du schreibst, dass Du die Daten mit einer Schleife verarbeitest, brauchst Du auch mit Vue eine Iteration. Das wird hier beschrieben:
-
Möglicher Weise kann man das irgend wie retten, indem man nur den fraglichen Header überarbeitet aber dazu müsste man das HTML und das CSS im Zusammenhang sehen. Hast Du eine URL?
-
So sieht das HTML schon entschieden besser aus. Perfekt wäre es, wenn Du es nicht als Screenshot sondern als Text in Code-Tags, das </> in der Werkzeugleiste oben, posten würdest.
Dann habe ich vorhin bemerkt, dass mir bei der Formulierunng in meinem Posting #4 ein Fehler unterlaufen ist. Der letzte Satz muss lauten:
ZitatUnd dann ist der Grund, warum es nicht funktioniert, offenbar, dass Du das CSS, das Du gepostet hast, auf den Flex-Container anwenden musst und nicht auf das Formular, das offenbar ein Flex-Item oder ein Kind davon ist.
Das was jetzt fett geschrieben ist fehlte.
Damit das Ganze funktioniert, müsste das HTML etwa so aussehen:
Code<div class="align-vertical-center"> <section> <h1>Say Hallo</h1> <!-- und der ganze Rest mit u. a. der Social-Buttons --> </section> <form> <!-- hier die Formularelementd --> </form> </div>und das CSS so:
Codediv.align-vertical-center { display: flex; align.items: center; }Hier habe ich natürlich nur das angegeben, worauf es ankommt.
Das div.align-vertical-center ist der Flex-Container und section und form die Flex-Items.
Das align-items: center; wirkt nur auf die direkten Kinder des Flex-Containers, die Flex-Items.
-
Ich habe mal etwas einfaches realisiert:
Eine Art quadratischen Rahmen definiert und die Bilder mit object-fit darin eingebettet. Und zwar so, dass jedes Bild vollständig sichtbar ist und nichts abgeschnitten wird. Dabei entstehen jetzt Leerräume, entwder seitlich oder oben und unten, je nach Orientierung. Sieh es dir mal an:
https://webentwicklung.ulrichbangert.de/thread363-swipe-images-2.html
-
Am einfachsten, wenn Du die beteiligten IDs in ein zweidimensionale Array einträgst und darüber eine Schleife legst. In der Schleife dann die Funktion myRange aufrufen mit den IDs als Parameter.
Alternative: Die drei beteiligten Elemente jeweils z. B. in einem Fieldset gruppieren. Dann eine Schleife über diese Fieldsets und jeweils die Berechnung durchführen.
-
PS: Mir scheint, ich habe das vorhin noch nicht richtig verstanden: Das Problem ist, dass das Skript vom Ende gesehen das erste Leerzeichen durch ein <br> ersetzt, so dass dort Zeilenumbrüche hinkommen, wo keine sein sollen. Wenn Du es nicht lösen kannst, melde dich wieder.
-
Verstehe, das ist natürlich ein Problem. Eine hundertprozentige Lösung wäre eine automatische Silbentrennung, aber das ist eine Wissenschaft für sich und nicht so auf die Schnelle zu machen. Vielleicht nur den Fall erkennen und dem Benutzer einen Hinweis geben, dass er manuell einen Umbruch einfügen soll?
-
Das ist zunächst mal kein Wunder. Ich nehme an, deine Bilder haben nicht alle das selbe Format. Ich werde es mir ansehen und versuchen, das CSS anzupassen.
-
Um sicher zu gehen, habe ich das mit der Textarea mal untersucht und konnte bei den automatischen Umbrüchen keine Steuerzeichen finden.
Darauf hin habe ich eine Demo mit dem Verfahren gemacht, das ich beschrieben habe. Ist nicht besonders kompliziert und scheint gut zu funktionieren:
HTML
Alles anzeigen<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Automatic Wrapping</title> <style> #text-container, #help-container { display: inline-block; border: 2px solid lightblue; min-height: 1em; } #text-container { width: 200px; } #help-container { min-width: 200px; } </style> </head> <body> <div id="text-container" contenteditable="true"></div> <div id="help-container"></div> <textarea id="help-textarea"></textarea> <script> const container = document.getElementById('text-container'); const helpcontainer = document.getElementById('help-container'); const textarea = document.getElementById('help-textarea'); const maxWidth = 200; container.addEventListener('keyup', (event) => { let text = container.innerHTML; console.log(text); helptext = ''; for (let i = 0; i < text.length; i++) { helptext += text.charAt(i); helpcontainer.innerHTML = helptext; let currentWidth = helpcontainer.clientWidth; if (currentWidth > maxWidth) { helptext = helptext.replace(/\s([^\s]+)$/, '<br>$1'); } } textarea.value = helptext; }); </script> </body> </html> -
Du könntest den Zeilenumbruch des Benutzers in der DB speichern und die zusätzlichen erst beim Zeichnen hinzu fügen. Die Funktion kann man sicher so erweitern, dass sie vorhandene Zeilenumbrüche beibehält.
ZitatGibt es evtl. mit jquery oder js eine möglichkeit?
Ich wüsste nicht, wie man aus einer Textarea die automatisch eingefügten Zeilenumbrüche heraus lesen könnte. Aber es wäre eine Möglichkeit, das Verfahren, das ich oben angedeutet habe, zu verwenden: Den Text in einen Hilfscontainer zu schreiben und ständig zu prüfen, ob der Text nicht hinein passt und in dem Fall den Text umzubrechen.
-
Ups, da haben sich jetzt unsere Postings überschnitten. Als erstes würde ich diese Inflation von div-Containern auf das notwendige reduzieren.
Und dann ist der Grund, warum es nicht funktioniert, offenbar, dass Du das CSS, das Du gepostet hast, auf den Flex-Container und nicht auf das Formular, das offenbar ein Flex-Item oder ein Kind davon ist.
-
Bevor es Flexlayout gab, war es gar nicht so einfach, mit CSS etwas vertikal zu zentrieren. Aber jetzt kein Problem, informiere dich über Flexlayout, z. B. hier:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
align-items ist dann das was Du brauchst.
-
Hier wird eine Funktion angeboten, die beim Zeichnen des Textes die Zeilenumbrüche automatisch einfügt:
https://www.php.net/manual/de/function.imagettfbbox.php
(nach "Automatic line breaks" suchen).
Möglicher Weise könntest Du die Texte ohne Zeilenumbrüche in der DB speichern und sie mit Hilfe dieser Funktion erst beim Zeichnen hinzu fügen. Würde auch insofern Sinn machen, weil Du für die Zeilenumbrüche die Fontsize und die verfügbare Breite brauchst, die mehr an die Grafik gebunden sind.
Oder es clientseitig machen, indem Du die Funktion oben nachbildest, indem Du den Text in einen HTML-Container schreibst.
-
Zitat
Ich möchte ein Gedicht als Grafik Speichern.
Wo möchtest Du diese Grafik denn speichern, lokal oder auf dem Server?
-
Hier wird das Problem diskutiert
https://stackoverflow.com/questions/2034…iphone-and-ipad
und geschrieben, dass iOS-Geräte ein Video nur abspielen, wenn die Controls eingeschaltet sind. Macht auch Sinn, denn das Autoplay ist i. allg. geblockt und man muss das Video ja irgend wie starten.
-
Kann man sich das irgend wo online ansehen?