Ergebnis 1 bis 1 von 1

Thema: [JQuery] Content über Schaltflächen scrollen

  1. #1
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard [JQuery] Content über Schaltflächen scrollen

    Eher ein kleines Snippet, dass ich für ein aktuelles Projekt geschrieben habe, ich finde es aber ganz praktisch.

    Es ermöglicht für ein HTML-Element mit fester Höhe und overflow:hidden; durch den enthaltenen Content zu scrollen.

    Hier eine simple kleine Demo:
    http://coding-keller.de/scrollable-div/demo.html

    Code für die Demo:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Scrollable Div Demo</title>
        <style type="text/css">
          #my-scroll-wrapper {
            height:100px;
            width:100px;
            overflow:hidden;
            padding:10px;
            border:1px solid #000;
          }
          #my-scroll-control span {
            display:inline-block;
            padding:5px 10px;
          }
        </style>
      </head>
     <body>
        <div id="my-scroll-control">
          <span onmousedown="scroll('#my-scroll-wrapper','#my-scroll-content','up')" onmouseup="scrollstop()">
            Hoch
          </span>
          <span onmousedown="scroll('#my-scroll-wrapper','#my-scroll-content','down')" onmouseup="scrollstop()">
            Runter
          </span>
        </div>
        <div id="my-scroll-wrapper">
          <div id="my-scroll-content">
            Zeile 1<br/>
            Zeile 2<br/>
            Zeile 3<br/>
            Zeile 4<br/> 
           Zeile 5<br/>
            Zeile 6<br/>
            Zeile 7<br/>
            Zeile 8<br/>
            Zeile 9<br/>
            Zeile 10<br/>
            Zeile 11<br/>
            Zeile 12<br/>
            Zeile 13<br/>
            Zeile 14<br/>
            Zeile 15<br/>
            Zeile 16<br/>
            Zeile 17<br/>
            Zeile 18<br/>
            Zeile 19<br/>
            Zeile 20
          </div>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript">
          var scrollPx    = 1; // Anzahl der Pixel um die bei jedem Schritt gescrollt wird
          var scrollSpeed = 5; // Millisekunden Pause zwischen jedem Schritt
          var containerHeight,contentHeight,contentMargin,scrollTimer,activeContainer,activeContent;
          function scroll(container,content,direction) {
            activeContainer = container;
            activeContent   = content;
            if(direction=="up") {
              scrollup();
            }
            else {
              scrolldown();
            }
          }
          function scrollstop() {
            clearTimeout(scrollTimer);
          }
          function scrolldown() {
            containerHeight = $(activeContainer).height();
            contentHeight   = $(activeContent).height();
            contentMargin   = $(activeContent).css("margin-top");
            contentMargin   = parseInt(contentMargin.substr(0,contentMargin.indexOf("px")),10);
            if(containerHeight-contentMargin<contentHeight) {
              contentMargin-= scrollPx;
              $(activeContent).css("margin-top",contentMargin+"px");
              scrollTimer = setTimeout("scrolldown()",scrollSpeed);
            }
            else {
              clearTimeout(scrollTimer);
            }
          }
          function scrollup() {
            containerHeight = $(activeContainer).height();
            contentHeight   = $(activeContent).height();
            contentMargin   = $(activeContent).css("margin-top");
            contentMargin   = parseInt(contentMargin.substr(0,contentMargin.indexOf("px")),10);
            if(contentMargin<0) {
              contentMargin+= scrollPx;
              $(activeContent).css("margin-top",contentMargin+"px");
              scrollTimer = setTimeout("scrollup()",scrollSpeed);
            }
            else {
              clearTimeout(scrollTimer);
            }
          }
        </script>
      </body>
    </html>
    Erläuterung
    Ich habe um den scrollbaren Content ein div-Element mit fester Höhe und den overflow auf hidden gesetzt. Darin liegt ein div welches den eigentlich Content enthält. Dieses wird beim Scrollen durch die Eigenschaft margin-top innerhalb des umschließenden div-Elements verschoben.
    Wie schnell und flüssig bzw. ruckelig dies geschieht kann über die JS-Variablen scrollPx und scrollSpeed festgelegt werden.
    Die Steuerelemente erhalten onmousedown- bzw. onmouseup-Anweisungen (genausogut kann onmouseover und onmouseout verwendet werden). Bei onmouseup soll das scrollen gestoppt werden, also wird die Funktion scrollstop aufgerufen. Beim onmouseover soll gescrollt werden, also wird die Funktion scroll aufgerufen. Hier müssen in dieser Reihenfolge die JQuery-Handler für das umschließende div, für das div welches den Content enthält, sowie die Richtung in die gescrollt wird ("up" oder "down") übergeben werden.

    Ist denke ich nicht sonderlich kompliziert, wer Fragen hat stelle diese.

    Vielleicht kann es ja jemand mal brauchen.

    P.S.: Ok, das wird wohl auch das letzte Mal sein, dass ich Code hier im Forum poste. Es macht nicht besonders viel Spaß im Nachhinein jeden einzelnen Zeilenumbruch nochmal hier im Eingabefenster setzen zu müssen, weil das Forum Zeilenumbrüche aus Ubuntu nicht erkennt...
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von SinnlosS (31.01.2013 um 17:04 Uhr)
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

Ähnliche Themen

  1. javascript um content nach dem klicken zu laden
    Von dieRaute im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 22.11.2009, 15:44
  2. Antworten: 5
    Letzter Beitrag: 12.10.2009, 23:47
  3. Suche Content-Slideshow in Javascript oder Flash
    Von HighFlyer im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 11.12.2008, 21:48
  4. Scrollen mit JavaScript
    Von Rausch im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 09.06.2008, 10:53
  5. img - Eigenschaften über Javascript abfragen
    Von OliverN26 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 16.04.2007, 01:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •