Roadster: Menü-Box mit individuellen Scroll-Buttons - Ideen?

0 48

Menü-Box mit individuellen Scroll-Buttons - Ideen?

Roadster
  • css
  1. 0
    Matthias Apsel
    1. 0
      Roadster
      1. 0
        Auge
        1. 0
          Roadster
        2. 1
          Camping_RIDER
      2. 0
        ChrisB
        1. 0
          Camping_RIDER
          1. 0
            Roadster
  2. 0

    Grundsätzliches zur Steuerung des Scrollens von Inhalten

    Roadster
    1. 0
      Matthias Apsel
      1. 0
        Roadster
  3. 2
    ChrisB
    • meinung
    1. 0
      Roadster
      1. 0
        JürgenB
        1. 0
          Roadster
          1. 0
            JürgenB
            1. 0
              Roadster
              1. 1
                Gunnar Bittersmann
  4. 0

    Individuelle Scroll-Leiste oder designverträgliche Alternative?

    Roadster
    • design/layout
    1. 2
      Klawischnigg
      1. 0
        Roadster
        1. 0
          Klawischnigg
          1. 0
            Der Martin
            1. 0
              Gunnar Bittersmann
      2. 2
        Gunnar Bittersmann
        1. 0
          Klawischnigg
          1. 0
            Gunnar Bittersmann
      3. 0
        Stefanie M.
    2. 0
      Auge
      1. 0
        Gunnar Bittersmann
        1. 0
          Auge
          1. 0
            Der Martin
            1. 0
              Auge
            2. 0
              MudGuard
    3. 0
      Camping_RIDER
      1. 0
        Roadster
        1. 0
          Matthias Apsel
          1. 0
            Roadster
            1. 0
              Camping_RIDER
              1. 0
                Roadster
                1. 0
                  Camping_RIDER
                  1. 0
                    Roadster
                    1. 0
                      Camping_RIDER
                      1. 0
                        Roadster
  5. 0
    Gunnar Bittersmann
    1. 0
      Auge
  6. 0
    Matthias Apsel

Seid gegrüßt!

Ich hätte mal eine Frage zum Thema Navigations-Menü, denn die Seiten-Navigation für mein Projekt gestaltet sich doch schwerer als gedacht.

Hauptgrund dafür ist, dass durch den Inhalt der Seite bedingt, es sehr viele Unter-Ebenen gibt, beziehungsweise die jeweiligen Seiten stark verschachtelt sind (und leider auch sein müssen).

Zu Anfang hatte ich ein recht schickes Drop-Down-Menü erstellt, aber wie ihr euch sicher vorstellen könnt, leidet hierbei, so etwa ab der dritten Unter-Ebene, die Übersichtlichkeit doch erheblich, und wenn man bedenkt, dass auf meiner Seite bis zu sieben oder acht Unterebenen (auf denen sich wiederum bis zu einem Duzend Ebenen-Elemente befinden) zwingend über das Navigations-Menü zu erreichen sein müssen, ist klar, dass das keine Option ist.

Andererseits will ich aber auch vermeiden, irgendwo am Rand der Seite einen ewig langen, statischen Navigations-Baum anzuzeigen, da dies meiner Bestrebung, den sehr komplexen Inhalt der Seite auf möglichst einfache und übersichtliche Weise darzustellen und den Besucher der Seite (beziehungsweise den Benutzer des Programms) nicht mit all zuviel Text zu erschlagen, freilich widersprichen würde.

Das Ziel sollte daher sein, die Seiten-Navigation in einer Box von überschaubarer Größe unterzubringen, was jedoch unvermeidlich dazu führt, dass der Inhalt der Box gescrollt werden muss, unabhängig davon, ob ich alle Navigations-Ebenen von Anfang an anzeige, oder ob ich die Unter-Ebenen im Sinne eines Drop-Down-Menüs zunächst ausblende.

Dabei würde ich aber gerne auf eine klassische Scroll-Leiste an der Seite der Box verzichten und statt dessen lieber am oberen und unteren Rand der Box, beziehungsweise des Rahmens, indem die Navigations-Punkte aufgelistet sind, selbst gestaltete Buttons anbringen, die wenn sie gehovert werden, die Liste mit den Navigations-Punkten hoch und runter scrollen.

Also in etwa so:

______________________________________
  /  __________________________________  \  |  /                                  \  |
 | |   button:hover {scroll list up}    | |
 | |____________________________________| |                  /\  |  |----------------------------------|  |                 /__\  |  |  > EBENE 1 PUNKT 1               |  |
 |  |----------------------------------|  |                  ||
 |  |  > > Ebene 2 Punkt 1             |  |                  ||
 |  |----------------------------------|  |                  ||
 |  |  > > Ebene 2 Punkt 2             |  |                  ||
 |  |----------------------------------|  |                  ||
 |  |  > > > ebene 3 punkt 1           |  |                  ||
 |  |----------------------------------|  |                  ||
 |  |  > > > ebene 3 punkt 2           |  |                  ||
 |  |----------------------------------|  |                  ||
 |  |  > EBENE 1 PUNKT 2               |  |                  ||
 |  |----------------------------------|  |                  ||
 |  |  > EBENE 1 PUNKT 3 (etc.)        |  |                  ||
 |  |__________________________________|  |                  __
 | |                                    | |                 \  /
 | |   button:hover {scroll list down}  | |                  /
 |  \_________________________________/  |
  \
_____________________________________/

Bei der Umsetzung dieses Vorhabens, stehe ich allerdings irgendwie auf dem Schlauch! - Und auch meine Recherche zu dem Thema hat bislang nicht wirklich weitergeholfen.

Vielleicht hat jemand von euch einen passenden Link oder ein paar Ideen dazu. - Ich wäre für jede Hilfe dankbar!

Roadster

  1. Om nah hoo pez nyeetz, Roadster!

    Dass man den Nutzern ihre gewohnten Bedienelemente lassen sollte, wurde hier schon oft und zu recht als best praxis dargestellt.

    Vielleicht findest du unter dem Suchbegriff „megamenu“ passende Anregungen.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Wien und Wiener.

    1. Om nah hoo pez nyeetz, Roadster!

      Hallo Matthias!

      Vielleicht findest du unter dem Suchbegriff „megamenu“ passende Anregungen.

      Danke für den Tip! - Werde der Sache gleich mal nachgehen.

      Dass man den Nutzern ihre gewohnten Bedienelemente lassen sollte, wurde hier schon oft und zu recht als best praxis dargestellt.

      Da hast du sicher recht, aber ich denke nicht, dass die Verwendung von entsprechend kenntlich gemachten, großen Hover-Buttons oberhalb und unterhalb der Liste im Vergleich zu einer seitlichen Scroll-Leiste für den Benutzer so ungewohnt bzw. überraschend wäre, dass dieser dadurch bei der Bedienung beeinträchtigt würde, - zumal ich diese "Art des Scrollens" persönlich als wesentlich angenehmer empfinde, als durch clicken und ziehen an einer seitlichen Scroll-Leiste herumzuwurschteln, - oder meinst du nicht?

      Und dass das Menü überhaupt gescrollt werden muss, ist wie gesagt schlicht dem Umstand geschuldet, dass es so viele und obendrein verschachtelte Unter-Seiten gibt, die jedoch alle über das Navigations-Menü erreicht werden müssen. - Ob da (ohne Drop-down-Effekt) ein drei Bildschirmseiten langer Navigations-Baum bedienungsfreundlicher wäre, wage ich mal zu bezweifeln.

      Also, danke nochmal für den Tip!

      Beste Grüße,

      Roadster.

      1. Hallo

        Dass man den Nutzern ihre gewohnten Bedienelemente lassen sollte, wurde hier schon oft und zu recht als best praxis dargestellt.

        Da hast du sicher recht, aber ich denke nicht, dass die Verwendung von entsprechend kenntlich gemachten, großen Hover-Buttons oberhalb und unterhalb der Liste im Vergleich zu einer seitlichen Scroll-Leiste für den Benutzer so ungewohnt bzw. überraschend wäre, dass dieser dadurch bei der Bedienung beeinträchtigt würde, …

        Naja, du musst für das Scrollen etwas nachbauen, was es in jedem Betriebssystem schon gibt. natürlich gibt es da meist auch etwas zu deinen Buttons am oberen und unteren Ende des angezeigten Bereichs vergleichbares. Die Listen z.B. in Startmenüs werden ja auch gerne mal sehr umfangreich. Von daher sollte das Bedienkonzept den allermeisten bekannt sein. Ob es genauso natürlich zu bedienen ist, wie die analoge Betriebsystemfunktion, sei erstmal dahingestellt.

        … - zumal ich diese "Art des Scrollens" persönlich als wesentlich angenehmer empfinde, als durch clicken und ziehen an einer seitlichen Scroll-Leiste herumzuwurschteln, - oder meinst du nicht?

        Das ist *dein* Empfinden. Bitte schließe deshalb nicht darauf, dass das allgemein gilt, auch wenn das von Fall zu Fall zutreffen mag. Schließlich macht man seine eigene Webseite nicht für sich selbst, sondern für seine Besucher.

        Tschö, Auge

        --
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
        Terry Pratchett, "Wachen! Wachen!"
        ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
        Veranstaltungsdatenbank Vdb 0.3
        1. Hallo

          Hallo Auge

          ... Ob es genauso natürlich zu bedienen ist, wie die analoge Betriebsystemfunktion, sei erstmal dahingestellt.

          … - zumal ich diese "Art des Scrollens" persönlich als wesentlich angenehmer empfinde, als durch clicken und ziehen an einer seitlichen Scroll-Leiste herumzuwurschteln, - oder meinst du nicht?

          Das ist *dein* Empfinden. Bitte schließe deshalb nicht darauf, dass das allgemein gilt, auch wenn das von Fall zu Fall zutreffen mag. Schließlich macht man seine eigene Webseite nicht für sich selbst, sondern für seine Besucher.

          Gebe dir da grundsätzlich vollkommen recht!

          Ich denke, es kommt dabei aber auch sehr darauf an, wie die Sache umgesetzt ist.

          Die Hover:Buttons haben zwar den Vorteil, dass vom Benutzer weniger "action" gefordert ist, aber natürlich gibt es diesen Komfort nur um den Preis, dass der Benutzer in der Bedienung weniger "frei" ist, bzw. die Bedienung weniger präzise ist, - bzw. der ganze Vorgang eventuell ein wenig langsamer abläuft, als mit klassischer Scroll-Leiste.

          Der Grund, warum ich überhaupt dazu tendiere ist halt der, dass eine Scroll-Leiste auf meiner Seite ein wenig wie ein Fremdkörper wirken würde, da ich mein Design so angelegt habe, dass - außerhalb des Navigations-Menüs - Scroll-Leisten eigentlich überflüssig sind.

          (Da läuft im Grunde das meiste über hover/trigger und in ihrer Größe variable, animierte Bildschirm-Elemente - man könnte es etwas großspurig als "minimalistisches liquid-Design" bezeichnen, bei dem die sichtbaren Bedienelemente und der jeweils angezeigte Inhalt maximal reduziert sind, um den komplexen Inhalt auf das Wesentlichste herunterzubrechen und davon optisch auch möglichst wenig abzulenken...)

          Wenn ich die Möglichkeit habe, eine seitliche Scroll-Leiste selbst zu designen und sie derart in mein Gesamt-Design-Konzept einzufügen, dass dabei kein stilistischer Bruch entsteht, würde ich das den Scroll-Buttons vielleicht sogar vorziehen! (Wie das zu bewerkstelligen wäre, wüsste ich im Moment aber auch noch nicht...)

          Der Idealfall wäre natürlich, wenn man beide Bedienarten auf optisch unaufdringliche und bedientechnisch intuitive Art und Weise kombinieren könnte...
          Also falls da jemand ein plastisches Beispiel verlinken kann, - dann nur her damit! :-)

          Naja, mal sehen,

          soweit,

          Dank und Gruß,

          Roadster.

        2. Aloha ;)

          Naja, du musst für das Scrollen etwas nachbauen, was es in jedem Betriebssystem schon gibt. natürlich gibt es da meist auch etwas zu deinen Buttons am oberen und unteren Ende des angezeigten Bereichs vergleichbares.

          Nicht nur das, du verlierst auch Funktionalität. Du kannst zwar Buttons intuitiv verständlich nachbauen, aber die Funktionalität eines Scrollrads oder einer Scroll-Geste für Touchscreens wirst du nicht nachbauen können. Und schon ärgert sich dein User, dass er die gewohnten Methoden bei dir nicht nutzen kann und stattdessen auf die blöden Buttons klicken muss, die er im Betriebssystem normal nie benutzt weils viel fitzeliger ist.

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
          ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
      2. Hi,

        Da hast du sicher recht, aber ich denke nicht, dass die Verwendung von entsprechend kenntlich gemachten, großen Hover-Buttons oberhalb und unterhalb der Liste im Vergleich zu einer seitlichen Scroll-Leiste für den Benutzer so ungewohnt bzw. überraschend wäre, dass dieser dadurch bei der Bedienung beeinträchtigt würde, - zumal ich diese "Art des Scrollens" persönlich als wesentlich angenehmer empfinde, als durch clicken und ziehen an einer seitlichen Scroll-Leiste herumzuwurschteln, - oder meinst du nicht?

        Eine normale Scrollbar muss ich nicht klicken, ich muss sogar nicht mal erst meinen Mauszeiger darauf bewegen – sondern kann mit dem Mausrad scrollen, ohne den Cursor bewegen zu müssen.

        Dein Vorhaben hingegen würde erst zum „wurschteln“ zwingen, wenn ich erst mal den Cursor auf irgendwelche Buttons bewegen müsste – was das ganze erheblich unkomfortabler machen würde.

        Wenn du das also so umsetzen willst, dann sorge auf jeden Fall dafür, dass Scrollen mit dem Mausrad (und andere Alternativen, bspw. „wischen“ auf einem Mobilgerät/Tablet) wie gewohnt möglich ist – andernfalls *ist* das eine Usability-Katastrophe.

        MfG ChrisB

        --
        Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
        1. Aloha ;)

          Wenn du das also so umsetzen willst, dann sorge auf jeden Fall dafür, dass Scrollen mit dem Mausrad (und andere Alternativen, bspw. „wischen“ auf einem Mobilgerät/Tablet) wie gewohnt möglich ist – andernfalls *ist* das eine Usability-Katastrophe.

          Und das ist eben das, was imho nicht möglich ist. Naja, fast nicht. Nicht unter normalen Umständen. Maximal noch mit einer geisteskranken Idee unter gewissen Umständen.

          Verstehe folgendes bitte, BITTE nicht als Aufforderung, das so zu machen. Ich möchte nur alles genannt haben. Oh Gott, ich merke schon, wie sich mir die Zehnägel hochrollen bei der Vorstellung, dass das was ich jetzt schreiben werde tatsächlich jemand umsetzt.

          Wenn du nirgends auf deiner Seite Scrollbalken hast (was ich mir nicht vorstellen kann) und nur für die Navigation welche brauchst, dann könnte ich mir noch eine letzt Möglichkeit vorstellen. Dann ist es dir nämlich möglich, die Seite komplett (KOMPLETT) per position:fixed; an den Bildschirm zu nageln. Außer der Navigation. Die bleibt absolut positioniert und hinter den anderen Elementen. Du musst quasi ne Wand drumrumbauen und nur ein Loch lassen, nämlich das, durch das man deine Navigation sehen kann. Deine Buttons baust du so ein, dass sie per Javascript die gesamte Seite nach unten oder oben scrollen.

          Das Ergebnis: Du hast eine Navigation, die scrollt - und zwar sowohl auf Mausrad, Wischen, als auch deine Buttons. Kein Scrollrad weit und breit an deiner Navi. Nur eins ganz rechts an der Seite vom Bildschirmrand, also designtechnisch außerhalb deines Layouts. Dass du damit zwar erreichst was du willst, eigentlich aber nicht die Navigation, sondern eben alles außer der Navigation scrollst, brauche ich hoffentlich nicht erwähnen.

          Oh man, ich glaube mir wird schlecht. Und wehe, WEHE jemand erteilt für den Vorschlag ein fachlich hilfreich. So destruktiv war ich ja schon lange nicht mehr. Zum guten Glück glaub ich nicht, dass eine Seite unabhängig von Bildschirmgröße etc. ohne Scrollbalken innendrin auskommt, der Anwendungsfall wird also hoffentlich nie auftreten.

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
          ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
          1. Aloha ;)

            Hallo RIDER :)

            Tja, also diese Lösung erscheint sogar mir etwas extrem...

            Aufgrund meiner unglücklich gewählten Ausgangsfrage ist der Thread leider etwas zersplittert,
            aber ihr habt mich mittlerweile soweit überzeugt, dass ich nicht zwingend auf den Buttons bestehe.

            WAS mir wirklich Kopfzerbrechen bereitet, sind einfach diese blöden Standard-Scroll-Leisten, die der Browser automatisch einfügt!

            Das ist so ein krasser Bruch mit meinem Seiten-Design, dass ich damit einfach überhaupt nicht klar komme!

            Es muss doch eine benutzbare Möglichkeit geben, content in einem container zu scrollen, ohne diese furchtbaren Standard-Scroll-Leisten zu verwenden!

            Ich meine, die "eine" Browser-Standard-Scroll-Leiste am rechten Rand des Anzeige-Fensters des Browsers, mit der man die ganze Seite runter oder hoch scrollen kann, ist ja völlig unproblematisch, da sie als Teil des Browsers wahrgenommen wird...

            ...aber in meinen filigranen, minimalistischen schwarzen Seiten-Elementen wirken diese Standard-Leisten so krass deplaziert, sowohl farblich, als auch von der Form, das kann doch nicht die einzige realistische Möglichkeit sein, oder?

            Gruß,

            Roadster

  2. Hallo.

    Also ich habe mal unter "megamenu" recherchiert, aber nur etwa 1 Million Vorschläge zur Umsetzung von Drop-Down-Menüs gefunden, aber nicht ein einziges scrollbares "Box"-Menü.

    Meine Überschrift für den Thread habe ich dabei natürlich auch mal wieder sehr unglücklich gewählt, denn unabhängig von der Frage, ob das Scrollen jetzt via Button oder via Leiste laufen soll, ist für mich die eigentliche Frage, wie ich es überhaupt hinbekomme, dass ich das "innere" Feld der Box mit den Links zu den einzelnen Unter-Seiten "scrollbar" machen kann!

    Wenn ich also zwei <div>-Elemente erstelle, eins für den Äußeren Rahmen, sprich die Box, in der das Menü angezeigt werden soll, und eins als inneren Rahmen für die Liste mit den Links, und die Liste mit den einzelnen Listen-Elementen ist höher als der innere und äußere Rahmen, dann überlappt sie diese doch nur(!?):

    _________________
    |  _____________  |
    | | ----------- | |
    | | ----------- | |
    | | ----------- | |
    |_| ----------- |_|
      | ----------- |
      | ----------- |
      |_____________|

    In allen Tutorials für "simple" Menüs wird immer davon ausgegangen, dass das gesamte Menü angezeigt wird, aber wie bekomme ich es hin, dass nur der Teil angezeigt wird, der in den größenmäßig definierten Rahmen passt? (z-index ist doch wohl keine Option, da ja nur ein Teil des Elements verdeckt werden soll...)

    Und wie kann ich dann das Scrollen "steuern" bzw. die dazu nötigen Steuerelemente (Buttons oder Leiste) implementieren und gestalten? Hat da jemand einen Link zu einem passenden Tutorial?

    Bin leider immernoch ein ziemlicher Anfänger und ich komme einfach nicht drauf...

    Wie immer Dank und Gruß,

    Roadster.

    1. Om nah hoo pez nyeetz, Roadster!

      Wenn ich also zwei <div>-Elemente erstelle, eins für den Äußeren Rahmen, sprich die Box, in der das Menü angezeigt werden soll, und eins als inneren Rahmen für die Liste mit den Links, und die Liste mit den einzelnen Listen-Elementen ist höher als der innere und äußere Rahmen, dann überlappt sie diese doch nur(!?):

      Du bräuchtest ein gruppierendes nav-Element, in dem sich die vielen Listen befinden. Diesem gibtst du eine feste Höhe und overflow-y: auto.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Polo und Poloch.

      1. Om nah hoo pez nyeetz, Roadster!

        Hallo Matthias!

        Du bräuchtest ein gruppierendes nav-Element, in dem sich die vielen Listen befinden. Diesem gibtst du eine feste Höhe und overflow-y: auto.

        overflow-y:auto funktioniert! Die erste Stufe auf der Leiter zum Erfolg ist genommen!

        Das Problem ist jetzt natürlich, dass an der Seite der inneren Box automatisch eine Scroll-Leiste im Browser-Stil erscheint, was natürlich stilistisch gesehen ein absoluter Alptraum ist, ein kompletter Bruch mit dem restlichen Design der Seite, extrem unschön.

        Wie kann ich aber nun bestimmen, dass ich statt der Scroll-Leiste, meine beiden Buttons zum scrollen benutzen will - oder, wenn wir feststellen, dass eine Scroll-Leiste aus Gründen der Benutzbarkeit doch besser ist - wie kann ich die Scroll-Leiste design-technisch an mein Seiten-Design anpassen?

        Ich habe zwar mitbekommen, dass diese Frage in Fachkreisen offenbar nur verächtliche Reaktionen hervorruft, aber warum das so ist, erschließt sich mir nicht!

        Soweit ich das verstanden habe, ging es bei der Diskussion darum, dass die Scroll-Leisten als Teil des jeweiligen Browsers angesehen werden und eine Website am Browser-Design nicht herumspielen soll, - was an und für sich ja auch sinnvoll ist.

        Aber auch wenn das Programmiertechnisch vielleicht anders aussieht, ist es doch so, dass abgesehen von der Scroll-Leiste, die das komplette Anzeigefenster im Browser steuert, alle Scroll-Leisten, die sich im "Inneren" der angezeigten Webseite befinden, design-technisch automatisch ein Teil der Webseite werden und auch als Teil der Seite wahrgenommen werden, - und nicht etwa als Teil des Browsers!

        Ich meine, mit dieser Argumentation könnte man ja genauso gut verlangen, dass alle auf Webseiten verwendeten Buttons Windows- oder Firefox-Standard-Buttons sein müssen...

        Eine Scroll-Leiste ist wie die Buttons ein zentrales Bedienelement einer Webseite und sollte dementsprechend frei gestaltet werden können wie alles andere auch, finde ich.

        Habe da allerdings bislang noch nichts zu gefunden!

        Oder sieht es am Ende so aus, dass ich im HTML/CSS/JS-Komplettpaket die gesamte Scroll-Funktion nachbauen muss, um da eine Anpassung an das Design meiner Seite zu erreichen? - Hat das mal jemand gemacht oder gibt es da ein passendes Tutorial?

        Ich muss ehrlich sagen, die silberne Standard-Scroll-Leiste vom Firefox in meinem feingezeichneten schwarzen Seiten-Design - geht absolut überhaupt nicht! Das sieht echt extrem schlecht aus! Dann doch lieber selbstdesignte Buttons ohne Leiste. (Aber wie setze ich das um?)

        Oh man! :-/

        Dank und Gruß,

        Roadster.

  3. Hi,

    […] dass auf meiner Seite bis zu sieben oder acht Unterebenen (auf denen sich wiederum bis zu einem Duzend Ebenen-Elemente befinden) zwingend über das Navigations-Menü zu erreichen sein müssen

    Obwohl du es als „gegeben“ hin stellst, ist das vielleicht der Punkt, der viel eher der Diskussion – und Abhilfe – bedarf.

    Wenn du so viele Menüpunkte und -ebenen hast, dann klingt das stark danach, dass schon beim Aufbau der Struktur etwas schief gelaufen ist. Diese zu diskutieren und zu optimieren, wäre vermutlich ratsamer, als auf Teufel komm raus irgendeine Art von Menü zu suchen, mit der dieser Wust halbwegs bedienbar wird.

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. Hi

      Hallo ChrisB!

      […] dass auf meiner Seite bis zu sieben oder acht Unterebenen (auf denen sich wiederum bis zu einem Duzend Ebenen-Elemente befinden) zwingend über das Navigations-Menü zu erreichen sein müssen

      Obwohl du es als „gegeben“ hin stellst, ist das vielleicht der Punkt, der viel eher der Diskussion – und Abhilfe – bedarf.

      Wenn du so viele Menüpunkte und -ebenen hast, dann klingt das stark danach, dass schon beim Aufbau der Struktur etwas schief gelaufen ist. Diese zu diskutieren und zu optimieren, wäre vermutlich ratsamer, als auf Teufel komm raus irgendeine Art von Menü zu suchen, mit der dieser Wust halbwegs bedienbar wird.

      Dein Einwand ist verständlich, aber daran kann ich leider wirklich nichts ändern.

      Um mal etwas konkreter zu werden:

      Die Seite stellt die hierarchische Struktur unseres Rechtssystems dar, vergleichbar einer "Mindmap", in verschiedendimensionalen Visualisierungen, mit einer prinzipiell eigenen, die
      Hierarchie nachvollziehenden Navigation. Aber abgesehen von den direkten Wegen durch den Hierachie-Baum, soll es natürlich auch (ohne die Suchfunktion bemühen zu müssen) die Möglichkeit geben, ein Menü einzublenden und die jeweiligen Seiten (Rechtsgebiete und -teilgebiete) direkt anzusteuern, um die dort aufgeführten Texte zu studieren.

      z.B.

      --> Öffentliches Recht
      --> Privatrecht
           --> Allgemeines Privatrecht
           --> Sonderprivatrecht
                --> Arbeitsrecht
                    --> Individualarbeitsrecht
                         --> Arbeitsvertragsrecht
                         --> Arbeitnehmerschutzrecht
                    --> Kollektivarbeitsrecht
                --> Handelsrecht
                --> Wertpapierrecht
                --> Verkehrszivilrecht
           --> Zivilprozessrecht
      --> Strafrecht

      Die Struktur wird also durch die Struktur unseres Rechtssytems vorgegeben und das ist ja auch
      der Sinn der Sache, denn genau darum geht es dabei - die Struktur unseres Rechts visuell erfahrbar zu machen, um eine plastische Vorstellung unserer rechtlichen Ordnung zu bekommen, zu lernen, sich darin zu orientieren, um auf diese Weise - Sichwort "assoziatives Denken/Lernen" sich als Student (oder interessierter Laie) das Wissen effektiver aneignen zu können...

      Gruß,

      Roadster.

      1. Hallo Roadster,

        --> Öffentliches Recht
        --> Privatrecht
             --> Allgemeines Privatrecht
             --> Sonderprivatrecht
                  --> Arbeitsrecht
                      --> Individualarbeitsrecht
                           --> Arbeitsvertragsrecht
                           --> Arbeitnehmerschutzrecht
                      --> Kollektivarbeitsrecht
                  --> Handelsrecht
                  --> Wertpapierrecht
                  --> Verkehrszivilrecht
             --> Zivilprozessrecht
        --> Strafrecht

        ich würde auch auf ein vollständiges Menü verzichten und statt dessen immer nur zwei Ebenen mitnehmen:

        --> Öffentliches Recht
        --> Privatrecht
        --> Strafrecht

        Klick auf Privatrecht:

        --> Privatrecht
            --> Allgemeines Privatrecht
            --> Sonderprivatrecht
            --> Zivilprozessrecht

        Klick auf Sonderprivatrecht:

        --> Privatrecht
            --> Sonderprivatrecht
                --> Arbeitsrecht
                --> Handelsrecht
                --> Wertpapierrecht
                --> Verkehrszivilrecht

        Klick auf Arbeitsrecht:

        --> Sonderprivatrecht
            --> Arbeitsrecht
                --> Individualarbeitsrecht
                --> Kollektivarbeitsrecht

        Gruß, Jürgen

        1. Hallo Roadster

          Hallo Jürgen!

          Tja, also da das Menü ohnehin nur auf Knopfdruck eingeblendet werden soll, und eingedenk der
          Komplexität und Verschachtelung der einzelnen Seiten, hatte ich mir halt überlegt, bei Bedarf im Vordergrund drei Boxen einzublenden.

          (nicht ganz maßstabsgetreu:)
           ______________________________________________________________________
          |  ____________________________   _________________   _______________  |
          | |     Navigationsbuttons     | |    Suchmaske    | |  Seitentitel  | |
          | |____________________________| |_________________| |_______________| |
          |  ____________________   ____________________   ____________________  |
          | | Öffentliches Recht | |     Privatrecht    | |     Strafrecht     | |
          | | ___________________| |____________________| |____________________| |
          | ||Verfassungsrecht | | ||Allg. Privatrecht| | ||Allg. Strafrecht | | |
          | ||-----------------| | ||-----------------| | ||-----------------| | |
          | ||Verwaltungsrecht | | ||Sonderprivatrecht| | ||Nebenstrafrecht  | | |
          | ||-----------------|0| ||-----------------|0| ||-----------------|0| |
          | ||Sozialrecht      |0| ||Zivilprozessrecht|0| ||Strafprozessrecht|0| |
          | ||-----------------|0| ||-----------------|0| ||-----------------|0| |
          | ||                 | | ||                 | | ||                 | | |
          | ||-----------------| | ||-----------------| | ||-----------------| | |
          | ||                 | | ||                 | | ||                 | | |
          | ||_________________|_| ||_________________|_| ||_________________|_| |
          | |____________________| |____________________| |____________________| |
          |______________________________________________________________________|

          Das rechts in den Boxen soll eine Scroll-Leiste darstellen ;-)

          Würde man nun über einen der Listen-Punkte hovern, würde - analog einem Drop-Down-Menü - die jeweils darunter liegende Ebene eingeblendet usw. (also so ähnlich, wie du das auch angedacht hast!).

          Meine Idee wäre also quasi eine Kombination aus klassischem Box-Menü und Drop-Down-Menü.

          So würde das auch ganz gut funktionieren. Nur die Sache mit den ultra unpassenden Scroll-Leisten bereitet mir noch Ärger...

          Gruß,

          Roadster.

          1. Hallo Roadster,

            muss denn jede Seite aus jeder anderen erreichbar sein? Du hast doch schon eine Struktur mit mehreren Bereichen.

            Gruß, Jürgen

            1. Hallo Roadster,

              muss denn jede Seite aus jeder anderen erreichbar sein? Du hast doch schon eine Struktur mit mehreren Bereichen.

              Gruß, Jürgen

              Ahoi Jürgen,

              naja, es ist zwar relativ unwahrscheinlich, dass jemand, der sich gerade über Körperverletzungs-Delikte im Strafrecht informiert, eine direkte Verlinkung zum Staatsorganisationsrecht braucht, aber nach welchen Prinzipien wollte man da eine Vorauswahl treffen?

              Normalerweise wird über das Clicken auf animierte Boxen navigiert, die symbolisch für die einzelnen Rechtsgebiete stehen, so dass man jeweils in die darunterliegende Ebene gelangt.

              D.h. zu Beginn haben wir die Boxen [ÖffR] [PrivR] [StrR]

              --> clicke ich auf [PrivR] verschwinden die drei Boxen und es werden neue Boxen geladen:

              --> [Allg. PrivR] [SonderPrivR] [ZivilProzR] usw.,

              wobei jeweils die Inhalte abgerufen werden können, die von der aktuellen Ebene umfasst sind;
              Ergo, je "tiefer" man in der Hierarchie "herabsteigt", desto präziser bzw. desto enger gefasst sind die angezeigten Inhalte.

              Es ist aber in juristischen Dingen nicht selten, dass bestimmte rechtliche Konstellationen ganz verschiedene Rechtsgebiete touchieren; - Bei den einschlägigsten dieser Konstellationen kann man da natürlich an entsprechender Stelle direkte Verlinkungen anbieten, aber das ganze ist einfach zu komplex, um alle Eventualitäten in dieser Hinsicht zu antizipieren...

              Daher sollte es die Möglichkeit geben, ein Menü - oder sagen wir: einen Index - aufzurufen, über den der Benutzer quasi jeden Winkel der Seite mit möglichst wenigen Clicks erreichen kann, ohne
              sich durch die ganze Hierarchie durchclicken zu müssen, bis er an sein Ziel kommt (oder eben die Suchfunktion zwingend benutzen zu müssen).

              Gruß,

              Roadster.

              1. @@Roadster:

                nuqneH

                Daher sollte es die Möglichkeit geben, ein Menü - oder sagen wir: einen Index - aufzurufen, über den der Benutzer quasi jeden Winkel der Seite mit möglichst wenigen Clicks erreichen kann, ohne
                sich durch die ganze Hierarchie durchclicken zu müssen, bis er an sein Ziel kommt (oder eben die Suchfunktion zwingend benutzen zu müssen).

                Das ist kein _Menü_, sondern eine _Sitemap_, die nicht auf jeder Seite vorhanden sein sollte, sondern einmalig als Extraseite (wo nichts anderes außer dem Verzeichnis drauf ist). Die Sitemap kannst du aus dem Menü von jeder Seite aus verlinken (darf auch „Inhaltsverzeichnis“ heißen).

                Für das Menü überlegst du dir ein sinnvolles Konzept. Im Menü sollte nicht alles drinstehn, sondern das im jeweiligen Kontext Nötige.

                Im Übrigen denke ich, dass Nutzer doch eher über eine Suchfunktion (du bietest doch eine solche an, oder?) zu den Inhalten finden als sich durch die Sitemap zu hangeln.

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  4. Hallo nochmal.

    Also ich habe nun die letzten Stunden recherchiert, wie man auf seiner Seite die Scroll-Leisten individuell gestalten könnte, ohne dabei aber irgendeinen Durchbruch erzielt zu haben...

    Soweit ich das verstanden habe, ist eine Umgestaltung der vom jeweiligen Browser automatisch eingefügten Scroll-Leisten praktisch unmöglich. Ok.

    Die Alternative wäre dann ja, eigene Scroll-Leisten zu gestalten, aber auch dafür habe ich kein praktisches Tutorial gefunden, sondern nur den Verweis auf jQuery, das ich nicht benutzen will, oder aber irgendwelche downloadbaren JavaScript-Dateien, die völlig unstrukturiert und praktisch unlesbar formatiert sind.

    Ich muss sagen, dass mich das einigermaßen verwundert, denn ich kann ja wohl nicht der Einzige sein, der der Meinung ist, dass die Browser-Standard-Scroll-Leisten in einem individuellen Seiten-Design wie Fremdkörper wirken können. - Schließlich sind diese Scroll-Leisten ja auch an das Design des Browsers angepasst und nicht an das Design der Seite. - Zwar mag es Webseiten geben (wie diese hier zum Beispiel), die von der Optik her dazu passen, so dass die Standard-Scroll-Leisten nicht negativ ins Auge fallen, aber das muss ja nicht in jedem Fall so sein?!?

    Ich habe für mein Webseiten-Projekt ein recht filigranes, elegantes, schwarzes Design gewählt, und wenn da eine grobschlächtige, silber-graue Browser-Standard-Scroll-Leiste auftaucht, passt das optisch einfach mal sowas von überhaupt nicht zusammen!!!

    Wäre echt super Dankbar, falls jemand mal ein entsprechendes Tutorial verlinken könnte, oder mir aber Alternativen aufzeigen könnte, wie ich den Listen-Inhalt meiner Menü-Boxen innerhalb der Box hoch und runter scrollen kann, ohne dass es zu einem solchen Stilbruch im Design kommt.

    Danke nochmal für eure Aufmerksamkeit und Mühe,

    Gruß,

    Roadster.

    1. Hi there,

      Ich muss sagen, dass mich das einigermaßen verwundert, denn ich kann ja wohl nicht der Einzige sein, der der Meinung ist, dass die Browser-Standard-Scroll-Leisten in einem individuellen Seiten-Design wie Fremdkörper wirken können.

      Nein, dieser Meinung waren schon viele, und es hat auch Browser gegeben (vielleicht geht das bei manchen noch immer), wo man die Scroll-Leisten "designen" kann. Anyway, diese Meinung ist trotzdem falsch. Browser sind da, um Information anzuzeigen. Und die meisten Anwender sind im Internet unterwegs, weil sie Information suchen, von mir aus auch Unterhaltung. Aber kaum jemand ist im Netz unterwegs, weil er sich nach den Ergüssen irgendwelcher Designfuzzies sehnt, die unbedingt Standard-Elemente des Browsers für ihr geniales Creativwerk verändern wollen. Deswegen sind es ja "Standard-Elemente", weil sie jedem Anwender auf jeder Seite die gleichen Bedienfunktionen zur Verfügung stellen sollen.

      By the way, auch wenn ich das schon öfter von mir gegeben habe, aber ich bleib' dabei: "Design" ist komplett wurscht. Design ist etwas für die "Designer" und die Besitzer oder Betreiber der Webseiten. Den Besuchern ist das egal. Die suchen ... siehe oben. Die erfolgreichsten Seiten im Internet pfeifen komplett auf "Design". Bedienbar muss die Seite sein, und wenn es die Bedienbarkeit verbessert, kann man eine Seite ja auch behübschen, aber die Scrollbars einzufärben jedenfalls verbessert die Bedienbarkeit einer Seite unter Garantie nicht...

      1. Hi there,

        Hi there!

        Also ich muss sagen, dass mich deine Argumentation keineswegs überzeugt:

        Wenn ich als durchschnittlicher Webseiten-Besucher auf das Design komplett pfeife, warum ist dann nur die Scroll-Funktion optisch "standardisiert"?

        Warum dann nicht gleich auch alle Buttons standardisieren? Wo ist denn da der Unterschied?

        Und alle Menüs, - ja, und wenn wir schon dabei sind, warum dann nicht auch vorgeschriebene Seitenlayouts, damit der Benutzer bloß nicht dadurch überrascht wird, dass sich das Navigationsmenü auf der linken statt auf der rechten Seite befindet?

        Wenn es nur darum ginge, Informationen aufzunehmen, könnten wir das Web auch monochrom darstellen, das würde eine Menge Server-Kapazität und wenigstens ein Kohlekraftwerk für den Strom einsparen!

        Ich will dir ja kein Unrecht tun, aber mit der selben Argumentation könnte man zu Ende gedacht auch sagen, wir müssten alle in Einheitskleidung herumlaufen - denn es zählt ja nur, dass die Klamotten Kälte und Feuchtigkeit vom Körper fernhalten, - und wir könnten alle in standardisierten Häusern wohnen und in standardisierten Autos herumfahren, etc. etc.

        In so einer Welt möchte ich nicht leben!

        Ich gebe dir uneingeschränkt Recht in der Hinsicht, dass Funktionalität vor Design kommt:

        Form follows function. - Keine Einwände!

        Aber:
        Ein Button ist ein Button ist ein Button. Und: Eine Scroll-Leiste ist eine Scroll-Leiste!
        Es würde doch kein bischen Funktionalität verloren gehen, wenn man statt der Standard-Scroll-Leiste eine eine eigene Scroll-Leiste erstellt, so wie man ja auch Buttons für Webseiten erstellt!

        Vielleicht finde ich ja gerade die Standard-Scroll-Leiste "überdesignt" und wünsche mir ein weniger aufdringliches, einfachereres Design? Vor allem ein Design, das zur Gestaltung meiner restlichen Webseite passt und das Menschen mit einem Minimum an ästhetischem Empfinden nicht negativ auffällt!

        Auch wenn du das offenbar nicht so siehst, aber ästhetische Fragen haben für mich Bedeutung, in jeder Hinsicht, und auch wenn das eine Mehrheit hierzulande möglicherweise anders sieht, weiß ich, daß ich damit keineswegs allein dastehe.

        Wenn ich eine Webseite erstelle, möchte ich die komplette Kontrolle darüber haben, wie sie aussieht. Punkt. Wenn ich meine Arbeit dann nicht gut mache, bekomme ich die Quittung:

        Meine Freiheit. Meine Verantwortung.

        Beste Grüße,

        Roadster ;-)

        1. Hi there,

          Also ich muss sagen, dass mich deine Argumentation keineswegs überzeugt:

          Wenn ich als durchschnittlicher Webseiten-Besucher auf das Design komplett pfeife, warum ist dann nur die Scroll-Funktion optisch "standardisiert"?

          Stimmt  nicht, auch den File-Upload-Button kann man nicht wirklich stylen, checkboxen sehen immer aus wie Checkboxen etc...

          Und alle Menüs, - ja, und wenn wir schon dabei sind, warum dann nicht auch vorgeschriebene Seitenlayouts, damit der Benutzer bloß nicht dadurch überrascht wird, dass sich das Navigationsmenü auf der linken statt auf der rechten Seite befindet?

          Man kann alles übertreiben. Ich denke es geht darum, daß die Scrollbars eben als Bestandteil des Browsers gesehen werden und nicht als Bestandteil der Seite.

          Wenn es nur darum ginge, Informationen aufzunehmen, könnten wir das Web auch monochrom darstellen, das würde eine Menge Server-Kapazität und wenigstens ein Kohlekraftwerk für den Strom einsparen!

          Ja eh, trotzdem dürfen sich die Seiten voneinenader unterscheiden. Aber überschätzen sollte man das nciht.

          Ich will dir ja kein Unrecht tun, aber mit der selben Argumentation könnte man zu Ende gedacht auch sagen, wir müssten alle in Einheitskleidung herumlaufen - denn es zählt ja nur, dass die Klamotten Kälte und Feuchtigkeit vom Körper fernhalten, - und wir könnten alle in standardisierten Häusern wohnen und in standardisierten Autos herumfahren, etc. etc.

          es geht ja nicht um "müssten". Aber Du tust mir nicht Unrecht, ich interssier' mich für Fetzen genausowenig wie für Webseiten"design".

          Wenn ich eine Webseite erstelle, möchte ich die komplette Kontrolle darüber haben, wie sie aussieht. Punkt.

          Was ich gesagt habe. "Design" ist für die Webseitenbetreiber und die "Designer" - in dem Fall also für Dich. Aber trotzdem solltest Du Dir die Frage stellen, was Deine Besucher wollen. Denn für die machst Du das ja vermutlich oder bildest Du Dir zumindest ein, es für sie zu machen.

          1. Hallo,

            Man kann alles übertreiben. Ich denke es geht darum, daß die Scrollbars eben als Bestandteil des Browsers gesehen werden und nicht als Bestandteil der Seite.

            eben, und das gilt auch für andere Bedienelemente, mit denen der Nutzer interagiert. Immer häufiger begegnen einem heutzutage Eingabefelder, die so zu Tode designt sind, dass sie kaum als solche zu erkennen sind, oder Buttons, die nicht mehr als solche auffallen. Es macht keinen Spaß, auf einer so gestalteten Webseite z.B. die Formularelemente zu suchen.

            Wenn ich eine Webseite erstelle, möchte ich die komplette Kontrolle darüber haben, wie sie aussieht. Punkt.

            Dann ist das Web das falsche Medium. Volle Kontrolle ist hier eine Illusion, auf keinen Fall aber etwas, das man anstreben sollte.

            Ciao,
             Martin

            --
            Das einzige Problem beim Nichtstun: Man weiß nie, wann man damit fertig ist.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. @@Der Martin:

              nuqneH

              Ich denke es geht darum, daß die Scrollbars eben als Bestandteil des Browsers gesehen werden und nicht als Bestandteil der Seite.

              Der Benutzer interagiert mit der Seite. Der Browser ist dabeiebenso wie das darunter liegende Betriebssystem Mittel zum Zweck und tritt in den Hintergrund.

              Die Interaktionselemente gehören zur Seite – jedenfalls aus Nutzersicht.

              Immer häufiger begegnen einem heutzutage Eingabefelder, die so zu Tode designt sind, dass sie kaum als solche zu erkennen sind, oder Buttons, die nicht mehr als solche auffallen. Es macht keinen Spaß, auf einer so gestalteten Webseite z.B. die Formularelemente zu suchen.

              Ja, man kann nicht mit CSS (und JavaScript) der Usability entgegenwirken. Und auch der Barrierefreiheit, wenn man nicht mehr erkennen lässt, welches Element den Fokus hat.

              Das ist dann schlechtes Design. Aber kein Grund, das Stylen von Bedienelementen generell zu verdammen.

              Wenn ich eine Webseite erstelle, möchte ich die komplette Kontrolle darüber haben, wie sie aussieht. Punkt.

              Dann ist das Web das falsche Medium. Volle Kontrolle ist hier eine Illusion, auf keinen Fall aber etwas, das man anstreben sollte.

              Das allerdings unterschreibe ich voll und ganz.

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. @@Klawischnigg:

        nuqneH

        und es hat auch Browser gegeben (vielleicht geht das bei manchen noch immer), wo man die Scroll-Leisten "designen" kann. Anyway, diese Meinung ist trotzdem falsch.

        Warum? Es ist wichtig, dass Scrollbars als solche zu erkennen sind, ja. Die Erkennbarkeit geht durch Umfärben nicht zwangsläufig verloren.

        Aber kaum jemand ist im Netz unterwegs, weil er sich nach den Ergüssen irgendwelcher Designfuzzies sehnt

        Natürlich nicht. Ergüsse wären Kunst, nicht Design.

        By the way, auch wenn ich das schon öfter von mir gegeben habe, aber ich bleib' dabei: "Design" ist komplett wurscht.

        Nein. Du meinst mit „Design“, wie etwas aussieht? Design ist weit mehr. Design ist, wie es funktioniert (Steve Jobs).

        Dazu gehört Informationsarchitektur, Interaktionsdesign (spätestens hier ist das Design beim OP wohl kaputt) und und und. Visual Design ist das Tüpfelchen auf dem i.

        Und auch Visual Design ist nicht Wurst. Es sorgt dafür, dass Inhalte visuell strukturiert werden – was gehört zusammen, was ist besonders wichtig usw. Und nicht zuletzt: “Good content gets lost with bad typography” (Meagan Fisher)

        Design ist etwas für die "Designer" und die Besitzer oder Betreiber der Webseiten. Den Besuchern ist das egal.

        Völlig falsch. Jedenfalls so, wie du es sagst.

        Design ist nicht egal; allerdings ist gutes Design unsichtbar. (Lucius Burckhardt) Design sollte nicht in den Vordergrund treten, sondern den Inhalt optimal an den Nutzer bringen. Mittel zum Zweck, nicht Design um seiner selbst Willen.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Hi there,

          Warum? Es ist wichtig, dass Scrollbars als solche zu erkennen sind, ja. Die Erkennbarkeit geht durch Umfärben nicht zwangsläufig verloren.

          Schwarze Scrollbars neben einer dunklen Seite sind aber nicht unbedingt als solche zu erkennen. Ich war einmal Zeuge, wie ein eingeräumterweise ziemlich unbedarfter Anwender leicht verzweifelt auf der Seite überall herumgeklickt hat, weil er den Rest eines Textes lesen wollte, die "toll designten" Scrollbars aber nicht finden konnte. Ein Extrembeispiel, vielleicht, aber im Grunde genommen genau der Fall, über den wir hier ständig reden.

          Nein. Du meinst mit „Design“, wie etwas aussieht? Design ist weit mehr. Design ist, wie es funktioniert (Steve Jobs).

          Ach. Hat er wieder eine Sandale verloren...

          Und auch Visual Design ist nicht Wurst. Es sorgt dafür, dass Inhalte visuell strukturiert werden – was gehört zusammen, was ist besonders wichtig usw. Und nicht zuletzt: “Good content gets lost with bad typography” (Meagan Fisher)

          Gunnar, Deine Zitate bereichern mein armseliges Programmiererleben immer wieder auf's Neue...;)

          Design ist nicht egal; allerdings ist gutes Design unsichtbar. (Lucius Burckhardt) (siehe oben, nur so nebenbei;)

          Wir verstehen uns eh. Deshalb setzen ich das Wort Design auch in Anführungszeichen...

          1. @@Klawischnigg:

            nuqneH

            Warum? Es ist wichtig, dass Scrollbars als solche zu erkennen sind, ja. Die Erkennbarkeit geht durch Umfärben nicht zwangsläufig verloren.

            Schwarze Scrollbars neben einer dunklen Seite sind aber nicht unbedingt als solche zu erkennen.

            Ich sagte „nicht zwangsläufig“.

            Dunkelblaues „nicht zwangsläufig“ neben anderem dunkelblauem Text ist aber nicht unbedingt als solches zu erkennen? ;-)

            Ich war einmal Zeuge, wie ein eingeräumterweise ziemlich unbedarfter Anwender leicht verzweifelt auf der Seite überall herumgeklickt hat, weil er den Rest eines Textes lesen wollte, die "toll designten" Scrollbars aber nicht finden konnte.

            Natürlich sollte man Scrollbalken nicht visuell an den Rand der Unsichtbarkeit stylen.

            Andererseits kann es durchaus sein, dass ungestylte Scrollbalken visuell zu stark hervortreten und vom Inhalt ablenken. Die meist grauen Scrollbalken sind ja an weißen Hintergrund angepasst. Für andere Hintergrundfarben können anders gefärbte Scrollbalken passend sein.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      3. Hallo,

        Browser sind da, um Information anzuzeigen. Und die meisten Anwender sind im Internet unterwegs, weil sie Information suchen, von mir aus auch Unterhaltung. Aber kaum jemand ist im Netz unterwegs, weil er sich nach den Ergüssen irgendwelcher Designfuzzies sehnt, die unbedingt Standard-Elemente des Browsers für ihr geniales Creativwerk verändern wollen.

        Mittlerweile gibt es Anwendungsfälle dafür, und zwar wenn der Browser letztlich einfach als Frontend genutzt wird für beliebige Anwendungen, z.B. die Konfigurationen von Endgeräten. Diese können auch in einem Umfeld eingesetzt sein, das eine herkömmliche Bedienung des Browsers nicht erlaubt (keine Wischgesten, schlecht bis gar nicht bedienbare Scrollleisten). So dass es tatsächlich erforderlich wird, z.B. Buttons als Touch-Flächen zum bequemen Scrollen des Inhaltes zur Verfügung zu stellen.

        Zu relalisieren ist das über javaScript, indem - vereinfacht gesagt - bei/während dem entsprechenden Mouse- oder Touch-Event auf den Button der Inhalt in einem Anzeige-Element schrittweise verschoben wird.

        Aber natürlich sind das Sonderfälle, die ich nicht auf die Entwicklung "normaler" Webseiten übertragen würde.

        Gruß
        Stefanie

    2. Hallo

      Soweit ich das verstanden habe, ist eine Umgestaltung der vom jeweiligen Browser automatisch eingefügten Scroll-Leisten praktisch unmöglich. Ok.

      … sagst du, um es stante pede in Zweifel zu ziehen …

      Ich muss sagen, dass mich das einigermaßen verwundert, denn ich kann ja wohl nicht der Einzige sein, der der Meinung ist, dass die Browser-Standard-Scroll-Leisten in einem individuellen Seiten-Design wie Fremdkörper wirken können. - Schließlich sind diese Scroll-Leisten ja auch an das Design des Browsers angepasst und nicht an das Design der Seite.

      Nein, das ist eine falsche Annahme. Die Scrolleisten sind nicht an „das Design des Browsers angepasst“, sondern werden vom Betriebssystem bereitgestellt. Das heißt erstens, dass der Benutzer genau diese Scrolleisten aus allen seinen Programmen kennt [1] und diese zweitens bei bestimmten Betriebssytemen bei jeder Installation anders aussehen können [2].

      Das gilt im übrigen auch für Formularelemente, auch wenn die meisten per CSS (manchmal auch kaputt-)stylebar sind.

      Es könnte also sein, dass bei einzelnen Benutzern die Seite inklusive der Betriebssystemelemente aus Versehen passend angezeigt wird. ;-)

      Ich habe für mein Webseiten-Projekt ein recht filigranes, elegantes, schwarzes Design gewählt, und wenn da eine grobschlächtige, silber-graue Browser-Standard-Scroll-Leiste auftaucht, passt das optisch einfach mal sowas von überhaupt nicht zusammen!!!

      Du bist nicht Herr der Anzeige deiner Seite. In den meisten Fällen wird sie bei den Benutzern angezeigt werden, wie du das festlegst, du kannst und solltest dich aber nicht darauf verlassen. Von den unterschiedlichen Anforderungen unterschiedlicher Ausgabeformate mag ich garnicht erst anfangen.

      [1] Die Ausnahme von Programmierbuden, die sich nicht an die Styleguidelines der Betriebssystem- bzw. Windowmanagerhersteller halten, bestätigen die Regel.
      [2] Wie das bei OS-X aussieht, weiß ich nicht, aber bei Windows und Linux kann man das Desktopdesign anpassen.

      Tschö, Auge

      --
      Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
      Terry Pratchett, "Wachen! Wachen!"
      ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
      Veranstaltungsdatenbank Vdb 0.3
      1. @@Auge:

        nuqneH

        Die Scrolleisten sind nicht an „das Design des Browsers angepasst“, sondern werden vom Betriebssystem bereitgestellt.

        Ich glaube mich an Zeiten zu erinnern, da hatte Firefox auf OS X noch die von Windows bekannten Scrollbalken, Chrome jedoch schon die erwähnten Positionsanzeiger nur während des Scrollens.

        Insofern stimmt deine Aussage nur bedingt.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Hallo

          Die Scrolleisten sind nicht an „das Design des Browsers angepasst“, sondern werden vom Betriebssystem bereitgestellt.

          Ich glaube mich an Zeiten zu erinnern, da hatte Firefox auf OS X noch die von Windows bekannten Scrollbalken, Chrome jedoch schon die erwähnten Positionsanzeiger nur während des Scrollens.

          Insofern stimmt deine Aussage nur bedingt.

          Ok, das mag sein. Mit OS-X habe ich keinerlei praktische Erfahrungen. Gegenwärtig ist mir kein Browser bekannt [1], der nicht die vom OS bereitgestellten Elemente nutzt. Dass das einzelne Programme (welcher Coleur auch immer) nicht so handhaben (respektive handhabten), hatte ich ja schon gesagt.

          Die Positionsanzeiger gibt es auch bei einzelnen Windowmanagern für Linux. Meins ist das für Desktopsysteme ehrlich gesagt nicht. Das Argument fehlenden Platzes zieht da in meinen Augen nicht. Aber ist ja egal, nehm' ich halt eine andere Oberfläche.

          [1] Das kann ich zumindest für für Linux (Ubuntu, Lubuntu, Mint, Mint mit original Mate) und Windows XP, 7 und 8.1 mit FF, IE, Chromium und Opera 12.1 bestätigen.

          Tschö, Auge

          --
          Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
          Terry Pratchett, "Wachen! Wachen!"
          ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
          Veranstaltungsdatenbank Vdb 0.3
          1. Mahlzeit,

            Gegenwärtig ist mir kein Browser bekannt [1], der nicht die vom OS bereitgestellten Elemente nutzt.

            doch, einer fällt mir spontan ein: Der IE (zumindest IE10, IE11 unter Windows 7). Der kümmert sich nicht um das vom Nutzer eingestellte Windows-Theme, sondern malt seine Scrollbalken unabhängig davon in einer Ton-in-Ton-Kombination von fast weiß und sehr hellgrau, so dass man sie kaum erkennt. Das gleiche gilt übrigens auch für MS Office. Also in beiden Fällen ausgerechnet die MS-Produkte ...

            Ciao,
             Martin

            --
            "Drogen machen gleichgültig."
             - "Na und? Mir doch egal."
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Hallo

              Gegenwärtig ist mir kein Browser bekannt [1], der nicht die vom OS bereitgestellten Elemente nutzt.

              doch, einer fällt mir spontan ein: Der IE (zumindest IE10, IE11 unter Windows 7). Der kümmert sich nicht um das vom Nutzer eingestellte Windows-Theme, sondern malt seine Scrollbalken unabhängig davon in einer Ton-in-Ton-Kombination von fast weiß und sehr hellgrau, so dass man sie kaum erkennt. Das gleiche gilt übrigens auch für MS Office. Also in beiden Fällen ausgerechnet die MS-Produkte ...

              Oh, <im Startmenü herumkram /> Tatsache. Wir möchten wohl Win 8.x sein, wa? Hmm, ist mir noch nie aufgefallen. Der IE wird bei mir allerdings nur alle paar Wochen angeschmissen. Nun ist mir also doch ein Browser bekannt, der in dieser Hinsicht verkackt.

              Dass sich der OS-Hersteller selbst nicht an seine UI-Styleguidelines hält, ist natürlich ein Armutszeugnis par excellence.

              Tschö, Auge

              --
              Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
              Terry Pratchett, "Wachen! Wachen!"
              ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
              Veranstaltungsdatenbank Vdb 0.3
            2. Hi,

              Das gleiche gilt übrigens auch für MS Office. Also in beiden Fällen ausgerechnet die MS-Produkte ...

              Ist doch nichts neues, daß MS sich nicht an die selbst aufgestellten Regeln hält.
              Als MS das einführte, daß Software bestimmte Regeln einzuhalten hat, damit das Windows-Zeichen auf die Packung durfte, gab es z.B. diese Regeln:

              Für die Dateiauswahl muß der Betriebssystem-Dateiauswahl-Dialog benutzt werden.
              Welche Programme benutzten einen eigenen (nicht nur angepaßten, sondern wirklich komplett anderen) Dialog? MS-Excel, MS-Word, MS-...

              Für Progamme zur Dateibearbeitung muß der Dateiname im Titel stehen, mit einem * dahinter, sobald es ungespeicherte Änderungen gab.
              Welche Programme zeigten den * nicht an? MS-Excel, MS-Word, MS-...

              usw.

              cu,
              Andreas

              --
              Warum nennt sich Andreas hier MudGuard?
              O o ostern ...
              Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    3. Aloha ;)

      Soweit ich das verstanden habe, ist eine Umgestaltung der vom jeweiligen Browser automatisch eingefügten Scroll-Leisten praktisch unmöglich. Ok.

      Die Alternative wäre dann ja, eigene Scroll-Leisten zu gestalten, aber auch dafür habe ich kein praktisches Tutorial gefunden, sondern nur den Verweis auf jQuery, das ich nicht benutzen will, oder aber irgendwelche downloadbaren JavaScript-Dateien, die völlig unstrukturiert und praktisch unlesbar formatiert sind.

      Humm-Homm... eine Alternative hätte ich noch aus dem Ärmel zu schütteln. Die ist auch unkonventionell und ich hoffe mal, ich werde dafür nicht von der Allgemeinheit gesteinigt.

      Umstylen kannst du sie nicht. Aber vielleicht verstecken? Schließlich haben die Leisten in allen Browsern eins gemeinsam: Sie sind alle schmal. Schätzungsweise max. 10-15px? Also. Dann nimm um dein Navigations-div (bzw. nav) ein div, das 15px weniger breit ist und overflow:hidden; hat. Dem nav gibst du ein overflow:scroll, dann sind die Scrollbalken immer da. Ende der Zauberei.

      Das Ergebnis: deine nav lässt sich durch native Methoden (Scrollrad, wischen) scrollen und die Scrollbalken sind nicht sichtbar. Nachteil: es ist weniger klar, dass die nav überhaupt scrollbar ist. Last but not least: eine zumindest formal unschöne Lösung.

      Ein bisschen besser (nicht formal, aber für den Standarduser) wirds, wenn du deine Buttons dazunimmst. Die lassen sich wahrscheinlich über die nicht-standardkonforme Eigenschaft scrollLeft bedienen. Das sollte laut Aussagen in allen wichtigen Browsern funktionieren. Und für alle ohne Javascript oder ohne scrollLeft-Support ist das native scrollen ja möglich. Aus gegebenem Anlass (scroll per Button nur bei Browserunterstützung und JS) würde ich die Buttons per JS einfügen, sobald im JS getestet wurde, ob entsprechende Unterstützung vorhanden ist.

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
      1. Aloha ;)

        Hallo RIDER :)

        Tja, was soll ich sagen, wenn ich wüsste, wie ich dir ein für diesen Beitrag ein "hilfreich"-Sternchen verpassen könnte, würde ich's machen!

        Also, ich habe deinen Vorschlag umgesetzt und es funktioniert!

        Es ist zwar sicher nicht die optimale Lösung - eine sichtbare, zur Gestaltung der Seite passende Scrollbar wäre freilich besser - aber immerhin, es funktioniert.

        Der Content lässt sich mit dem Mausrad scrollen oder mit den beiden Buttons (in diesem Fall element.scrollTop, da ja die y-Achse gescrollt werden soll), ohne dass die hässliche Standard-Scrollbar zu sehen ist!

        Habe es unkommentiert dem technisch unbedarftesten Menschen vorgesetzt, der gerade verfügbar war, und selbst sie konnte das Menü problemlos bedienen...

        Das Einzige, was dabei vielleicht noch verbesserungsbedürftig wäre, ist die Funktion der Buttons:

        ScrollLeft bzw scrollTop verschiebt ja das jeweilige Element nur um eine bestimmte Länge, sprich
        element.scrollTop += 20; oder element.scrollTop -= 30; d.h. bei jedem Click wird die Liste um den entsprechenden Faktor in die entsprechende Richtung verschoben, ergo lange Liste = viele Clicks oder große Sprünge!

        Wäre es nicht möglich, die Funktion so zu schreiben, dass wenn man den Button gedrückt hält, der Scroll-Vorgang solange fortgesetzt bzw. wiederholt wird, bis das Ende erreicht ist, bzw. bis man die linke Maustaste wieder loslässt? - Wenn das ginge, das wäre eine ECHTE Verbesserung!

        (...und wenn man dann den ganzen Scroll-Vorgang noch ein wenig geschmeidiger animieren könnte, wäre das natürlich auch eine super Sache, aber ich fürchte, das lässt sich wohl kaum umsetzen...)

        Tausend Dank und Beste Grüße,

        Roadster.

        1. Om nah hoo pez nyeetz, Roadster!

          Tja, was soll ich sagen, wenn ich wüsste, wie ich dir ein für diesen Beitrag ein "hilfreich"-Sternchen verpassen könnte, würde ich's machen!

          dazu musst du dich anmelden, dann kannst du Sternchen verteilen.

          Du solltest allerdings die geballten Bedenken nicht in den Wind schlagen; dieser Beitrag mag für dich hilfreich sein, für die Verbesserung der Nutzerfreundlichkeit war er eher kontraproduktiv.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Fest und Festräger.

          1. Om nah hoo pez nyeetz, Roadster!

            Hallo Matthias!

            Du solltest allerdings die geballten Bedenken nicht in den Wind schlagen; dieser Beitrag mag für dich hilfreich sein, für die Verbesserung der Nutzerfreundlichkeit war er eher kontraproduktiv.

            Ich schlage die geäußerten Bedenken keineswegs in den Wind, sondern habe mir darüber durchaus meine Gedanken gemacht!

            Aber bedenke du auch Folgendes:

            Die von RIDER vorgeschlagene Lösung funktioniert. Nicht nur bei mir. Auch Menschen, die ziemlich wenig Ahnung von der Materie haben, können damit offenbar problemlos umgehen, sofern die Buttons entsprechend kenntlich gemacht sind und man den Zeilenabstand des zu scrollenden Contents so wählt, dass in der Ausgangsposition das untere Ende 'offensichtlich' abgeschnitten ist, so dass klar ist, dass es da noch weitergeht.

            Ja, eine sichtbare Scrollbar wäre nocheinmal eine Verbesserung der Benutzerfreundlichkeit - das steht außer Frage -, aber es ist (soweit ich weiß) nicht meine Schuld, dass ich hier nur die Wahl zwischen Pest und Cholera habe:

            Ich habe testweise die Box mit der von mir verfluchten Standard-Scrollbar einmal ein paar fachfremden Leuten in meinem Umfeld zur Beurteilung vorgeführt (natürlich ohne suggestive Beeinflussung durch meine Person) und ALLEN, ich betone ALLEN ist aufgefallen, dass diese Standard-Scrollbar überhaupt nicht zu dem Design meiner Seite passt, dass das "irgendwie doof aussieht", verbunden mit der Frage, ob "man das nicht irgendwie anders machen kann"!

            Anders als von einigen hier behauptet, ist das Design den Usern wohl doch nicht egal, bzw. ist es offenbar doch so, dass extreme Stilbrüche im Design den Benutzern negativ auffallen!

            Also, wie will man das abwägen? Ein kaum erheblicher Verlust an Benutzbarkeit und dafür die Vermeidung von ästhetischen Irritationen? Oder ein bischen bessere Benutzbarkeit unter Inkaufnahme ebensolcher? Oder sollte man das ganze Design gleich von Anfang an daran ausrichten, dass es ästhetisch kompatibel ist zu (willkürlich) nicht veränderbaren Standard-Bedienelementen?

            Wenn es vom Browser oder vom Betriebssystem bereitgestellte Standard-Bedienelemente gibt, ist das eine gute Sache, falls ein Programmierer bei der Umsetzung seines Programms Mist baut, damit Funktionalität erhalten bleibt, - aber - solche Elemente sollten nur als 'Backup' bereitstehen für ebendiesen Fall, aber nicht den Leuten aufgezwungen werden!

            Denn genau das passiert doch im Moment: Nicht nur ich als Ersteller der Seite muss mit den Standard-Bedienelementen vorlieb nehmen, sondern auch der Benutzer! Der Programmierer sollte die Freiheit haben, sein Programm so zu Gestalten, wie er es für richtig hält und der Benutzer sollte die Freiheit haben, wenn er lieber die Standard-Bedienelemente benutzen möchte, dies in den Browser- bzw. Betriebssystem-Einstellungen so festzulegen.

            Die derzeitige Situation wird doch niemandem wirklich gerecht, weder den Entwicklern noch den Benutzern....

            Tja, also wenn mir jetzt noch jemand verrät, wie ich es hinbekomme, dass die scrollTop-Funktion bei gedrückt gehaltener Maustaste automatisch wiederholt wird, bis man loslässt oder das Ende erreicht ist, damit man nicht sooft clicken muss, dann bin ich mit der Lösung zufrieden.

            Soweit ;-)

            Beste Grüße,

            Roadster.

            1. Aloha ;)

              Tja, also wenn mir jetzt noch jemand verrät, wie ich es hinbekomme, dass die scrollTop-Funktion bei gedrückt gehaltener Maustaste automatisch wiederholt wird, bis man loslässt oder das Ende erreicht ist, damit man nicht sooft clicken muss, dann bin ich mit der Lösung zufrieden.

              Für soviel Lob mach ich das doch glatt. Was mir da vorschwebt:
              Du definierst dir zunächst in Javascript zwei Funktionen, z.B. ScrollUp(step) und ScrollDown(step). Wenn du die Funktionalität mehr als einmal brauchst solltest du neben step noch einen Parameter elm haben, dem du das zu scrollende Element mitgeben kannst. Außerdem brauchst du eine Variable scrolling = false; Statt onclick der Buttons abzufangen, reagierst du jetzt auf onmousedown, onmouseout und onmouseup.

              Exemplarisch für den nach-unten-scrollbutton:

              \\ gedrückte Maus auf Button beginnt scrollen  
              document.getElementById('nach-unten').onmousedown = function () {  
                  \\ sichergehen, dass altes scrollen beendet  
                  if (scrolling) window.clearInterval(scrolling);  
                  scrolling = false;  
                
                  \\ jede Viertelsekunde um 5px nach unten  
                  scrolling = window.setInterval(function(){ScrollDown(5);},250);  
              }  
                
              \\ bei onmouseup soll das scrollen aufhören  
              document.getElementById('nach-unten').onmouseup = function() {  
                  if (scrolling) window.clearInterval(scrolling);  
                  scrolling = false;  
              }  
                
              \\ und falls der Anwender mit gedrückter Maus den Button verlässt: auch beenden  
              document.getElementById('nach-unten').onmouseout = document.getElementById('nach-unten').onmouseup;  
              
              

              Voila ;) Die Werte von Zeit und step für Intervall solltest du vorsichtig einstellen. Zu schnell ist dabei schlechter als zu langsam. Wers schneller will, kann immer noch nativ scrollen.

              Den Code habe ich nicht getestet, Syntaxfehler oder andere Kleinigkeiten sind also nicht ausgeschlossen.

              In dem Fall bin ich übrigens deiner Meinung. Die Buttons machen die Scroll-Funktionalität sichtbar umd natives Scrollen funktioniert auch. Würde sagen das ist legitim. Tatsächlich gibt es sowohl bei FileUpload-Button als auch bei den Scrolleisten keinen sinnvollen Grund, warum man sie nicht modifizieren kann. Das gehört imho längst standardisiert. Auch wenn ich dem Rest recht gebe, das muss mit Bedacht geschehen.

              Grüße,

              RIDER

              --
              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
              ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
              1. Aloha ;)

                Hallo RIDER :)

                Nochmal vielen Dank für die Hilfe! Aber hier überforderst du meine Fähigkeiten in JS arg:

                Du definierst dir zunächst in Javascript zwei Funktionen, z.B. ScrollUp(step) und ScrollDown(step). Wenn du die Funktionalität mehr als einmal brauchst solltest du neben step noch einen Parameter elm haben, dem du das zu scrollende Element mitgeben kannst. Außerdem brauchst du eine Variable scrolling = false; Statt onclick der Buttons abzufangen, reagierst du jetzt auf onmousedown, onmouseout und onmouseup.

                Wenn ich dich richtig verstehe, meinst du, ich solle die "Scroll"-Funktion quasi generalisieren, damit ich sie nicht für jedes zu scrollende Element neuschreiben muss, richtig?

                Die Sache mit den Parametern ist mir leider immernoch ein Buch mit sieben Siegeln! Habe mich bei meinen bislang verwendeten DOM-Funktionen immer erfolgreich darum herumgedrückt, mich damit befassen zu müssen...

                (step) und ggf. (elm) (???) müssen doch irgendwie definiert werden? Aber wie ? Oder sind das JS-Befehle? Und .onmousedown ist dasselbe wie .addEventListener("mousedown", ...); richtig?

                Wenn {ScrollDown(5);} für function ScrollDown(step){ ... } steht, was kommt dann in die {} ?

                {step= äh.. nach-unten.scrollTop += ?;} aber es soll ja unabhängig vom Element definiert sein?

                Oh je!

                Also, wenn es dir nichts ausmacht, nochmal einen Schritt zurückzutreten und für mich Anfänger noch ein, zwei erläuternde Sätze hinzuzufügen, sei dir mein Dank gewiss! :D

                Beste Grüße,

                Roadster.

                1. Aloha ;)

                  Also, wenn es dir nichts ausmacht, nochmal einen Schritt zurückzutreten und für mich Anfänger noch ein, zwei erläuternde Sätze hinzuzufügen, sei dir mein Dank gewiss! :D

                  Okay, alles langsam, Schritt für Schritt^^

                  Aloha ;)

                  Hallo RIDER :)

                  Nochmal vielen Dank für die Hilfe! Aber hier überforderst du meine Fähigkeiten in JS arg:

                  Du definierst dir zunächst in Javascript zwei Funktionen, z.B. ScrollUp(step) und ScrollDown(step). Wenn du die Funktionalität mehr als einmal brauchst solltest du neben step noch einen Parameter elm haben, dem du das zu scrollende Element mitgeben kannst. Außerdem brauchst du eine Variable scrolling = false; Statt onclick der Buttons abzufangen, reagierst du jetzt auf onmousedown, onmouseout und onmouseup.

                  Wenn ich dich richtig verstehe, meinst du, ich solle die "Scroll"-Funktion quasi generalisieren, damit ich sie nicht für jedes zu scrollende Element neuschreiben muss, richtig?

                  Jein. Generalisieren würdest du erst mit zusätzlichem Parameter elm. So, ohne elm, ist der Benefit einfach der, dass das Scrollen ganz leicht und ohne Umstände aufgerufen werden kann. Nur um es nachher einfacher in der Notation zu haben, wenn du verstehst.

                  Die Sache mit den Parametern ist mir leider immernoch ein Buch mit sieben Siegeln! Habe mich bei meinen bislang verwendeten DOM-Funktionen immer erfolgreich darum herumgedrückt, mich damit befassen zu müssen...

                  Okay, dann zeig ich dir mal, wie die Funktion ScrollDown aussieht, einmal ohne elm und einmal mit elm.

                  Entweder ohne:

                  function ScrollDown (step) {  
                      window.document.getElementById('scrollelm').scrollTop += step;  
                  }  
                  
                  

                  Oder mit:

                  function ScrollDown (step,elm) {  
                      elm.scrollTop += step;  
                  }  
                  
                  

                  Du siehst, das zweite generalisiert, das erste nicht. Weil ich beim ersten das Element festgelegt habe, beim zweiten nicht.

                  (step) und ggf. (elm) (???) müssen doch irgendwie definiert werden? Aber wie ? Oder sind das JS-Befehle?

                  Das sind keine JS-Befehle. Wie in der Definition der Funktionen oben gezeigt, sind Parameter abstrakte Variablen, die innerhalb der Funktion verwendet werden können. Erst beim Aufruf der Funktion wird festgelegt, welchen Wert diese Variablen haben. Ähnlich wie in Mathe. f(x) = x² z.B. ist eine Funktion namens f mit Parameter x und erst beim Aufruf der Funktion, f(5) beispielsweise, wird der Parameter festgelegt (hier: x=5) und das Verhalten der Funktion klar (in diesem Beispiel: gebe 5² = 25 zurück).

                  Okay. Also müssten wir, um die Funktion ohne elm aufzurufen, schreiben

                  ScrollDown(5);

                  Damit ist intern step = 5 und damit scrollt dein scrollbares Element bei so einem Aufruf um 5px runter.

                  Die Funktion mit elm bräuchte aber einen zweiten Parameter, etwa

                  ScrollDown(5,window.document.getElementById('scrollelm'));

                  Dieser Aufruf der mit-elm-Funktion bewirkt das selbe. Hier müssen wir aber über den zweiten Parameter erst festlegen was elm ist. Übrigens: elm als Variablenname ist meine Abkürzung für Element, ich bin schreibfaul beim Programmieren.

                  Wie schon gesagt: wenn du nur ein Element auf deiner Seite so scrollbar machst, dann ist die Syntax ohne elm deine wahl (darin ist auch mein vorheriges Codebeispiel geschrieben), wenn du mehr brauchst nimm das mit elm (dann aber daran denken, überall, wo du ScrollDown aufrufst, den zweiten Parameter mit anzugeben).

                  Und .onmousedown ist dasselbe wie .addEventListener("mousedown", ...); richtig?

                  Genau. Tut mir leid, ich komme aus einer Zeit, in der es die Syntax über addEventListener noch nicht gab. Alte Gewohnheiten legt man nicht so schnell ab. Du hast aber recht, statt

                  xyz.onmousedown = function () {  
                      ...  
                  }
                  

                  solltest du schreiben

                  xyz.addEventListener("mousedown", (function () {  
                      ...  
                  }));
                  

                  Wobei ich die 'alte' Schreibweise (die geht ja immer noch) hier zunächst fast einfacher find. Und die neue Schreibweise entfaltet ihr Potenzial ja nur dann, wenn der button verschiedene Funktionen bedienen muss. Kannst die neue aber gerne verwenden^^

                  Wenn {ScrollDown(5);} für function ScrollDown(step){ ... } steht, was kommt dann in die {} ?

                  Siehe oben. Mir fällt gerade auf: Eigentlich brauchst du nur EINE Funktion Scroll - die Umterscheidung ob hoch oder runter kannst du dann über den Parameter step vornehmen, für runter z.B. 5 und für hoch -5.

                  {step= äh.. nach-unten.scrollTop += ?;} aber es soll ja unabhängig vom Element definiert sein?

                  Wie geschrieben - das muss nicht, kann aber.

                  Vielleicht noch ein Stichwort zur Generalisierung. Bitte erst lesen, wenn du alles andere voll verstanden hast. Sonst verwirrts wirklich nur.

                  ------------------

                  Sagen wir, du willst 5 scrollbare Elemente mit id "scrollable1"-"scrollable5" haben. Dazu jeweils zwei Buttons, z.B. für das erste die Buttons mit den ids "scrollbtu1" und "scrollbtd1". Dann kannst du die generalisierte Variante so ganz einfach machen - ohne viel Schreibaufwand:

                  for (var i = 1; i <= 5; i++) {  
                    
                       \\ dem button sein i mitgeben bzw. bekanntmachen  
                       document.getElementById("scrollbtu"+i).scrollindex = i;  
                    
                       document.getElementById("scrollbtu"+i).addEventListener('mousedown', ...  
                           \\ hier dann im setInterval, wie im Beispiel, aber:  
                           Scroll(-5,document.getElementById("scrollable"+this.scrollindex));  
                           ...  
                        );  
                    
                       \\ selbes Spiel mit mouseup, mouseout  
                    
                       \\ selbes Spiel mit document.getElementById("scrollbtd"+i)  
                       \\ nur eben immer im setInterval Aufruf von  
                           Scroll(+5,document.getElementById("scrollable"+this.scrollindex));  
                    
                    
                  }  
                  
                  

                  Ich gebe zu: es spart Schreibaufwand (Maxime: dont repeat yourself), macht den Coder aber komplizierter.

                  ------------------

                  * Mammutpost Ende. Bearbeitungszeit etwas mehr als 1h :D hoffe es hilft.

                  Grüße,

                  RIDER

                  --
                  Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                  ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                  1. Aloha ;)

                    Hallo Rider :)

                    SuperVielenDank für die Arbeit!

                    Langsam lichtet sich der Schleier, aber so wirklich gebacken bekomme ich's leider noch nicht:

                    Habe mit der einfachsten Variante angefangen und mal folgendes ausprobiert:

                    function ScrollDown (step) {  
                    window.document.getElementById("menuContainer").scrollTop += step;}  
                      
                    document.getElementById("menuButtonDown").addEventListener("mousedown", function (){  
                    scrolling = false;  
                    if (scrolling) window.clearInterval(scrolling);  
                    scrolling = window.setInterval(function(){ScrollDown(5);},250);});  
                      
                    document.getElementById("menuButtonDown").addEventListener("mouseup", function(){  
                    scrolling = false;  
                    if (scrolling) window.clearInterval(scrolling);});  
                      
                    document.getElementById("menuButtonDown").addEventListener("mouseout", function(){  
                    scrolling = false;  
                    if (scrolling) window.clearInterval(scrolling);});
                    

                    Der Effekt dabei ist jetzt, dass wenn ich den Button ("menuButtonDown") einmal kurz anclicke, dann scrollt das Menü ("menuContainer") tatsächlich nach unten, d.h. es 'hüpft' im viertelsekunden Rhytmus nach unten ;-)

                    Also der erste Teil der Funktion läuft schonmal irgendwie, aber der zweite Teil funktioniert leider nicht - sprich, wenn ich die Maustaste wieder loslasse, zuckelt das Menü trotzdem weiter nach unten, bis es am Ende angelangt ist, und wenn ich mit dem Mausrad versuche hochzuscrollen,
                    scrollt er automatisch wieder nach unten, d.h. die erste Funktion hört einfach nicht mehr auf.

                    Ob ich es dabei so schreibe wie ichs hier gepostet habe, oder ob ich deine Schreibweise mit .onmouseup usw. aus dem ersten Post übernehme, macht dabei leider keinen Unterschied. (Außer den, dass mir im Browser "scrolling is not defined" angezeigt wird, wenn ich die Zeile "scrolling = false;" nich über die Funktionszeile drübersetze...)

                    Was mache ich falsch?

                    By the way: window.document.getElementById("...")  ---> ist das "window" da nicht überflüssig?

                    Nochmal besten Dank und Gruß,

                    Roadster.

                    1. Aloha ;)

                      function ScrollDown (step) {

                      window.document.getElementById("menuContainer").scrollTop += step;}

                      document.getElementById("menuButtonDown").addEventListener("mousedown", function (){
                      scrolling = false;
                      if (scrolling) window.clearInterval(scrolling);
                      scrolling = window.setInterval(function(){ScrollDown(5);},250);});

                        
                      Hm, so kanns ja (wie du selbst schon festgestellt hast) nicht funktionieren. Bedenke: Die Abbruchbedingung für's scrollen (window.clearInterval) wird hier nie erreicht. Schließlich setzt du vorher die Variable scrolling, in der du eigentlich das Handle gespeichert hattest, auf false. `if (scrolling)`{:.language-javascript} ist also nie erfüllt.  
                        
                      Du musst - wie in meinem ursprünglich gegebenen Beispiel - die Zeilen vertauschen. Also zuerst if ... und dann scrolling = false;  
                        
                      Das betrifft auch mouseup und mouseout  
                        
                      
                      > Der Effekt dabei ist jetzt, dass wenn ich den Button ("menuButtonDown") einmal kurz anclicke, dann scrollt das Menü ("menuContainer") tatsächlich nach unten, d.h. es 'hüpft' im viertelsekunden Rhytmus nach unten ;-)  
                        
                      Sehr schön ;) Wenn alles läuft und du ne richtig smoothe Animation willst, kannst du ja den Step heruntersetzen und die Intervall-Zeit auch. Du solltest aber darauf achten, die Intervall-Zeit nicht allzu klein zu machen (merkst du dann schon). Im 1ms-Bereich z.B. ist es etwas witzlos, da kommt der Browser nicht mit der Darstellung hinterher. Von nicht so rechenstarken Geräten mal ganz zu schweigen ;) aber so auf 100ms oder vllt. sogar 50ms kannst du's wahrscheinlich schon drücken ;)  
                        
                      
                      > Ob ich es dabei so schreibe wie ichs hier gepostet habe, oder ob ich deine Schreibweise mit .onmouseup usw. aus dem ersten Post übernehme, macht dabei leider keinen Unterschied. (Außer den, dass mir im Browser "scrolling is not defined" angezeigt wird, wenn ich die Zeile "scrolling = false;" nich über die Funktionszeile drübersetze...)  
                        
                      Humm-Homm... Also, das mit "scrolling is not defined" lässt sich einfach lösen: Ganz am Anfang (vor allem anderen, vor allem außerhalb der Funktionen) "scrolling" einfach mal definieren:  
                        
                      `var scrolling = false;`{:.language-javascript}  
                        
                      Damit vermeidest du den not-defined-error auf jeden Fall  
                        
                      Das andere ... muss ich mal selber testen / googeln. Moment...  
                        
                      Okay. [Ein identisches Minimalbeispiel funktioniert.](http://jsfiddle.net/kxntb94g/1/) Allerdings nur solange, bis ich die Definition von "int" (in unserem Fall scrolling) ganz am Anfang weglasse. Scheint also, der Fehler ist gefunden.  
                        
                      Ist eigentlich auch klar. In der Reihenfolge, wie du es hier beschrieben hast, geht es logisch nicht (wie oben begründet) und in der richtigen Reihenfolge hattest du wegen fehlender Definition von "int" einen JS-error, der wohl alles andere restlos abgebrochen hat.  
                        
                      
                      > By the way: window.document.getElementById("...")  ---> ist das "window" da nicht überflüssig?  
                        
                      Ist es, du hast Recht. Genauso wie vor setInterval und clearInterval. Naja, manchmal schreib ichs, manchmal nicht. Ich gebe dir Recht - es ist übersichtlicher, es wegzulassen ;)  
                        
                      Einen Sinn hat das "window" trotzdem (kommt mir gerade in den Sinn). Ich verwende es normalerweise nur da, wo die aufzurufende Funktion / Eigenschaft eine normale, Standardkonforme Eigenschaft von window ist. Damit kann ich rein optisch native Funktionen von selbstgeschriebenen trennen und beuge Verwirrung vor.  
                        
                      Grüße,  
                        
                      RIDER  
                        
                      
                      -- 
                      Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
                        
                      ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[ 
                      
                      1. Aloha ;)

                        Hallo RIDER :)

                        Also, etwas verspätet, aber hier nochmal die formelle Bestätigung: Ich habe es hinbekommen! :D

                        Habe mich für die 'generalisierte' Variante entschieden (wenn man es einmal kapiert hat, ist es ja auch unproblematisch und erspart einem einigen Schreibaufwand) - und es läuft alles bestens!

                        Meine Menüs sehen extrem gediegen aus (kein Vergleich zu dem ästhetischen Totalschaden, den die Standard-Scrollbar angerichtet hat!) und sind kinderleicht und sehr geschmeidig zu bedienen.

                        Funktioniert alles Perfekt!

                        Der Witz dabei ist, dass es bei meinem rahmenlosen 'minimal-design' ganz ohne Scrollbar sogar besser aussieht, als wenn ich mir eine eigene Scrollbar hätte gestalten können! ;)

                        Jedenfalls kann in keinster Weise davon gesprochen werden, dass ohne sichtbare Scrollbar zwingend soviel Funktionalität verloren geht, dass der Benutzer dabei wirklich beeinträchtigt wird, - die richtige grafische Umsetzung vorausgesetzt, geht das auch ohne Scrollbar völlig unproblematisch (auch wenn ich dabei bleibe: Standard-Bedienelemente sollten nur als Back-Up oder als Option für den Benutzer dienen, den Leuten aber nicht alternativlos aufgezwungen werden...).

                        Also, nochmal tausend Dank für deine Mühe! - Es hat sich gelohnt! :)

                        Beste Grüße und vielleicht bis bald,

                        Roadster.

  5. @@Roadster:

    nuqneH

    Dabei würde ich aber gerne auf eine klassische Scroll-Leiste an der Seite der Box verzichten

    Darauf wird bereits weitgehend verzichtet. Ich bekomme keine Scrollbar zu sehen, weder auf OS X noch auf iOS noch auf Android. Erst beim Scrollen legt sich eine Scrollbar drüber, um die aktuelle Position anzuzeigen.

    selbst gestaltete Buttons anbringen, die wenn sie gehovert werden …

    Bedenke, dass viele Nutzer die Buttons gar nicht hovern könnten, weil es auf ihrem Gerät gar keinen Mauscursor gibt. Die Interaktion müsste auf Click reagieren, nicht auf Hover.

    … die Liste mit den Navigations-Punkten hoch und runter scrollen.

    In einer von dir vorgegebenen Geschwindigkeit, die für manche zu langsam, für andere zu schnell ist. Nutzer sollten immer in der ihnen angenehmen Geschwindigkeit scrollen können — was bei den nativen Scrollelementen der Fall ist.

    Dass auch das Scrollen per Mausrad und Gesten auf Touchpad oder Touchscreen funktionieren muss — was bei den nativen Scrollelementen der Fall ist —, wurde schon gesagt.

    Es ist demzufolge unsinnig, die nativen Scrollelemente außer Kraft zu setzen und die Funktionalität nachbauen zu wollen. Das kann nur schiefgehen. Lass es.

    Was du tun kannst, ist Scrollbars zu stylen.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Hallo

      Was du tun kannst, ist Scrollbars zu stylen.

      Davon ab, dass das – dem Nachtrag im Eintrag und den Kommentaren zufolge – nur im IE und in Chrome (und damit wahrscheinlich in den aktuellen Operas) funktioniert, darfst du gerne auf die Fallstricke hinweisen, die früher™ oft zu sehen waren, als der IE noch eine führende Rolle spielte. Du hältst doch damit sonst nicht hinterm Berg.

      @Roadster: Da du nach deinen beschreibungen ein dunkles Farbschema verwendest, ein Rat. Bitte lass es, die Scrollbars Ton in Ton mit deinen Hintergrundfarben zu halten. Gerade bei dunklen Farbschemata führt das oft dazu, dass die Scrollbars nicht erkennbar sind und sich dem Benutzer die Möglichkeit des Scrollens verschließt.

      Tschö, Auge

      --
      Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
      Terry Pratchett, "Wachen! Wachen!"
      ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
      Veranstaltungsdatenbank Vdb 0.3
  6. Om nah hoo pez nyeetz, Roadster!

    overflow-style wäre unter Umständen zukünftig eine Möglichkeit.

    Ich kann overflow-style jetzt in den Specs und RCs nicht finden, es kann also auch wieder aus den Überlegungen verschwunden sein.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Elf und Elfmetertöter.