Wie setzt man den Scrollbar in einer Scrollable Ta

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich habe ein Problem mit meiner schon funktionierenden scrollbaren Tabelle.
Sie stellt einen Wochenplaner dar mit 7 Reihen ( Wochentage ) und dynamisch generierten Zeilen ( Uhrzeit ).
So beginnen also die Zeilen bei 0:00h und enden bei 24:00h.
Jetzt ist das natürlich nicht bei jedem Sinnvoll, die Ansicht bei 0:00h zu beginnen und daher gibt es in der Datenbank ein Feld „TimeShift“, welches eben dies bereinigen soll.
Als Beispiel:
Das Feld „TimeShift“ liefert den Wert „480“ ( Minuten ) dann sollte die Ansicht ( also der Scrollbar ) bei laden der Seite zu dieser Uhrzeit scrollen bzw. dort starten ( 8:00h ).
Wie bewerkstellige ich das am besten, dass es auf dem IE funktioniert?
Hier hab ich 2 jpgs von dem Wochenplaner fürs bessere Verständnis:
Der erste zeigt die momentane Ausgangsposition ( 0:00h)
[IMG]http://img339.imageshack.us/img339/6415/scheduler0.j…
und der zweite die gewünschte Ausgangsposition bei einem „TimeShift“ Wert von 480 --> 8:00h
[IMG]http://img245.imageshack.us/img245/8079/scheduler8.j…

Ich hoffe ihr könnt mir weiter helfen.

#2

Nochmal die Links, weil [IMG] in eurem Forum nicht funktioniert.

Start bei 0:00h
http://img339.imageshack.us/img339/6415/scheduler0.jpg

Start bei 8:00h
http://img245.imageshack.us/img245/8079/scheduler8.jpg

#3

Moin,

normalerweise setzt man Scrollbalken mit der Eigenschaft „overflow“. Z.B. mit fester Breite in einem beliebigen Element und „overflow:auto“. Dann kommen Scrollbalken, sobald der Inhalt zu groß ist.

Bei Tabellen löst man das normalerweise, indem man einen um die zu scrollenden Zellen definiert, und diesem besagte Eigenschaft und eine feste Größe gibt. Ich habe in Erinnerung, dass der IE (vermutlich die 6er Version) dazu aber leider nicht in der Lage ist.

Grüße,
-Efchen

#4

Hey ho Efchen,

danke für deine schnelle Antwort.
Ich hab wie bereits vorhin erwähnt, das automatische erzeugen des Scrollbars umgesetzt. Dieser funktioniert auch wie gesagt einwandfrei.
Jedoch soll der Scrollbar eben nicht beim laden der Seite, ganz oben stehen (außer der „TimeShift“ Wert ist 0), sondern ich möchte, dass eine bestimmte Zeile als oberste Zeile in der Ansicht darstellt wird, welches eben von dem „TimeShift“ Wert abhängig ist.
In den zwei Bildern von mir, hab ich es ja dargestellt und man sieht rechts den scrollbar sowie die erste Zeile(0:00h im ersten und 8:00h im zweiten Bild).
Und du hast recht setzen nicht alle IEs richtig bzw. gar nicht um, aber das Problem hab ich ja wie gesagt, bereits gelöst.

#5

Ach so, Du willst an eine bestimmte Position springen?

Das geht natürlich mit HTML&CSS nicht, aber Du könntest mal JavaScript probieren. Ich hab das aber selber nie benutzt, daher kann ich Dir nicht sagen, ob das den gewünschten Effekt hat:

http://de.selfhtml.org/javascript/objekte/window.htm…

#6

und wie siehts mit ankern aus ??

#7

Hiho
Also ich bezweifle dass sich mit window.scrollTo(x,y) in einer TABELLE mit scrollbalken scrollen lässt.
Ich habe das problem inzwischen anders umgesetzt.
Ich gebe den Zeilen/Reihen, welche durch den TimeShift betrag übersprungen werden sollen einen speziellen Klassennamen --> class: HiddenRow und gebe in der CSS dann an:
.HiddenRow
{
display: none;
}

Nun werden die Zeilen/Reihen über dem TimeShift betrag erst gar nicht dargestellt und der Scrollbar ist automatisch an der gewünschten Stelle. Falls ein Benutzer evtl. doch die Uhrzeiten über dem TimeShift-Wert sehen möchte, kann er das durch einen Button ermöglichen, welcher einfach die CSS display eigenschaft ändert.

Wie sagt man so schön?
Alle Wege führen nach Rom :wink:
Danke für eure Antworten/Vorschläge

#8

und wie siehts mit ankern aus ??

hast du evtl. ein Beispiel dazu?
Ich hab das anfangs damit probiert, hatte jedoch nicht den gewünschten Erfolg damit.

#9

Hast Du auch daran gedacht, dass sich jemand das ausdrucken wollen könnte? Da es da keinen Scrollbalken auf Papier gibt, sollten alle Elemente angezeigt werden und das werden sie mit display:none nicht. Mach die entsprechende Änderung für media=„print“.

Grüße,
-Efchen

#10

Gibt eine extra Ansicht dafür, welche genau das was du schreibst umsetzt, trotzdem danke :wink:

#11

Was meinst Du mit „Ansicht“?

Du setzt das in Dein Stylesheet für „media=print“ (als Attribut im Link-Tag).