Beiträge von Sempervivum

Du hast doch ganz oben geschrieben, dass sich die Objekte bewegen?

Das ganze if?

Habe das Github geladen aber da ist ein Fehler in Zeile 73 von items.js (das leere if).

Das ist recht einfach:

zeit = weg / geschwindigkeit

Berechnung des Weges:

deltax = x2 - x1

deltay = y2 - y1

weg = sqrt(deltax^2 + deltay^2)

oder kürzer

weg = hypot(deltax, deltay)

In Javascript:

var v = 1;

var t = hypot(x2 - x1, y2 - y1) / v;

t bzw. Zeit ist dann die Dauer der Animation.

Anscheinend hast Du vergessen, den Link einzufügen?

Ohne das Spiel zu testen, vermute ich folgendes: Beim Starten der Animation gibst Du nicht die Geschwindigkeit sondern die Dauer an. Sind die Wege der Animationen unterschiedlich, ergibt sich dann eine unterschiedliche Geschwindigkeit. Ist aber leicht, aus dem Weg eine angepasste Dauer zu ermitteln.

Hier sind zwei Möglichkeiten, wie es funktioniert:

    <p id="irgendwas" onclick="alert(this.id)">inline</p>
    <p id="nochetwas" onclick="zeigId(this)">outline</p>
    <script>
        function zeigId(ele) { alert(ele.id) }
    </script>

Zitat

Da es viel Zeit kostet in jede Datei das händisch einzubinden suche ich nach einer Möglichkeit das automatisch zu machen.

Sofern sich die Position allgemein gültig angeben lässt, z. B. ganz am Anfang, vor </head> oder </body>, evtl. ganz anders: Mit dem Editor und Ersetzen über mehrere Dateien hinein editieren? (natürlich nur das Einbinden, nicht da ganze Skript)

Ich habe da auch etwas ausgearbeitet, ohne Float und ohne absolute Posiitonierung, so wie ich es in #8 beschrieben hatte:

http://jsfiddle.net/Sempervivum/o0e1s3rp/39/

Kann man noch etwas aufhübschen und das Bild austauschen, mir kam es zunächst nur auf die Funktion an.

Bild mit Text machst Du am besten mit dem figure-Tag: Darin ein img-Tag mit dem Bild und einem figcaption-Tag mit dem Text bzw. dem Link.

Und steuern, ob Elemente nebeneinander oder untereinander angeordnet werden, am einfachsten mit Flexlayout:

https://www.html-seminar.de/css-flexbox.htm

Und den hover-Effekt mit CSS-Transition für transform:translateX

Schnell getestet:

        $.ajax({
            url: "testget.php",
            data: JSON.stringify({ name: "heinrich", alter: "48" }),
            success: function (output) {
                console.log("mit stringify: " + output)
            }
        });
        $.ajax({
            url: "testget.php",
            data: "name=heinric&alter=48",
            success: function (output) {
                console.log("mit URL-Parametern: " + output)
            }
        });

Das erste funktioniert nicht wie erwartet: Es gibt eine GET-Variable mit dem JSON-String als Name und leerem Wert.

Das zweite funktioniert: name und alter stehen als GET-Variablen zur Verfügung.

D. h. jQuery erwartet als data einen String von URL-Parametern (wenn es sich um einen String handelt).

Es könnte sein, dass Du hier JSON.stringify mit der jQuery-Funktion serialize verwechselst:

https://api.jquery.com/serialize/

Edit: Ich hatte die Parameter contentType und dataType übersehen. Letzterer bezieht sich auf die Antwort vom Server. Ersterer ändert offenbar nichts, denn mit diesem Code:

        $.ajax({
            url: "testget.php",
            method: "GET",
            contentType: 'application/json',
            data: JSON.stringify({ name: "heinrich", alter: "48" }),
            success: function (output) {
                console.log("mit stringify: " + output)
            }
        });

ist das Ergebnis das gleiche.

Das zweite habe ich noch nie gesehen und mir ist nicht klar, ob es funktionieren wird, habe mir jedoch nicht die Mühe gemacht, es zu testen.

Haupt-Anwendungsfall von JSON ist die Übergabe von Strukturen aus (assoziativen) Arrays z. B. von PHP nach Javascript. Im Falle von Ajax würde auf dem Server mit PHP und json_encode in einen JSON-String kodiert und auf dem Client mit Javascript und JSON.parse wieder dekodiert. Wobei in deinem Fall, wenn contentType mit application/json angegeben wird, jQuery das für dich übernimmt.

Freut mich zu lesen, dass es funktioniert.

Ich muss mich übrigens korrigieren: Bei deinem ersten Layout kann man problemlos auf die absolute Positionierung der Jahreszahlen verzichten, wenn man das betr. span innerhalb des div für die rote Linie anordnet. Weil deren Höhe gering ist erscheint die Jahreszahl dann darunter.

Soweit Du es gepostet hast, scheint es mir richtig zu sein. Du musst nur noch für den Container .chronikcontainerinhalt wieder die Elemente mit row, von links nach rechts anordnen.

Ja, sollte passen. Bei dem roten Balken musst Du wahrscheinlich zwischen links und rechts unterscheiden, denn der linke ragt nach rechts hinein (margin-right:5em;) und der rechte nach links.

Und das Jahr würde ich innerhalb der roten Balkens anordnen, dann kannst Du es leicht relativ dazu positionieren.

Und in der Mitte brauchst Du wahrscheinlich noch den grauen senkrechten Balken.

In CSS brauchen top und left eine Maßeinheit, wahrscheinlich meinst Du px.

Interessante Aufgabe! Mit Bootstrap habe ich keine Erfahrung, aber ich würde mit Flexlayout so vorgehen:

• Zwei Spalten
• Die roten Linien mit Divs geringer Höhe realisieren.
• Die roten Linien mit einem negativen Margin in die gegenüberliegende Spalte hinein ragen lassen.
• Die Jahreszahlen absolut positionieren.

Informiere dich über Ajax, damit kannst Du deine Datenbank abfragen ohne die Seite neu zu laden. Dies ist für den Anfang ganz gut geeignet:

http://blog.axxg.de/einfuehrung-ajax-quickstart/

:confused: Wenn Du schreibst "Bildtitel", meinst Du dann in Wirklichkeit den Dateinamen des Bildes, z. B. "Bild.png"?

Und: Wenn du den Dateinamen des Bildes ohne ein weiteres Kriterium ermitteln willst, darf nur ein einziges Bild in dem Uploads-Ordner liegen?

Zitat

Was jetzt noch ist, das im IE das #main-nav bis nach ganz unten "stretched", sowohl als Button als auch wenn das Untermenü sichtbar ist.

Das kannst Du leicht ändern, indem Du diesem Element ein align-self: flex-start; verpasst. Selber finde ich es aber schöner, wenn der dunklere Hintergrund die ganze Höhe ausfüllt.