Ups, ich hab's: War nicht visibility sondern overflow, was man auf visible setzen muss.
Beiträge von Sempervivum
-
-
Zitat
Mit visibility tut sich bei mir gar nix.
Ist ja merkwürdig: Bei mir hat es einwandfrei funktioniert, wenn ich es mit den Developertools umgeändert habe. Aber jetzt hast Du das selbe hinein editiert und es funktioniert nicht. ???
-
Bei mir bleibt er nicht stehen am Containerrand sondern wird unsichtbar. Das kannst Du beheben, indem Du visibility auf visible setzt für den Container mit den Smilies. Aber Du kannst das CSS nicht ändern? Dann vielleicht mit JS die betr. Anweisung überschreiben?
-
Das ist eine interessante Frage. Bei HTML5 ist eine Zahl als ID in der Tat valide. Es gibt aber eine Einschränkung: Für CSS gilt dies nicht, d. h. es gibt da eine Diskrepanz. Deshalb ist es trotzdem zu empfehlen, auf numerische IDs zu verzichten.
-
-
Ich dachte, Du würdest dir so etwas vorstellen:
https://jsfiddle.net/Sempervivum/Ldnz5mx6/4/
Da muss man nur noch das containment ausrechnen, damit man das Bild nicht über die Grenzen hinaus bewegen kann.
-
Zitat
Das Problem ist, dass sich das Bild an die Seite, bzw den Bereich anpasst.
Das muss eigentlich nicht zwangsläufig so sein und wird wahrscheinlich durch dein CSS verursacht. Möchtest Du das Bild denn in einen Container legen oder soll es das ganze Fenster ausfüllen?
-
Nicht direkt ein Player, aber jQuery-UI ermöglicht so etwas:
https://jqueryui.com/draggable/
Wenn ich mich richtig erinnere, ist es umfangreich konfigurierbar und man kann es so einstellen, dass man nicht über die Grenzen hinaus ziehen kann.
-
Das betr. ul, d. h. die zweite Stufe, die nach unten aufklappt, muss nach jetzt absolut positioniert werden, wenn sie die übrigen Inhalte überdecken statt nach unten schieben soll:
html-seminar.de/woltlab/attachment/1849/
Fehlt nur noch ein heller Hintergrund, damit man die Schrift besser lesen kann.
-
Du hast dein Layout mit floats ausgelegt und es kommt häufig vor, dass das zu Problemen und unerwarteten Effekten führt. Dieses Problem lässt sich leicht lösen, wenn Du die Listenelemente statt dessen mit Flexlayout anordnest:
Code
Alles anzeigen#steuerungoben ul { display: flex; list-style-type: none; } #steuerungoben li { display: inline; } #steuerungoben a { display: block; width: 190px; /* background-color: yellow;*/ /* float: left; */ /* border-right: 1px red solid; */ /* color: yellow; */ text-decoration: none; line-height: 24px; text-align: center }Ich empfehle, das Layout insgesamt auf Flex umzustellen. Du kannst Dich hier informieren:
-
Ja, hier zeigen sich die Tücken von eval und der Debugger bringt es an den Tag: Der String, der übergeben wird, sieht so aus:
column1.push([object Object])
weil Du einen String zusammen baust und Javascript wandelt das Objekt paragraph in diese Stringdarstellung um.
Lösung:
Dabei nutzt man aus, dass eine Variable ein Element des window-Objektes ist, das mit dem Variablennamen angesprochen werden kann.
Ich würde es jedoch vorziehen, auf diesen Trick zu verzichten und das Ganze in einem zweidimensionalen Array abzulegen:
Code
Alles anzeigenvar columns = [[], [], [], [], []]; var counter = 0; console.log("gestartet"); const columnpositions = [2, 8, 22, 38, 57]; const possibilitys = [0, 1, ""]; function createElement(column) { console.log("new Element"); counter++; var character = possibilitys[Math.round(Math.random() * 2)]; $("#Background").append("<p id='" + counter + "'>" + character + "</p>"); var paragraph = $("#" + counter).css({ "left": columnpositions[column] + "rem" }); columns[column].push(paragraph); } function createRow() { for (var i = 0; i < 5; i++) { createElement(i); } window.setTimeout(createRow, 1000); } createRow(); -
Ups, ich hatte die $-Zeichen vergessen.
-
Poste mal das JSON in Textform, nicht als Bild. Dann tut man sich beim Testen leichter.
-
Diesmal ungetestet:
echo data[count(data) - 1]->name;
-
Meinst Du den untersten Datenblock mit name und changedToAt oder in jedem Datenblock das unterste, d. h. changedToAt?
-
Ja, das habe ich getestet. Der Link ist aus deinem Posting #3
Zur Sicherheit habe ich noch Mal den Code hier aus #4 kopiert und zurück in meine Testseite überschrieben - funktioniert. Ausgabe GommeHD
-
Zitat
sieht jemand was ich falsch mache?
Ich denke schon: Du benutzt json_encode, zum Dekodieren des Strings musst Du jedoch json_decode verwenden. Dieses funktioniert:
-
Ich denke mal, in der Mathematik ist das nicht normal, wohl aber in der Computerei: Die Größe einer Zahl ist nach oben begrenzt, wie man hier nachlesen kann:
https://entwickler.de/online/javascr…ber-191081.html
ZitatFür Ganzzahl-Werte bedeutet dies, dass eine gesicherte Darstellung bis 15 Ziffern möglich ist
-
Zitat
Ich hatte jetzt versucht einfach die Bezeichnungen dots, more u.s.w. in dots1, more1 u.s.w. zu ändern und dies entsprechend in der .js Datei auch einfügen. Damit ich quasi zwei unterschiedliche Befehle habe.
Das ist häufig der erste Ansatz, aber auch der schlechteste, weil man dann auch bei jedem neuen Textblock das CSS und das Javascript erweitern muss. Besser ist es, statt der IDs Klassen zu verwenden. Ich habe mal das letzte Fiddle hergenommen und entspr. umgeändert:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>More/Less</title> <style> .shortText.small { -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); } .shortText span.more { display: inline; } .shortText.small span.more { display: none; } .shortText:not(.small) span.dots { display: none; } </style> </head> <body> <h2>Read More Read Less Button</h2> <p class="shortText small">Text 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p> <button class="moreless-btn">Read more</button> <p class="shortText small">Text 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p> <button class="moreless-btn">Read more</button> <p class="shortText small">Text 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p> <button class="moreless-btn">Read more</button> <script> function moreless() { var shorttxt = this.previousElementSibling; shorttxt.classList.toggle("small"); if (shorttxt.classList.contains("small")) { this.textContent = "Read more"; } else { this.textContent = "Read less"; } } var btns = document.querySelectorAll(".moreless-btn"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener('click', moreless);; } </script> </body> </html> -