horizontale "grafische" Timeline erstellen

[Gunther]

Guten Abend und Hallo zusammen!

Ich möchte für ein Projekt eine horizontale Timeline erstellen.
Da es sich ja dabei um tabellarische Daten handelt, wäre hier der Einsatz von Tabelle(n) ja durchaus angebracht. Da die Timeline aber bereits im Jahre 1995 startet, eine Monatsunterteilung hat, und ca. 10 Punkte umfasst, finde ich die tabellarische Lösung weder besonders komfortabel in der Erstellung, noch in der Pflege & Wartung.

Da ich es ausserdem sehr begrüßen würde, wenn die Zeilenbeschriftungen "fix" stehenbleiben würden, hatte ich alternativ an ein Layout mit fix und absolut positionierten Elementen gedacht.

Hat jemand Tipps und/ oder andere Ideen, wie ich das am besten realisieren könnte?

Zur Veranschaulichung

TIMELINE
                                             1995
         | Jan.   Feb.   Mar.   Apr.   Mai   Jun.   Jul.   Aug.   Sep.   Okt.   Nov.   Dez.
-----------------------------------------------------------------------------------------------------------
Gruppe 1 |
  Punkt 1|                                          <------------------->
  Punkt 2|        <-------------------------------->
  Punkt 3|               <------------------->
         |                      (links/ rechts scrollender Bereich)
Gruppe 2 |
  Punkt 1|                             <--------------------------------------------->
  Punkt 2|
  Punkt 3|
...

Der linke Bereich sollte fixiert sein. Eine mögliche Umsetzung muss nicht unbedingt IE-kompatibel sein, sollte aber ohne JS funktionieren.

Für Tipps und Anregungen (oder auch Links zu Beispielen, habe erst ein Einziges gefunden), meinen besten Dank im Voraus!

Gruß Gunther

[Gernot Back]

Hallo Gunther,

Ich möchte für ein Projekt eine horizontale Timeline erstellen.
Da die Timeline aber bereits im Jahre 1995 startet,

Das ist ja fast aus der Zeit der Nibelungen!

eine Monatsunterteilung hat, und ca. 10 Punkte umfasst, finde ich die tabellarische Lösung weder besonders komfortabel in der Erstellung, noch in der Pflege & Wartung.

Da hast du Recht, das ist ein wenig Aufwand!

Der linke Bereich sollte fixiert sein.

Für Tipps und Anregungen (oder auch Links zu Beispielen, habe erst ein Einziges gefunden), meinen besten Dank im Voraus!

Dies hier ist mit Tabelle, mit JS und - oh Graus, mit Frames:

http://aktuell.de.selfhtml.org/artikel/javascript/scrolltabelle/index.htm

War es das, was du bereits gefunden hattest?

Gruß Gernot

P.S.: Ich finde, wir sollten auch Gieselher noch um Rat fragen!

[Gunther]

Hallo Gernot,

Ich möchte für ein Projekt eine horizontale Timeline erstellen.
Da die Timeline aber bereits im Jahre 1995 startet,

Das ist ja fast aus der Zeit der Nibelungen!

Zu denen wir beide ja bereits namensbedingt eine besondere Affinität haben...

eine Monatsunterteilung hat, und ca. 10 Punkte umfasst, finde ich die tabellarische Lösung weder besonders komfortabel in der Erstellung, noch in der Pflege & Wartung.

Da hast du Recht, das ist ein wenig Aufwand!

Der linke Bereich sollte fixiert sein.

Für Tipps und Anregungen (oder auch Links zu Beispielen, habe erst ein Einziges gefunden), meinen besten Dank im Voraus!

Dies hier ist mit Tabelle, mit JS und - oh Graus, mit Frames:

http://aktuell.de.selfhtml.org/artikel/javascript/scrolltabelle/index.htm

War es das, was du bereits gefunden hattest?

Nein, war es nicht. Ich find's auch im Augenblick nicht wieder (vor lauter Sucherei). War ein Beispiel für eben eine ca. 4 Fensterbreiten (bei 1024px) breite Tabelle (mit dem dazugehörigen total unübersichtlichen und umfangreichen Quellcode)

Ich dachte u.a. an eine Variante mit absolut- & fixpositionierten Elementen, und ich würde auch gerne relative Größenangaben (in em - keine Prozente) verwenden. Dadurch entfällt dann die Möglichkeit, Hintergrundgrafik(en) (z.B. für die Zeitleiste mit den Monaten) zu verwenden.

So richtig glücklich bin ich mit dem Ansatz noch nicht, deswegen dachte ich mir, ich frage mal hier im Forum, ob jemand eine praktikabelere bzw. innovativere Lösung hat.

Gruß Gernot

P.S.: Ich finde, wir sollten auch Gieselher noch um Rat fragen!

oder doch lieber Siegfried - oder beide?

Gruß Gunther

[Detlef G.]

Hallo Gunther

... (in em - keine Prozente) verwenden. Dadurch entfällt dann die Möglichkeit, Hintergrundgrafik(en) (z.B. für die Zeitleiste mit den Monaten) zu verwenden.

Wieso entfällt dann die Möglichkeit?
Du kannst bei Gernots Variante auch mit em-Angaben arbeiten. Hintergrundgrafiken
werden entsprechend der Zellengrößen (auch in em) gekachelt oder abgeschnitten.

So richtig glücklich bin ich mit dem Ansatz noch nicht, deswegen dachte ich mir, ich frage mal hier im Forum, ob jemand eine praktikabelere bzw. innovativere Lösung hat.

Wenn das Ganze nicht zu viele Zeilen ergibt, du also nicht befürchten musst,
dass das Browserfenter in der Höhe nicht ausreicht, könntest du

• für den feststehenden Teil position:fixed verwenden (kein IE) oder
• den scrollbaren Bereich in ein Div mit overflow:auto packen oder
• zwei Frames verwenden oder
• den scrollbaren Bereich in ein Inlinframe.

Die beiden letzten Möglichkeiten würde ich nach Möglichkeit vermeiden.

Wenn allerdings auch ein Scrollen in vertikaler Richtung nötig sein sollte,
dann wirst du dies ohne Javascript nicht lösen können, wobei dann Gernots
Variante wohl am einfachsten umzusetzen sein sollte.

Die Tabelle könnte dabei auch durchaus anders aufgebaut sein.
Eine andere Variante davon, bei der auch die Schriftgröße verändert werden kann.

Auf Wiederlesen
Detlef

[Gunther]

Hallo Detlef,

... (in em - keine Prozente) verwenden. Dadurch entfällt dann die Möglichkeit, Hintergrundgrafik(en) (z.B. für die Zeitleiste mit den Monaten) zu verwenden.

Wieso entfällt dann die Möglichkeit?
Du kannst bei Gernots Variante auch mit em-Angaben arbeiten. Hintergrundgrafiken
werden entsprechend der Zellengrößen (auch in em) gekachelt oder abgeschnitten.

Background-Images skalieren eben nicht. Wenn ich für den "Zeitstrahl" eine Hintergrundgrafik verwenden würde, und Tabellenzellen in EMs definieren würde, gäbe es nur genau eine Größe, bei der meine Zeitleiste auch eine durchgehende Leiste wäre.

So richtig glücklich bin ich mit dem Ansatz noch nicht, deswegen dachte ich mir, ich frage mal hier im Forum, ob jemand eine praktikabelere bzw. innovativere Lösung hat.

Wenn das Ganze nicht zu viele Zeilen ergibt, du also nicht befürchten musst,
dass das Browserfenter in der Höhe nicht ausreicht, könntest du

• für den feststehenden Teil position:fixed verwenden (kein IE) oder
• den scrollbaren Bereich in ein Div mit overflow:auto packen oder

ja genau das war ja meine Überlegung als Ersatz für die Tabelle(n)! Für den IE gibt's dann halt nur eine mit JS "funktionsfähige" Version.

• zwei Frames verwenden oder
• den scrollbaren Bereich in ein Inlinframe.

Nein - keine Frames (einer der Gründe, warum Gernots Variante für mich auch nicht in Betracht kommt).

Die beiden letzten Möglichkeiten würde ich nach Möglichkeit vermeiden.

Ich auch!

Wenn allerdings auch ein Scrollen in vertikaler Richtung nötig sein sollte,

das wird bei relativen Größenangaben irgendwann immer der Fall sein...

dann wirst du dies ohne Javascript nicht lösen können, wobei dann Gernots
Variante wohl am einfachsten umzusetzen sein sollte.

Das größte Problem besteht ja darin, dass wenn man einen fixierten Bereich und einen scrollenden Bereich, also 2 verschiedene Bereiche, hat, dass dann beide Bereiche quasi synchron vertikal scrollen müssten - wüßte ich auch keine andere Lösung als JS.

Die Tabelle könnte dabei auch durchaus anders aufgebaut sein.
Eine andere Variante davon, bei der auch die Schriftgröße verändert werden kann.

Nun, das entspräche einer 'vertikalen' Zeitleiste. Ich möchte aber eine horizontale Zeitleiste ;-)!

Auf Wiederlesen
Detlef

Ja, man liest sich und vielen Dank für deine Gedanken & Ideen zu meinem Problem.

Gruß Gunther

[Detlef G.]

Hallo Gunther

Background-Images skalieren eben nicht. Wenn ich für den "Zeitstrahl" eine Hintergrundgrafik verwenden würde, und Tabellenzellen in EMs definieren würde, gäbe es nur genau eine Größe, bei der meine Zeitleiste auch eine durchgehende Leiste wäre.

Sorry, ich hatte nicht daran gedacht, dass Gernot Hintergrundbilder für die
Tabellenlinien verwendet hat.
Ich meinte Hintergrundgrafiken in den Zellen, die dann diesen Strahl darstellen.

• den scrollbaren Bereich in ein Div mit overflow:auto packen ...

ja genau das war ja meine Überlegung als Ersatz für die Tabelle(n)! Für den IE gibt's dann halt nur eine mit JS "funktionsfähige" Version.

Das könnte auch der IE, er kann nur fixed nicht.

Wenn allerdings auch ein Scrollen in vertikaler Richtung nötig sein sollte,

das wird bei relativen Größenangaben irgendwann immer der Fall sein...

Das wird dann nicht so einfach werden. Gernots Feature-Artikel ist praktisch
das Ergebnis des Threads vom 13. 07. 2004.

Das größte Problem besteht ja darin, dass wenn man einen fixierten Bereich und einen scrollenden Bereich, also 2 verschiedene Bereiche, hat, dass dann beide Bereiche quasi synchron vertikal scrollen müssten - wüßte ich auch keine andere Lösung als JS.

Mir fallen dazu zwei Lösungen ein, beide mit Javascript, Gernots Lösung, die relativ sauber scrollt, nur eventuell etwas verzögert oder Ebenen, die mittels
Javascript beim Scrollen ständig neu positioniert werden müssten, was ein tolles
Zappeln ergibt.
Zu dieser Variante hatte ich auch ein Tests gemacht, diese dann aber nicht
weiter verfolgt, weil mich das nicht so richtig überzeugte.

Eine andere Variante davon, bei der auch die Schriftgröße verändert werden kann.

Nun, das entspräche einer 'vertikalen' Zeitleiste. Ich möchte aber eine horizontale Zeitleiste ;-)!

Nein, das ist nur ein Beispiel, die Größe der Tabelle ist im Rahmen dessen, was
die Browser mitmachen egal.

Hier die selben Scripte, das selbe Frameset, nur mit einer anderen Tabelle.

Auf Wiederlesen
Detlef

[martin e.]

hallo :)

wie wäre es mit einer simplen grafik - ev. eingebettet als (i)frame, wo man dann nach rechts scrollen kann!? scrollen nach rechts ist gar nicht so ungewöhnlich im zusammenhang mit timelines.

evtl. etwas in dieser art: http://th03acc0132.swisswebaward.ch/DE/house/bilder/zeitleiste_bottom.gif

du könntest ja dann links auf die einzelnen elemente setzen.

gruss, martin e.

[Gunther]

Hallo Martin,

wie wäre es mit einer simplen grafik - ev. eingebettet als (i)frame,

nicht gut. Es geht mir ja auch um eine möglichst einfache Aktualisierbarkeit in der Zukunft, was bei einer Grafik ziemlich aufwendig ist, zumal wenn sie Links enthält, da ich dann jedesmal auch die Imagemap aktualisieren müsste.

Und Frames möchte ich auch nicht verwenden, was dank "overflow" auch IMHO nicht nötig ist.

wo man dann nach rechts scrollen kann!? scrollen nach rechts ist gar nicht so ungewöhnlich im zusammenhang mit timelines.

Scrollen muss man natürlich, da der Inhalt auf jeden Fall breiter ist, als jedes "normale" Browserfenster, was aber ja auch nicht schlimm ist.

evtl. etwas in dieser art: http://th03acc0132.swisswebaward.ch/DE/house/bilder/zeitleiste_bottom.gif

Schönes Beispiel. Allerdings eher für Fälle geeignet, wo ein Punkt auf einen einzigen bestimmten Zeitpunkt fällt.

In meinem Fall soll die Zeitleiste aber gerade zeitliche Zusammenhänge der jeweiligen Punkte (ca. 10) veranschaulichen, da jeder Punkt über einen Zeitraum geht, also von bis.

du könntest ja dann links auf die einzelnen elemente setzen.

ja, das habe ich vor.

Vielen Dank für deinen Beitrag und den Link!

gruss, martin e.

Gruß Gunther