Das ist nicht nur Erfahrung und ein geschultes Auge sondern die Entwicklerwerkzeuge des Browser sind da sehr hilfreich. Kann nur empfehlen, dich damit vertraut zu machen. Maus drüber, Rechtsklick - "Element untersuchen" und Du siehst sofort, was Sache ist.
html-seminar.de/woltlab/attachment/1855/
Der orangene Rahmen ist das Padding, das dich stört.
Ist ja cool, da habe ich wohl viel zu kompliziert gedacht.
Ja, ich benutze Visual Studio Code und mit der Erweiterung PHP Debug kann man PHP-Skripts debuggen. Setzt voraus, dass auf dem Webserver XDebug installiert ist.
Ich halte das mit dem Festlegen der Position für nicht ganz trivial: Die Schrift ist fast immer eine Proportionalschrift und dann ist es schwer, aus der Mausposition die Zeichenposition zu ermitteln. Ich würde mir statt dessen die Cursorposition im Text merken und dort das Smilie einfügen.
Ups, ich hab's: War nicht visibility sondern overflow, was man auf visible setzen muss.
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.
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:
#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:
window["column" + column].push(paragraph);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:
var 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