DIV Inhalt automatisch scrollen je nach Mausposition

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • DIV Inhalt automatisch scrollen je nach Mausposition

    Hallo zusammen,

    mich beschäftigt jetzt seit einigen Tagen ein Problem, das ich einfach nicht auf die Kette bekomme. Ich konnte auch nach stundenlanger Suche keine Lösung finden, die mich essenziell weiter gebracht hätte.
    Ich hätte gerne eine DIV Scroller Lösung, funktional exakt wie sie auf http://www.renault.de/ zu sehen ist.
    In der Mitte bei "Neuwagen" und "Transporter" kann man sich durch das Menü scrollen, dass passiert automatisch, je nach dem wo sich die Maus gerade befindet. Auf dieser Seite ist das mit Flash gelöst, ich hätte jedoch gerne eine saubere und vor allem barrierefreie und suchmaschinengerechte Version, weshalb das Menü grundsätzlich komplett angezeigt werden soll, und für JS Browser eben anständig formatiert. Damit fällt auch weg, dass ich den Inhalt irgendwie mit JavaScript und innerHTML oder document.write einbringe!

    Hier mal mein primitiver Code bisher:

    PHP-Code:
    <style>
    #scroll{
       
    overflow:hidden;
       
    width:200px;
       
    height:100px;
       
    border:1px solid #CCC;
       
    background#F4F4F4;
    }
    </
    style>
    <
    script>
    iTop 0;
    function 
    DoIt(obj,evt,content)
    {
       
    intTop = (evt.offsetY) ? evt.offsetY evt.layerY;
       
    objMdl obj.offsetHeight 2;

       if(
    intTop objMdl)
       {
          
    window.status="oben"//debug
          
    iTop=iTop+2;
          
    document.getElementById(''+content+'').style.marginTop=iTop;
          
    //window.setTimeout(DoIt(obj,evt,content), 1000);
       
    }

       if(
    intTop objMdl)
       {
          
    window.status="unten"//debug
          
    iTop=iTop-2;
          
    document.getElementById(''+content+'').style.marginTop=iTop;
          
    //window.setTimeout(DoIt(obj,evt,content), 1000);
       
    }
    }
    </
    script>
    <
    body>
    <
    div id="scroll" onmouseover="DoIt(this,event,'content')">
       <
    ul id="content">
          <
    li>1</li>
          <
    li>2</li>
          <
    li>321</li>
          <
    li>421</li>
          <
    li>521</li>
          <
    li>621</li>
          <
    li>6721</li>
          <
    li>343243241</li>
          <
    li>1sadsad</li>
          <
    li>1sad</li>
          <
    li>1wqeqweqwes</li>
          <
    li>1asdsadsadsad</li>
          <
    li>1asdsad</li>
       </
    ul>
    </
    div
    Soweit so gut. Ich prüfe die Höhe des Scrollers und je nach dem ob der Mauszeiger in der oberen Hälfte oder der unteren ist, erhöhe oder veringere ich das margin des darin befindlichen <ul> Elements.

    Das Problem ist, dass ich nur scrolle, wenn ich die Maus bewege. Ich dachte mir dem rekursiven Aufruf (hier auskommentiert) käme ich dann soweit, dass er weiter scrollt. Dann läuft er aber in einen timeout mit "out of memory" Fehler. Zudem habe ich noch keine Idee, wie ich dem Script beibringen kann, dass wenn er unten angekommen ist, er nicht mehr weiter das margin erhöhen soll.

    An eine weiche Scrollfunktion oder gar das abbremsen bzw. je nach Mausposition schnellere oder langsamere scrollen ist auch noch nicht zu denken, letzteres bekäme ich aber schon hin.

    Ist hier irgendwer der mir da helfen kann? Wie gesagt, je näher es an diese Flash Funktion herankommt, umso besser. Zudem liebe ich es gerne einfach. Am liebsten wäre natürlich, dass ich diese Funktion mit Parametern immer wieder überall aufs neue einbinden kann, und die Funktion zentral irgendwo in einer JS-Datei unterbringen kann.

    Gruß
    Armin
    Mein Meerschweinchen Ratgeber

  • #2
    Vielleicht kannste hiermit was anfangen, so als Grundlage?

    Kommentar


    • #3
      Auch bei Scriptaculous im "Treasure Chest" reingucken und unbedingt auch bei MooTools, vielleicht gibts sowas schon fertig.

      Kommentar


      • #4
        Das geht auch mit ein paar Zeilen JavaScript, da braucht man kein Framework für.

        Eigentlich musst du nur die Position der Maus innerhalb des (kleineren) Containers abbilden auf die Position des (größeren) Inhaltes. Ist im Prinzip Dreisatz.

        Du brauchst die Höhe des Containers und die Mausposition innerhalb des Containers. Dann teilst du die Position durch die Höhe, so dass ein Wert zwischen 0 und 1 rauskommt. Den multiplizierst du mit der Höhe des Inhalts und nimmst das als negativen margin-top. Eventuell kannst du noch bei der Größe die Höhe des Containers abziehen, weil der Inhalt sonst nach oben komplett "rausgescrollt" wird.

        Und weil grad Werbepause ist, hab ich noch ne Demo gemacht: Scroller.
        hopka.net!

        Kommentar


        • #5
          Also ich persönlich find dieses Auto-Scrollen spontan lästig und würde demnach einfach einen div mit fester Höhe und overflow:auto; vorschlagen.

          Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!

          bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
          Wie man Fragen richtig stellt

          Kommentar


          • #6
            So einfach ist es nicht @Hopka:
            Soweit so gut. Ich prüfe die Höhe des Scrollers und je nach dem ob der Mauszeiger in der oberen Hälfte oder der unteren ist, erhöhe oder veringere ich das margin des darin befindlichen <ul> Elements.
            Da musst du schon mit Timeouts arbeiten, ein einfaches mousemove reicht da nicht!

            Kommentar


            • #7
              OffTopic:
              Wofür haben inzwischen eigentlich 99% aller Benutzer ein Scrollrad (ja, sogar die mit Mac)?
              Die Regeln | rtfm | register_globals | strings | SQL-Injections | [COLOR=silver][[/COLOR][COLOR=royalblue]–[/COLOR][COLOR=silver]][/COLOR]

              Kommentar


              • #8
                Original geschrieben von PHP-Desaster
                So einfach ist es nicht @Hopka:
                Da musst du schon mit Timeouts arbeiten, ein einfaches mousemove reicht da nicht!
                Also für's Erste tut es doch (fast) genau das, was auch das Teil auf der Renault-Seite macht.

                Original geschrieben von Bierbaron
                An eine weiche Scrollfunktion oder gar das abbremsen bzw. je nach Mausposition schnellere oder langsamere scrollen ist auch noch nicht zu denken, letzteres bekäme ich aber schon hin.
                Erst dafür braucht man Timeouts, also wenn der Inhalt noch weiter scrollen soll obwohl sich die Maus nicht mehr bewegt. Aber das kann man auch leicht einbauen, wenn das Grundprinzip erstmal vorhanden ist.
                hopka.net!

                Kommentar


                • #9
                  Vielen Dank für die Antworten bisher.

                  Die Lösung von Hopka brachte mich bisher am weitesten (Vielen Dank dafür!), damit kann ich mich gut anfreunden. Allerdings läuft das nicht unter dem IE, auch schon im Ursprungszustand nicht. Mit meinen bescheidenen Kenntnissen habe ich es nicht hinbekommen. Kannst Du mir hier vllt. noch mal unter die Arme greifen? Mein umgebautes JS sieht derzeit so aus:


                  PHP-Code:
                  function scroll(objevtcontent)
                  {
                     var 
                  content document.getElementById(''+content+'');
                     
                  // Mausposition innerhalb des Containers
                     
                  var mouseY evt.pageY obj.offsetTop;
                     
                  // auf 0 - 1 normierter Wert
                     
                  var pos mouseY obj.clientHeight;
                     
                  mouseY = (pos==0) ? mouseY -mouseY +5;
                     
                  // Faktor auf Höhe des Inhaltes anwenden (hier wird noch die Höhe des Containers abgezogen, damit der Inhalt nicht komplett nach oben verschwindet
                     
                  content.style.marginTop = ((content.clientHeight obj.clientHeight) * -pos) + 'px';
                  }
                  ...
                  <
                  div id="container" onmousemove="scroll(this,event,'content')">
                  <
                  ul id="content">
                  ... 
                  Der IE stört sich am evt.pageY, ich habe mir temporär auch mal meine Lösung eingebaut, um die Cursorposition zu bestimmen:

                  PHP-Code:
                  var mouseY = (evt.offsetY) ? evt.offsetY evt.layerY
                  Jetzt wird der Inhalt im IE jedoch unterhalb des Mauszeigers gescrollt, zudem bekomme ich eine Fehlermeldung (natürlich IE like super aussagekräftig; "Ungültiges Argument") wenn ich mit der Maus auf 0px Höhe bin, im Firefox läuft es weiterhin tadellos ohne jeden Fehler (in der Konsole).

                  Ich glaube ich habe ein Brett vorm Kopf!

                  Edit: Noch etwas, gibt es eine Möglichkeit mit ChildNode oder so den Inhalt des Containers direkt anzusprechen? Dann spare ich mir die ID und Übergabe dessen in content . Natürlich habe ich es schon probiert, und natürlich nicht hinbekommen.
                  Zuletzt geändert von Bierbaron; 13.12.2007, 00:30.
                  Mein Meerschweinchen Ratgeber

                  Kommentar

                  Lädt...
                  X