Falk: Keyevents

Hi,

Ich nutze auf meiner Seite die JSScrollbar (zu finden hier: http://www.n-son.com/scripts/jsScrolling/index.html) um einen div zu scrollen.
aktiviert wird das scrolling beim klick auf das dementsprechende Image.

Da ich nun aber auch die arrow-Tasten nutzen möchte, habe ich ein mouseevent simuliert. problematisch dabei ist, dass es nicht mehr aufhört zu funktionieren. ;)
der Plan ist folgender:

Beim keydown-event soll das onmousedown event eines images aufgerufen werden. beim keyup event folglich das onmouseup event des images. Funzt einwandfrei solange ich die Taste nur kurz betätige. Bleibe ich aber länger drauf, fängt die scrollbar planmäßig an durchweg zu scrollen. dadurch läuft das script und das keyup-event scheint nicht mehr einzutreffen. somit hört es ned auf zu scrollen. Um das script zu stoppen MUSS das mouseup event aufgerufen werden bzw eine Funktion namens scroller.stopScroll(). aber scheinbar wird Keyup nicht ausgeführt solange noch ein anderes script läuft.

Theoretisch kann es nicht am Code der Scrollbar liegen. denn mittels Maus werden die Events onmousedown und onmouseup korrekt aufgerufen und ausgeführt.  Auf das durchgängige scrollen möchte ich natürlich nciht verzeichten, sonst klickt sich der Nutzer ja den Zeigefinger kaputt, oder womit auch immer er klickt.

Ein Lösungsansatz war es, nicht das onmouse-event des Images zu nutzen, sondern die darin angesprochene Funktion direkt. Dann allerdings bewegt sich das scrollbar handle (Der Scrollbalken sozusagen) nicht mit. Denn dieser reagiert nur auf den Imageklick wie es scheint.

spiel schon den ganzen Tag. finde keine Lösung. Ihr vielleicht?

Hier meine Funktion.
 ~~~javascript document.onkeydown = function(event) {
event = event || window.event;
event.cancelBubble = true;
event.returnValue = false;

if (event.keyCode == 40) {  
	simulate(document.getElementById("Scrollbar-Down"), 'mousedown')  
}  
if (event.keyCode == 38) {	  
	simulate(document.getElementById("Scrollbar-Up"), 'mousedown')  
}  
return event.returnValue;  

}

document.onkeyup = function(event) {
event = event || window.event;
event.cancelBubble = true;
event.returnValue = false;
if (event.keyCode == 40) {
simulate(document.getElementById("Scrollbar-Down"), 'mouseup')
}
if (event.keyCode == 38) {
simulate(document.getElementById("Scrollbar-Up"), 'mouseup');
}

return event.returnValue;  

}

  
beste Grüße, Falk
  1. @@Falk:

    nuqneH

    Ich nutze auf meiner Seite die JSScrollbar […]
    aktiviert wird das scrolling beim klick auf das dementsprechende Image.

    Und damit kann jeder Nutzer in der ihm genehmen Geschwindigkeit scrollen?

    Da ich nun aber auch die arrow-Tasten nutzen möchte, habe ich ein mouseevent simuliert.

    Ich möchte aber das Eingabegerät nutzen, dass ich immer zum Scrollen verwende: mein Touchpad.

    Lass bitte das JavaScript-Gefummel sein. Verwende das UI-Element, das zum Scrollen gedacht ist und das jeder Nutzer (er)kennt: eine Scrollbar.

    Qapla'

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

      nuqneH

      Ich nutze auf meiner Seite die JSScrollbar […]
      aktiviert wird das scrolling beim klick auf das dementsprechende Image.

      Und damit kann jeder Nutzer in der ihm genehmen Geschwindigkeit scrollen?

      Ja man kann damit sehr gut scrollen. auch wenn sie klar hin und wieder Probleme macht. Aber manchmal geht es eben nicht nur um die Funktion sondern da steht Design im Vordergrund. Oder auch einfach der Lerneffekt.

      Da ich nun aber auch die arrow-Tasten nutzen möchte, habe ich ein mouseevent simuliert.

      Ich möchte aber das Eingabegerät nutzen, dass ich immer zum Scrollen verwende: mein Touchpad.

      viel Spaß

      Lass bitte das JavaScript-Gefummel sein. Verwende das UI-Element, das zum Scrollen gedacht ist und das jeder Nutzer (er)kennt: eine Scrollbar.

      Hilfreich!

      Qapla'

      Alles in allem würde ich sagen, wenn du nichts sinnvolles zu einer Frage beitragen kannst, dann lass es einfach zu antworten. Leben und leben lassen.

      1. @@Falk:

        nuqneH

        Ja man kann damit sehr gut scrollen. auch wenn sie klar hin und wieder Probleme macht. Aber manchmal geht es eben nicht nur um die Funktion sondern da steht Design im Vordergrund.

        „Design ist nicht nur, wie es aussieht oder sich anfühlt. Design ist, wie es funktioniert.“ (Steve Jobs)

        Alles in allem würde ich sagen, wenn du nichts sinnvolles zu einer Frage beitragen kannst, dann lass es einfach zu antworten.

        Ich würde sagen, wenn du das Sinnvolle in Anworten nicht erkennen kannst, dann lass es einfach zu fragen.

        Qapla'

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

          nuqneH

          Ja man kann damit sehr gut scrollen. auch wenn sie klar hin und wieder Probleme macht. Aber manchmal geht es eben nicht nur um die Funktion sondern da steht Design im Vordergrund.

          „Design ist nicht nur, wie es aussieht oder sich anfühlt. Design ist, wie es funktioniert.“ (Steve Jobs)

          Typisch für Menschen unserer heutigen Zeit, zitieren Steve Jobs. "Form follows Function", ist das nicht die Aussage dahinter? Eine Bauhaus Geschichte. Da hat der Steve aber gut aufgepasst. Nur aus diesem Grund bauen wir nicht mehr die schönen Dinge sondern nur noch die funktionellen und alle glauben es wäre schön weil es funktoniert. Schau dir nur die Häuser aus den 60ern an im Vergleich zu den Baustilen in früheren Jahrhunderten. Ich würde empfehlen mich davon zu lösen. Schönheit funktioniert in sich selbst, es benötigt keine Funktion. Schau dir eine Rose an.

          Alles in allem würde ich sagen, wenn du nichts sinnvolles zu einer Frage beitragen kannst, dann lass es einfach zu antworten.

          Ich würde sagen, wenn du das Sinnvolle in Anworten nicht erkennen kannst, dann lass es einfach zu fragen.

          ich habe sehr wohl erkannt was du mir sagen wolltest. Aber ich möchte nun einmal diese Scrollbar. Und Ich wüsste gern wie ich dieses Problem lösen könnte, anstatt zu lesen ich solle die Finger davon lassen. Bisher habe ich von dir nichts gelesen was mir helfen könnte den Weg zu gehen wie ich ihn gern hätte. Ich passe mich nicht einer Ideologie eines anonymen oder überhaupt irgendeines Menschen an.

          also, falls irgendwer einen Vorschlag hätte, wäre ich sehr dankbar. Das geht doch sonst auch im selfhtml-Forum.

          Qapla'

          1. @@Falk:

            nuqneH

            „Design ist nicht nur, wie es aussieht oder sich anfühlt. Design ist, wie es funktioniert.“ (Steve Jobs)

            Typisch für Menschen unserer heutigen Zeit, zitieren Steve Jobs.

            Mir ging es um den Inhalt des Zitats, nicht um den Autor.

            "Form follows Function", ist das nicht die Aussage dahinter?

            Ich wollte auf die Aussage hinaus, dass Design weit mehr ist als visuelles Design (Layout). Eben die ganze Funktion des Systems, nicht nur das Aussehen der Oberfläche.

            Wenn du gern andere Zitate als welche von Steve Jobs hättest, hab ich passende von Aral Balkan parat:

            “Design is about worrying about the right thing: solving your user’s problems not your own problems.”

            “Design is much more about saying ‘no’ than it is about saying ‘yes’.”

            ich habe sehr wohl erkannt was du mir sagen wolltest. Aber ich möchte nun einmal diese Scrollbar.

            Cheatahs „Regel Nummer Eins der Usability: Was Du möchtest, ist egal. Was möchte der Benutzer?“

            Zu Nachbau von Scrolling mit JavaScript wäre „nein“ zu sagen, nicht „ja“.

            also, falls irgendwer einen Vorschlag hätte, wäre ich sehr dankbar. Das geht doch sonst auch im selfhtml-Forum.

            Sonst auch im SELFHTML-Forum geht, was Orlando sagte: „Ziel dieses Forums ist es, die Qualität von Webseiten zu steigern. Es wäre daher widersinnig, dir bei der Realisation des Gegenteils zu helfen.“

            Ich werde aber niemanden davon abhalten, es zu tun.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. @@Gunnar Bittersmann:

              nuqneH

              Wenn du gern andere Zitate als welche von Steve Jobs hättest, hab ich passende von Aral Balkan parat:

              “Design is about worrying about the right thing: solving your user’s problems not your own problems.”

              “Design is much more about saying ‘no’ than it is about saying ‘yes’.”

              Die Zitate stammen aus dem Artikel Design is not veneer, der so lesenswert ist, dass er ein Ingrid-Posting wert ist.

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
              1. Die Zitate stammen aus dem Artikel Design is not veneer, der so lesenswert ist, dass er ein Ingrid-Posting wert ist.

                Definitiv lesenswert, Danke. Der Blocksatz ist aber ein großes Fail, gerade wo er sich doch auch auf Typographie bezieht.

                1. Tach,

                  Der Blocksatz ist aber ein großes Fail, gerade wo er sich doch auch auf Typographie bezieht.

                  don’t do as I do, do as I say. ;-)

                  mfg
                  Woodfighter

          2. „Design ist nicht nur, wie es aussieht oder sich anfühlt. Design ist, wie es funktioniert.“ (Steve Jobs)

            Typisch für Menschen unserer heutigen Zeit, zitieren Steve Jobs.

            Auch wenn ich erklärter Apple-Verweigerer bin - in diesem Fall ist das Jobs-Zitat mehr als Angebracht - Jobs war zwar ein egozentrischer Despot aber in diesem Fall hatte er eindeutig recht.

            "Form follows Function", ist das nicht die Aussage dahinter?

            Nein, eigentlich nicht - im konkreten Fall geht es darum das du das Rad neu erfinden willst bei einer Sache die so gut etabliert ist, dass es einfach unsinnig ist - du willst aus der Form die Funktion ableiten, aber eigentlich solltest du aus der Funktion die Form ableiten.

            Der UI-Designer muss also eine Möglichkeit finden, ein Design zu erstellen, welches zur Funktion ("Scrollbar") passt und nicht umgekehrt wie du versuchst hier eine Funktion zu finden, die zu einer Form passt, die nicht erwartungskonform ist.

            Schönheit funktioniert in sich selbst, es benötigt keine Funktion. Schau dir eine Rose an.

            Die Form einer Rose erfüllt eine Funktion die sich evolutionär ergibt - die Stacheln[!] verhindern, dass Fressfeinde die Planze vernaschen, die Blüte sorgt dafür, dass Insekten angelockt werden um sie zu bestäuben. Wenn sie also "Schönheit" ausstrahlt, hat die Evolution einen Zweck erfüllt.

            Primär ist aber die Funktion entscheidend, eine Blüte die "noch schöner" ist als eine Rose aber ein Bestäuben nicht möglich macht wird über kurz oder lang aussterben.

            Und genau darum solltest du keine Scrollbereiche machen die man nicht ordentlich bedienen kann.

            Bisher habe ich von dir nichts gelesen was mir helfen könnte den Weg zu gehen wie ich ihn gern hätte. Ich passe mich nicht einer Ideologie eines anonymen oder überhaupt irgendeines Menschen an.

            Gunnar wollte dir aufzeigen, dass dein Vorhaben konseqenzen hat, die du noch nicht bedacht hast - du stolperst von einem in das nächste Probleme.

            Es gibt fertige Scripte die bereits einen großteil der von dir noch zu machenden Probleme gelöst haben - z.B. jscrollpane.
            http://jscrollpane.kelvinluck.com/basic.html

            Aber auch hier besteht z.B. das Problem mit Touchpads - auf einem MacBook ist das Scrollen nicht möglich, die funktionieren "anders" - bei HP- und Sony-Touchpads aber schon.

            also, falls irgendwer einen Vorschlag hätte, wäre ich sehr dankbar. Das geht doch sonst auch im selfhtml-Forum.

            Ja sicher geht das sonst auch - und danach kommt "sonst auch" immer wieder das gejammere wenn Folgeprobleme auftreten und sich der OP dann irgendwann nicht mehr meldet oder nach 26 Replys sagt "ihr hattet recht, ich mach es jetzt doch anders".

  2. Hallo,

    Ich nutze auf meiner Seite die JSScrollbar (zu finden hier: http://www.n-son.com/scripts/jsScrolling/index.html) um einen div zu scrollen.
    aktiviert wird das scrolling beim klick auf das dementsprechende Image.

    Dieses Script ist schon älter und scheint im schlechten Sinne modular zu sein – es ist eine größere Umbauarbeit nötig, um eine halbwegs gute Tastaturunterstützung hinzuzufügen.

    Es hat schon seinen Grund, warum man kein Script findet, das alle Bedienmöglichkeiten sinnvoll vereint: Es ist eine Sysyphus-Arbeit, da man nie an den Bedienkomfort nativer Scrollbars herankommt.

    Ein Lösungsansatz war es, nicht das onmouse-event des Images zu nutzen, sondern die darin angesprochene Funktion direkt.

    Das solltest du auf jeden Fall tun, anstatt »von hinten durch die Brust ins Auge« Mausereignisse bei Tastaturereignissen zu simulieren. Schaue dir die Methoden des Scriptes an und rufe sie entsprechend auf. Wenn du spezifische Funktionen von außen aufrufen willst, dann müsstest du sie ggf. isolieren.

    Dann allerdings bewegt sich das scrollbar handle (Der Scrollbalken sozusagen) nicht mit. Denn dieser reagiert nur auf den Imageklick wie es scheint.

    Ja, siehe Script:
    http://www.n-son.com/scripts/jsScrolling/src/jsScrollbar.js
    Dort wird _scrollbarClick bei Mausevents aufgerufen und diese Methode delegiert an _scrollUp, _scrollDown und so weiter. Auf diese Methoden hast du von außen bei der jsScrollbar-Instanz Zugriff.

    Mathias