Fandom


  • Ich frag mich ob man zum Beispiel Überschriften oder einfach normale Zeilen/Spalten mit verschieben lassen wenn man weiter runter bzw. weiter rechts scrollt mit verschieben lassen kann. Da ich bei einer meiner Seiten(Link) wirklich sehr lange Zeilen/Spalten habe und es eh schon relative gekürzt habe trotzdem noch sehr große Tabelle habe wäre es sehr hilfreich wenn die gewünscht Zeilen/Spalten sich mit verschieben würden, um eine bessere Übersicht zu bekommen. Den wie ihr vielleicht sehen könnt muss man wirklich sehr oft vor und zurück scrollen, aber das ist wirklich lässtig. Ich habe es auch schon mit Bildern sehr gut hinbekommen es ein wenig übersichtlicher zumachen, aber das hat nur für die Zeilen geholfen. Aber nicht für die Spalten. Daher würde ich mich fröhen wenn ihr mir sagen würdet ob das möglich wäre. Schon mal ein großes Danke an euch!

      Lade Editor…
    • Also gibt es eine Möglichkeit. Ich frag nur noch mal nach, weil vielleicht es überlesen wurde.

        Lade Editor…
    • Mir ist da keine (einfache und mit sortable kompatible) Lösung bekannt.

        Lade Editor…
    • Meine Recherchen bei Google haben ergeben, dass sowas mit JavaScript (kurz: JS) möglich wäre, jedoch wurde JS vor kurzem von Wikia erstmal deaktiviert.

      Ich hab mir was mit CSS überlegt, das natürlich schön hätte werden können, doch leider spielt hier der Scrollbalken nicht mit. (Man kann sie links setzen, man kann sie rechts setzen, doch sie fließt nicht beim horizontalen scrollen mit.) Wenn das weniger ein Problem für dich ist, weil du ein Scrollrad hast, kann vielleicht so hier: (Bitte beachte, dass ich jetzt nicht pixelgenau das Testobjekt erstellt habe. Wenn hier und da der farbige Testhintergrund durch lugt, dann hilft das sicher beim kalibrieren etc. Es soll halt nur das Prinzip verdeutlicht werden)

      Bild Drache
      (Name im Wiki)
      Ab
      Level
      Such-
      zeit
      Brut-
      zeit
      25px/h 25px Insgesamt 25px/h 25px Insgesamt 30px Kampf Titanflügler
      Wert Art Kosten Dauer Chance Bild
      Riesenhafter Alptraum 100 4 1m 2m 282.000 2.961.000 211.500 2.220.750 10h30m 392 2.800.000 1h30m Gut
      Gronckel 150 5 2m 4m 211.500 2.220.750 282.000 2.961.000 10h30m 464 1.800.000 1h30m Gut
      Schrecklicher Schrecken 150 6 3m 6m 267.900 1.406.475 267.900 1.406.475 5h15m 443 2.100.000 1h5m Hervorragend
      Glutkessel 200 7 30m 1h 324.300 3.405.150 / / 10h30m 412 2.340.000 1h45m Mittel
      Im Rauch verschwindender Qualmdrache 200 9 30m 1h15m 155.100 3.257.100 155.100 3.257.100 21h 491 2.160.000 1h40m Mittel
      Flüsternder Tod 200 10 30m 1h30m / / 324.300 3.405.150 10h30m 488 2.340.000 1h45m Mittel
      Tödlicher Nadder 240 12 1h 2h 564.000 2.961.000 564.000 2.961.000 5h15m 515 2.880.000 1h55m Gering
      Humpelnder Grunzer 300 13 1h 2h30m 169.200 4.399.200 155.100 4.045.500 1T2h 536 3.600.000 2h15m Sehr gering
      Schnappende Falle 380 16 1h30m 3h 239.700 4.034.950 239.700 4.034.950 16h50m 512 2.880.000 2h Gering
      Schnaffelzahn
      (Reißzahn)
      430 18 1h30m 4h 155.100 4.045.500 169.200 4.399.200 1T2h 536 3.600.000 2h15m Sehr gering
      Wechselflügler 450 19 2h 7h30m 366.600 4.613.050 141.000 1.774.250 12h35m 563 3.600.000 2h15m Sehr gering
      Schockrachen 450 21 2h 10h 846.000 4.441.500 282.000 1.480.500 5h15m 504 3.960.000 2h24m Sehr gering
      Hackadu 550 22 3h 11h 282.000 1.480.500 846.000 4.441.500 5h15m 601 3.960.000 2h15m Sehr gering
      Holzklau 550 24 3h 12h 141.000 1.774.250 366.600 4.613.050 12h35m 598 4.200.000 2h15m Sehr gering
      Wahnsinniger Zipper 750 25 4h 15h 253.800 4.674.150 253.800 4.674.150 18h25m 544 4.500.000 2h40m Sehr gering
      Donnertrommler 750 28 4h 17h 437.100 5.281.625 / / 12h5m 632 5.400.000 3h Sehr gering
      Taifumerang 750 30 5h 20h / / 437.100 5.281.625 12h5m 532 5.400.000 3h Sehr gering
      Regenschneider 1.000 31 5h 1d4h 775.500 8.142.750 775.500 8.142.750 10h30m 707 7.000.000 3h45m Sehr gering
      Glattstreicher 1.000 32 6h 1d 225.600 5.865.600 183.300 4.765.800 1T2h 633 6.020.000 3h10m Sehr gering
      Leuchtender Fluch 1.100 34 6h 1d4h 507.600 6.937.200 282.000 3.854.000 13h40m 707 6.480.000 3h25m Sehr gering
      Donnerpolter 1.100 35 8h 1d 183.300 4.765.800 225.600 5.865.600 1T2h 752 5.940.000 3h10m Sehr gering
      Funkenhüstle
      (Flammenrülpser)
      1.100 36 8h 1d4h 282.000 3.854.000 507.600 6.937.200 13h40m 704 6.480.000 3h25m Sehr gering
      Krallenkrabbler 1.400 37 10h 1d12h 493.500 9.088.625 493.500 9.088.625 18h25m 826 8.680.000 4h35m Sehr gering
      Knochenräuber 1.400 40 10h 1d12h  1.269.000 7.931.250 1.269.000 7.931.250 6h15m 693 8.400.000 4h30m Sehr gering
      Rumpelhorn
      (Grollhorn)
      1.400 42 11h 1d12h 310.200 9.616.200 310.200 9.616.200 1T7h 862 9.000.000 4h30m Sehr gering
      Dorngrat 1.500 44 12h 1T12h 1.128.000 8.272.000 1.128.000 8.272.000 7h20m 898 8.280.000 4h12m Sehr gering
      Sandgeist 1.700 46 12h 2d 564.000 11.844.000 564.000 11.844.000 21h 946 12.600.000 6h Sehr gering
      Sturmschneider
      (Sturmbrecher)
      1.700 49 14h 2d / / 606.300 12.732.300 21h 834 14.400.000 6h45m Sehr gering
      Skrill 1.700 50 14h 2d 606.300 12.732.300 / / 21h 994 14.400.000 6h45m Sehr gering
      Schrecken der Meere 2.000 52 16h 3d 2.256.000 8.272.000 282.000 1.034.000 3h40m 874 15.480.000 7h10m Sehr gering
      Süßer Tod 2.000 54 16h 3d 282.000 1.034.000 2.256.000 8.272.000 3h40m 1.040 13.400.000 7h10m Sehr gering
      Flutsegler 2.400 58 18h 4d 394.800 16.581.600 / / 1T18h 1.210 19.800.000 9h Sehr gering
      Feuerwurm 2.400 60 18h 4d / / 394.800 16.581.600 1T18h 1.015 Sehr gering
      Sägezahn 2.600 64 19h 4d8h 1.833.000 6.721.000 1.833.000 6.721.000 3h40m 1.138 20.700.000 9h15m Sehr gering
      Wollgeheul 2.600 65 19h 4d8h 394.800 14.212.800 394.800 14.212.800 1T12h 1.186 20.700.000 9h15m Sehr gering
      Kältegronckel 2.600 66 20h 4d 634.500 15.016.500 634.500 15.016.500 23h40m 1.136 21.600.000 9h45m Sehr gering
      Tiefseespalter 2.650 69 20h 4d16h 2.256.000 10.528.000 282.000 1.316.000 4h40m 1.184 18.900.000 10h5m Sehr gering
      Greifender Gründling 2.200 73 22h ? 282.000 1.316.000 2.256.000 10.528.000 4h40m 1.186 22.500.000 10h Sehr gering
      Schwertstehler 2.650 75 1T ? 705.000 13.920.000 705.000 13.920.000 1T 1.015 23.400.000 10h30m Sehr gering
      Windstürmer 2.750 76 1T 5d 2.171.400 12.485.550 / / 5h45m 1.196 21.000.000 11h15m Sehr gering
      Schneegeist 2.750 77 1T1h ? 648.600 13.620.600 648.600 13.620.600 21h 1.664 25.200.000 11h15m Sehr gering
      Gleitgesang 2.750 79 1T ? 648.600 13.620.600 648.600 13.620.600 21h 1.397 Sehr gering
      Nachtschrecken 2.750 79 1T3h ? 648.600 13.620.600 648.600 13.620.600 21h 1.665 25.200.000 11h15m Sehr gering
      Donnerklaue 2.750 80 1T4h ? / / 2.171.400 12.485.550 5h45m 1.424 21.000.000 11h15m Sehr gering

      Funktionsweise: Ich habe einfach einen DIV-Box-Container hergenommen und ihn auf "position:relative" gesetzt. In diesen Container habe ich zwei DIV-Boxen platziert mit Position:absolute. Dadurch werden die Boxen genau so gesetzt, wie sie sind.
      Dann habe ich deine Tabelle genommen und aus EINER Tabelle ZWEI gemacht. Den ersten Teil (die Überschriften) habe ich oben rein gesetzt. Den zweiten Teil (bewglicher Content) in die untere DIV-Box. Die untere DIV-Box hat eine maximale Höhe drin und eine scroll-Entscheidung, dass wenn der Inhalt diese Höhe überschreitet, dass dann gescrollt wird (bzw. die Scrollleiste zur Verfügung gestellt wird). Wie gesagt: Das blöde ist, dass die Scrollleiste nach dem Seitenaufbau fix ist und nicht mit dem Scrollen des Gesamtcontainers mitfließt. (Hierfür bräuchte man dann das JavaScript, das die breite der Scrollbox variiert, sodass sie mit der Scrollleiste mitwächst oder schrumpft, wodurch der Eindruck entsteht, dass sie immer rechts ist).
      Ich hab dann noch versucht mit direction:ltr; die Leiste nach links zu ziehen, ist aber auch nicht die schönste Lösung.

      Hoffe es hilft ein bisschen. Ansonsten Problem an Andrea (Spezial:Kontakt) weitergeben. Sie kann es dann an die Entwickler weiterreichen, die das JavaScript schreiben und dir dann zur Verfügung stellen können. (So hatte ich das jetzt zumindest verstanden).

      Viel Erfolg.


      Edit: Dir ist sicher aufgefallen, dass die Spaltenbreite jetzt nicht mehr genau stimmt. Das liegt daran, dass Text zusammen gedrückt werden kann, damit weniger Platz "verschwendet" wird. Hier musst du ggf. (zumindest für jeweils die erste Spalte) die Breiten festlegen, damit beide Tabellen gleich aussehen. Ggf. herumexperimentieren :)


      Edit: das direction:ltr; scheint auch einen Einfluss auf die Anordnung der Tabelle zu haben, sodass diese hier rückwärts ist. Also sprich: du kannst den Scrollbalken nur rechts und damit außerhalb der Sichtweite des Users haben. Er könnte denken, dass diese Tabelle besonders kurz ist. Da kann man mit Pseudo-Objekten natürlich unten und rechts noch Pfeile oder ähnliches drankleben (glaube ich) aber das kann ein anderer dran programmieren ;D

        Lade Editor…
    • OK... Naja ich hab jetzt fast garnicht verstanden war zu viel... von allen Fachausdrücken. Aber schon mal danke

        Lade Editor…
    • Krass ... deine Tabelle sprengt die Menge an Zeichen, die in einem Kommentar verwendet werden können. Deshalb mal kurz noch hier weiter:


      Der Bequemlichkeit halber... hier der Code:

      <div style="background-color: grey; position: relative; height:260px; overflow-x: scroll; overflow-y: hidden;">
      <div style="background-color: red; position:absolute; top: 0; height: 100px; ">
      {| Tabelle mit Überschriften |}
      </div>
      <div style="background-color: green; position:absolute; top: 100px; height: 200px; overflow-x: scroll; ">
      {| Tabelle mit Werten |}
      </div>
      </div>

      (Habe das direction:rtl; mal rausgelassen. Wirkt besser ohne, jedoch muss man dann wissen, dass es nach unten gescrollt werden kann). Die "Tabellen" müssen entsprechend gefüllt werden. Die background-color"-Werte brauchst du natürlich nicht. Die Höhen der DIV-Elemente kannst du selbst ändern. Wenn die Höhe des Headders sich ändert, dann musst du die TOP-Eigenschaft vom zweiten ändern (sonst überlappt es ein Teil vom Headder). Insgesammt musst du am Ende beide Höhen der inneren DIV-Elemente addieren und etwas dazu geben (ca. 20 Pixel) für die Scrollleiste unten.


      Wie gesagt: Wikia hat momentan seine Programmier-Spendierhosen an (*Vermutung*). Vielleicht da mal nachfragen, ob sie die sortable-Tabelle um eine Eigenschaft erweitern können, wie "headder" oder ähnliches. Es gibt ja den "footer", der verhindert, dass gewisse Zeilen mit wegsortiert werden.

      Alternative Lösung: Du wiederholst alle ... sagen wir 10 Zeilen ... deinen Headder. Dieser wird auch nicht mitsortiert und du hast alle paar Zeilen deinen Headder zurück. (Dies wäre übrigens die - aus meiner Sicht - leichteste Lösung zur Zeit.

        Lade Editor…
    • ach lass ich es halt einfach so. Der Grund ist das die Seite eh schon so viele Zeichen/Daten hat und sonst vielleicht überhaupts nicht mehr geht. Und naja... dann muss man halt mehr suchen. Aber Danke für die Mühe.

        Lade Editor…
    • Ein Fandom-Benutzer
        Lade Editor…
Diesem Beitrag zustimmen
Beitrag zugestimmt!
Leute, die dieser Nachricht zustimmten anzeigen
Nutzung von Community-Inhalten gemäß CC-BY-SA , sofern nicht anders angegeben.