Hilfe bei außergewöhnlichem Collapsible

[scbawik]

Ich denke der Screenshot ist selbsterklärend.
Klick auf die Jahreszahl öffnet Details.

Leider habe ich irgendwie aktuell nicht ansatzweise eine Idee, wie ich überhaupt den HTML Code dazu aufbauen soll. Geschweige denn CSS.

Hat irgendjemand eine Idee? Danke!

 

[scbawik]

Ich denke, da würde man sich leichter tun, wenn man es einfach mit Canvas zeichnet.

Ja, das befürchte ich auch.

Um JS wird man so oder so nicht herumkommen.
Habe mir auch schon überlegt einfach den Strich nur per JS / position:absolute über die Punkte zu legen.
Aber da stellt es mir die Haare auf wenn ich nur daran denke ;)

Werde wohl nochmal mit dem Grafiker reden.

 

[Tronjer]

Semantisch würde ich die Timeline als UL schreiben. Jedes Listelement besitzt im Hintergrund ein Blockelement mit background-color und im Vordergrund eines mit background-color und border-radius 99.

Den oberen Teil der Timeline könnte man separat erstellen und dann so rücken, das es mit dem unteren visuell eine Einheit bildet.

 

[scbawik]

Semantisch würde ich die Timeline als UL schreiben. Jedes Listelement besitzt im Hintergrund ein Blockelement mit background-color und im Vordergrund eines mit background-color und border-radius 99.

Kannst du das vielleicht etwas detaillierter beschreiben? Verstehe nicht ganz was du mit Vordergrund und Hintergrund meinst.

 

[Tronjer]

Zwei Blockelemente mit z-index übereinander.

 

[Tronjer]

Du brauchst aber auch Event-Listener auf den Jahreszahlen.

 

[scbawik]

Weil ich die Aufgabe interessant finde, habe ich mal ein Demo mit jCanvas gemacht:

    <canvas id="timelinecv" style="border: 2px solid blue;"></canvas>
    <script>
        var timelinedata = [
            { year: "1995", text: "1995 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." },
            { year: "1995", text: "1995 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." },
            { year: "1997", text: "1997 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." },
            { year: "1999", text: "1999 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." },
            { year: "2002", text: "2002 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." },
        ];
        var cv = $("#timelinecv");
        var diameter = 10,
            strokewidth = 4,
            left = 10,
            itop = 10,
            yearleft = 30,
            yeartop = 0,
            yearsize = '20px',
            txtleft = 50,
            txttop = 20,
            txtwidth = 300,
            txtsize = '15px';
        function drawit(cidx) {
            cv[0].height = 600;
            cv[0].width = 600;
            cv.clearCanvas();
            cv.removeLayers();
            var ctop = itop;
            timelinedata.forEach(function (item, idx) {
                var h = 50;
                cv.drawArc({
                    layer: true,
                    fillStyle: 'black',
                    x: left, y: ctop,
                    radius: diameter / 2,
                    start: 0, end: 360
                }).drawText({
                    layer: true,
                    click: function(layer) {
                        drawit(idx);
                    },
                    name: 'year' + idx,
                    fillStyle: 'black',
                    fontSize: yearsize,
                    fontFamily: 'Arial',
                    text: timelinedata[idx].year,
                    x: left + yearleft, y: ctop + yeartop
                });
                yend = ctop;
                if (idx == cidx) {
                    cv.drawText({
                        layer: true,
                        click: function (layer) {
                            drawit(idx);
                        },
                        name: 'text',
                        fillStyle: 'black',
                        fontSize: txtsize,
                        fontFamily: 'Arial',
                        align: 'left',
                        text: timelinedata[idx].text,
                        x: left + yearleft, y: ctop + txttop,
                        maxWidth: txtwidth,
                        fromCenter: false
                    });
                    htxt = cv.measureText('text').height;
                    ctop += h + htxt;
                } else {
                    ctop += h;
                }
            });
            cv.drawLine({
                layer: true,
                strokeStyle: '#000',
                strokeWidth: strokewidth,
                x1: left, y1: itop,
                x2: left, y2: yend
            });
        }
        drawit(-1);
    </script>

Wow, danke!!!

Hier kann man gleich testen:
https://jsfiddle.net/ahm927qj/

Ein Problem das mir jedoch aufgefallen ist, ist die geringe Auflösung auf HiDPI screens (Hoffe man erkennt es):

 

[scbawik]

Hier eine Version mit vierfacher Auflösung. Funktioniert beim Zoomen sehr gut, aber mit einem HIDPI-Monitor konnte ich es nicht testen.
https://jsfiddle.net/5f7f6g71/2/
Leider auch nicht perfekt, weil jetzt in der Originalgröße die Qualität reduziert ist durch das Herunterskalieren. Vielleicht besser mit SVG.

Das könnte man wahrscheinlich mit

window.devicePixelRatio

in den Griff bekommen. Werde eine Lösung posten wenn ich dazu komme.

 

[Aaron3219]

Kannst du dir mal meine Version anschauen? Ich habe das ohne canvas gemacht und (so gut wie) kein Javascript verwendet (10 Zeilen):
https://jsfiddle.net/85Ld6kqt/9/

Der Rest ist nur html/CSS

Edit:
Hab es doch mit linear-Gradient hinbekommen. Mit background-size geht es!
https://jsfiddle.net/L6temsg3/2/

 

[Aaron3219]

Hey, sorry dass ich einen relativ alten Post nochmal wiederbelebe, auch weil sich das Thema schon erledigt hat.
Doch ich hatte gerade nichts zu tun und habe deshalb an einer noch besseren Version gearbeitet, die komplett ohne Javscript funktioniert und auch das CSS alles für einen macht. Es muss also nur noch der html-Code bearbeitet werden, bzw. einfach ein neues Element für den Collabse eingefügt werden. Falls also ein späterer User nach sucht, hier meine Lösung:
https://jsfiddle.net/Aaron3219/vpx38948/1/

 

[scbawik]

Hey, sorry dass ich einen relativ alten Post nochmal wiederbelebe, auch weil sich das Thema schon erledigt hat.
Doch ich hatte gerade nichts zu tun und habe deshalb an einer noch besseren Version gearbeitet, die komplett ohne Javscript funktioniert und auch das CSS alles für einen macht. Es muss also nur noch der html-Code bearbeitet werden, bzw. einfach ein neues Element für den Collabse eingefügt werden. Falls also ein späterer User nach sucht, hier meine Lösung:
https://jsfiddle.net/Aaron3219/vpx38948/1/

Achja sorry, habe auch vergessen zu antworten.
Habe es schlussendlich mit HTML und JS zur Positionierung des Strichs gelöst.
Schien mir die flexibelste Lösung, da der Strich nicht einfach nur von oben nach unten geht und auch über dem Content liegen muss (Siehe Mockup).

Deine Lösung sieht jedenfalls gut aus. Leider funktioniert der Klick nicht, aber daran würde es auch nicht scheitern.

 

[Aaron3219]

Warum funktioniert der Klick nicht... bei mir funktioniert es einwandfrei. Einfach auf die Schwarzen Punkte drücken.

Klick auf die Jahreszahl öffnet Details.

Achso... hier:
https://jsfiddle.net/Aaron3219/vpx38948/3/