Hilfe bei außergewöhnlichem Collapsible

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

scbawik

Senior HTML'ler
14 Juli 2011
2.552
448
83
preview.jpg

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

Senior HTML'ler
14 Juli 2011
2.552
448
83
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

Senior HTML'ler
8 Oktober 2010
5.238
483
83
Berlin
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

Senior HTML'ler
14 Juli 2011
2.552
448
83
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
Weil ich die Aufgabe interessant finde, habe ich mal ein Demo mit jCanvas gemacht:
Code:
    <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>
 
  • Like
Reaktionen: scbawik

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
Das wird von jCanvas unterstützt:
Code:
                    click: function(layer) {
                        drawit(idx);
                    },
Probiere es aus ...
 

scbawik

Senior HTML'ler
14 Juli 2011
2.552
448
83
Weil ich die Aufgabe interessant finde, habe ich mal ein Demo mit jCanvas gemacht:
Code:
    <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):
Screen Shot 2017-11-02 at 18.52.44.png
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
Möglicher Weise könnte man es durch Vergrößern der Parameter, wie Schriftgröße, mit höherer Auslösung rendern lassen. Aber mit diesen HiDPI-Problemen kenne ich mich nicht so gut aus.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
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.
 
Zuletzt bearbeitet:

scbawik

Senior HTML'ler
14 Juli 2011
2.552
448
83
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
Code:
window.devicePixelRatio
in den Griff bekommen. Werde eine Lösung posten wenn ich dazu komme.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
Ein Problem das mir jedoch aufgefallen ist, ist die geringe Auflösung auf HiDPI screens (Hoffe man erkennt es):
Offenbar hat der Entwickler von jCanvas auch an dieses Problem gedacht:
https://projects.calebevans.me/jcanvas/docs/detectPixelRatio/

Ich habe dies mal in das Fiddle aus Posting #10 eingebaut:
https://jsfiddle.net/Sempervivum/fb1bqzwr/2/
Leider habe ich keinen Hi-Res-Monitor und kann es nicht testen. Vielleicht kannst Du, scbawik, es mal ausprobieren.

Meine Lösung mit SVG und die von Aaron mit HTML/CSS haben jedoch den Vorteil, dass die Auflösung auch beim Zoomen im Browser besser ist.
 
  • Like
Reaktionen: scbawik

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.147
237
63
19
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/
 
  • Like
Reaktionen: scbawik

scbawik

Senior HTML'ler
14 Juli 2011
2.552
448
83
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.