Tabelle mit Leselupe

[colaholiker]

Hallo allerseits,

Ich möchte ein Projekt beginnen mit einer dynamischen Tabelle (1-20 Zeilen), deren mittlere Zeile beim scrollen:
- immer am gleichen Ort bleibt
- in der Größe hervorgehoben wird incl. der 2 angrenzenden Zeilen
- 'erstmal' umrandet ist (später: 'Glaseffekt: Lupe')
- auf die Hauptzeile möchte ich mit js zugreifen können.
Der Zugriff erfolgt dann durch 2 Eingabefelder (Bild).
Die Tabelle, Eingabefelder uam. befinden sich jeweils in <div>'s.

Am Ende soll es aussehen, als ob auf der Tabelle eine quadratische 'Leselupe' liegt, die ggf. über 3 Zeilen geht (wegen des 'dynamischen' Größen- Übergangs).
Stretch im Schriftbild möglich???

Es soll senkrecht gescrollt werden (ohne Scrollbalken, per Mausrad). Wenn <3 (bzw.5) Einträge existieren, will ich leere Dummyzeilen einsetzen, um das Bild zu erhalten und den 'echten' Eintrag in die Mitte zu bekommen.

Zum Verständnis hab ich mal eine Tabelle rein in HTML aufgebaut. Die Änderung der Größe erfolgt hier nur durch 'font-size'.
Das 'Umranden' der relevanten Zeile hat hier nicht ganz geklappt (css-Reste gibts auch) und der Scrollbalken ist noch sichtbar, aber es ist ja nur zum Andeuten wie ich es machen möchte.

Leider finde ich zu 'html table magnifier' so garnichts im Netz. Die üblichen Lupenprojekte beziehen sich meist auf Bilder.
Falls jemand Seiten mit Beispielen für Tabellen kennt (oder bessere Suchtexte) würde mir das evtl. auch helfen, insbesondere für das 'Lupenbild' später.

* Der erste Schritt, den ich hier zunächst klären möchte ist, die mittlere Zeile stabil zu halten um dort (und je eine Zeile darüber/darunter) mein Styling zu setzen.

Ist es für diese Stabilität besser, den Zeilentext durch die Tabelle zu schieben, oder die Tabelle 'oldschool' zu scrollen und die mittleren Zeilen 'dynamisch' zu formatieren?

TIA,
c.

 

[Oliver77]

Vielleicht geht:

.selector {
transition:transform 0.4s;   
}
.selector:hover {
transform:scale(1.2);   
}

 

[colaholiker]

Hi Oliver77,
Was Du mit 'transition' meinst hatte ich mir ungefähr mit 'opaque' vorgestellt. Ist aber ein guter Ansatz fürs Styling. Hovern werde ich wohl vermeiden wie ich das bisher sehe.

Ja, mit 'opaque' einen Kasten, Background: grey als Glas-Stab (Lupe) über die vergrößerten Zeilen zu legen. Mit Aufhellung in der Mitte oder so. Das kommt aber als Letztes.

Nach etwas grübeln bin ich jetzt drauf gekommen, pro Zeile eine extra Tabelle zu erzeugen und die Daten mit js reinzuschreiben. Das macht das css wesentlich einfacher, und die mittlere 'Zeile' ist nicht vom scrollen betroffen (echtes Scrollen entfällt ja!).

Problem wird werden, das Durchreichen der Daten (js: Schleife?) mit dem Mausrad hinzubekommen. Sowas soll aber machbar sein, beim Scrollen in meiner letzten Tabelle geht das Mausrad auch, aber automatisch.

 

[colaholiker]

Jetzt wo ich mal so eine Lupe im Netz gesucht habe glaube ich, daß sich kaum jemand mein Ziel vorstellen kann. Hab nur das hier gefunden.
Also wirklich: ein 'Balken'. Solche Lupe kenne ich aus Glas gebaut.

Hab einzelne Tabellen mit Fake-Text gebaut und etwas gestylt:

Die Spalten passe ich morgen an.
Es hat sich gezeigt, daß ich für die Vergrößerung sehr schmale Schrift finden muß.
Das Lupenbild, leider kein Foto im Netz dazu,sollte die Schrift auch nur in die Vertikale strecken.
'font-stretch: condensed;' probiert: bringt nur wenig.
Soch. Feierabend heute...

 

[Sempervivum]

Guten Morgen @colaholiker !
Über deinem Bild in #4 habe ich einen Moment gerätselt aber ich denke, jetzt verstehe ich, was Du vor hast.
Solche Lupeneffekte werden meistens auf Bilder angewendet und mit den Begriffen "magnifier image" findest Du Beispiele, z. B. dieses:

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Dabei wird das Bild verdoppelt und die Lupenversion vergrößert.
Das Verdoppeln kannst Du erreichen, indem Du die Tabelle klonst. Dann mit scaleY vergrößern und in einen Container legen, der mit "overflow:hidden;" die Sichtbarkeit begrenzt. Dann musst Du noch abhängig von der Mausposition die Position des Containers und der geklonten, vergrößerten Tabelle anpassen.

 

[colaholiker]

Hi Sempervivum,
Dank für den Link, kannte ich aber schon. Und so wollte ich es nicht haben.
Mit

Das Lupenbild, leider kein Foto im Netz dazu

meinte ich kein Foto einer Lupe, sondern das vergrößerte Aussehen von Schrift durch eine bestimmte Lupe, zu deren Typ Du ebenfalls in #4 einen Link findest.
So eine Lupe liegt fest auf einer ganzen Buchzeile auf und wird dann auf dem Papier nach unten gezogen.

Das stelle ich für die Bauzeit (später besser) mit dem Kasten in der Mitte und den halbgroßen Zeilen darüber und drunter dar.
Ich muß noch viel mit diversen Schriftarten probieren, damit das Ganze nicht zu breit wird.
Im Bild stimmen die Proportionen schon einigermaßen.

Manche Dinge fallen erst während des Bauens auf, wie z.B. daß ich unter der Lupe wohl weißen Background brauche, damit eine opak-graue Lupe (Glas-Look) gut wirkt. Ein grau-weißer Farbverlauf zur Mitte hin...

Momentan hab ich gute Beispiele für die Mausradnutzung gefunden (um die Daten durch die Tabellen zu lotsen). Das gehe ich die Tage an.
c.