Michael2005: Zeitlinie

Hallo

Ich bin auf der Suche nach einer Möglichkeit, eine Zeitlinie zu erstellen. Mit einer Zeitline mein ich folgendes:

Man hat diverse Angaben in etwa 5 Spalten einer Tabelle. Zuvorderst die Zeit. Dann kommen diverse Zeiten darunter, ähnlich einem Fahrplan:

16:34 Uhr  Zug xxx  von xxx  nach xxx
16:54 Uhr  Zug xxx  von xxx  nach xxx
usw...

Nun kommt das Problem, gibt es eine Möglichkeit, eine Linie zu setzen, wo die Zeit gerade ist. (Wäre es jetzt 16:45 Uhr, müsste im Beispiel die Linie zwischen 16:34 und 16:54 Uhr sein). Die Linie sollte mit der laufenden Uhr nach unten wandern. Wäre auch noch toll, wenn man die verstrichene Zeit in fetter Schrift darstellen kann, die noch nicht verstrichene Zeit normal; oder umgekehrt.

Wenn es möglich ist, wäre ich um einige Tipps froh!

Danke schon mal.
Michael

  1. Hi,

    Ich bin auf der Suche nach einer Möglichkeit, eine Zeitlinie zu erstellen.

    ich gehe davon aus, dass Du innerhalb eines HTML-Dokuments (o.ä.) meinst.

    Nun kommt das Problem, gibt es eine Möglichkeit, eine Linie zu setzen, wo die Zeit gerade ist. (Wäre es jetzt 16:45 Uhr, müsste im Beispiel die Linie zwischen 16:34 und 16:54 Uhr sein).

    Hierzu musst Du dafür sorgen, dass der Beginn (die obere Kante) der Tabellenzeile einen Bezug zur Zeit hat; sprich: dass die gesamte Zeilenhöhe der Zeitdifferenz entspricht. Nun hast Du einen proportionalen Faktor, der eine Minute in n px/em/cm/was immer umrechnen kann. Anschließend brauchst Du nur noch ein hinreichend günstig formatiertes Element absolut zu positionieren.

    Die Linie sollte mit der laufenden Uhr nach unten wandern.

    Derlei Dynamik ist nur mit clientseitigen Techniken wie JavaScript machbar.

    Wäre auch noch toll, wenn man die verstrichene Zeit in fetter Schrift darstellen kann, die noch nicht verstrichene Zeit normal; oder umgekehrt.

    Dies habe ich leider nicht verstanden.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hallo

      Danke schonmal für die Hilfe.

      Die Linie sollte mit der laufenden Uhr nach unten wandern.

      Derlei Dynamik ist nur mit clientseitigen Techniken wie JavaScript machbar.

      Welche Technik (php, html, oder Javascript) man dazu braucht weiss ich nicht. Aber ich wäre froh, wenn Du mir einige Tipps wie es in etwa aussehen sollte, geben könntest.

      Wäre auch noch toll, wenn man die verstrichene Zeit in fetter Schrift darstellen kann, die noch nicht verstrichene Zeit normal; oder umgekehrt.

      Dies habe ich leider nicht verstanden.

      Die Schrift oberhalb der Linie sollte Fett sein, die darunter normal. Wenn die Linie nach unten wandert wird jede uberschrittene Zeitangabe fett. Dies ist aber nur eine Idee und nicht unbedingt erforderlich.

      Gruss Michael

      1. Hi,

        Derlei Dynamik ist nur mit clientseitigen Techniken wie JavaScript machbar.
        Welche Technik (php, html, oder Javascript) man dazu braucht weiss ich nicht.

        serverseitige Techniken wie PHP helfen Dir höchstens bei der Initialisierung. HTML habe ich wie gesagt als Grundlage angesehen. JavaScript musst Du mindestens grundlegend verstehen, um das Problem lösen zu können. So solltest Du beispielsweise verstanden haben, dass JavaScript deaktiviert sein kann, und dessen Konsequenzen beurteilen können.

        Aber ich wäre froh, wenn Du mir einige Tipps wie es in etwa aussehen sollte, geben könntest.

        Du brauchst Timeouts und minimale DOM-Zugriffe.

        Die Schrift oberhalb der Linie sollte Fett sein, die darunter normal.

        Ach so. Dann musst Du herausfinden können, welche Tabellenzeilen Du als "oberhalb" definierst - ein für die verwendeten Techniken erkennbarer Zusammenhang ist nicht gegeben. Diese Ermittlung wird ein bisschen weniger trivial sein als der Rest; sie zu nutzen ist dann wieder leicht.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
  2. Michael2005,

    Nun kommt das Problem, gibt es eine Möglichkeit, eine Linie zu setzen, wo die Zeit gerade ist. (Wäre es jetzt 16:45 Uhr, müsste im Beispiel die Linie zwischen 16:34 und 16:54 Uhr sein). Die Linie sollte mit der laufenden Uhr nach unten wandern.

    ?? Also automatischer Reload der Seite?

    Wäre auch noch toll, wenn man die verstrichene Zeit in fetter Schrift darstellen kann, die noch nicht verstrichene Zeit normal; oder umgekehrt.

    Umgekehrt wäre wohl angebrachter.

    Das kannst du serverseitig (PHP, JSP, ...) oder clientseitig (JavaScript; wird dann bei User ohne JS nicht angezeigt) lösen.

    Serverseitig: Du ermittelst die aktuelle Zeit und extrahierst die Uhzeit im Format HH:MM. Den String kannst du mit dem aus der Zelle der ersten Spalte (<th>!) vergleichen. Ist die aktuelle Zeit kleiner, gibst du der Zeile die Klasse "Zukunft", andernfalls "Vergangenheit". Nun kannst du mit CSS die Tabellenzeilen unterschiedlich formatieren.

    Für die Linie zwischen Vergangenheit und Zukunft ließe sich sicher auch ein Selektor finden; ich bezweifle aber, dass der IE den interpretiert. Also besser an der Stelle eine Tabellenzeile mit einer Zelle über die gesamte Breite mit <hr> einfügen.

    Clientseitg sähe die Lösung entsprechend aus, allerdings müsste das Script wohl die ganze Tabelle generieren, damit es auch die Klassen zuweisen und die Linie einfügen kann. Das heißt doppelte Arbeit, weil im noscript-Bereich die Tabelle nochmal vorhanden sein muss.

    Gunnar

    --
    „Solang wir noch tanzen können
    und richtig echte Tränen flennen,
    ist noch alles offen,
    ist noch alles drin.“
    (Gundermann)
    1. ?? Also automatischer Reload der Seite?

      Ja

      Serverseitig: Du ermittelst die aktuelle Zeit und extrahierst die Uhzeit im Format HH:MM. Den String kannst du mit dem aus der Zelle der ersten Spalte (<th>!) vergleichen. Ist die aktuelle Zeit kleiner, gibst du der Zeile die Klasse "Zukunft", andernfalls "Vergangenheit". Nun kannst du mit CSS die Tabellenzeilen unterschiedlich formatieren.

      Danke für die Infos. Nur weiss ich leider nicht wie ich das ganze erstellen soll. PHP ist leider nicht meine Stärke!

    2. Ich hab mich jetzt ein paar Stunden mit dem PHP befasst und bin leider nicht weiter gekommen. Die Frage ist nun, welche Befehle muss ich einsetzen für die Zeit zu erhalten und wo/wie kann ich es mit der Tabelle vergleichen. Und wie mache ich es damit ich das ganze zum laufen krieg. Ich würde mich freuen, wenn Ihr mir helfen könntet, wie, wo und was ich in den Code einfügen muss!

      Serverseitig: Du ermittelst die aktuelle Zeit und extrahierst die Uhzeit im Format HH:MM. Den String kannst du mit dem aus der Zelle der ersten Spalte (<th>!) vergleichen. Ist die aktuelle Zeit kleiner, gibst du der Zeile die Klasse "Zukunft", andernfalls "Vergangenheit". Nun kannst du mit CSS die Tabellenzeilen unterschiedlich formatieren.

      Für die Linie zwischen Vergangenheit und Zukunft ließe sich sicher auch ein Selektor finden; ich bezweifle aber, dass der IE den interpretiert. Also besser an der Stelle eine Tabellenzeile mit einer Zelle über die gesamte Breite mit <hr> einfügen.

      Gruss Michael