Onkel Schnitzel: Scrollbuttons mit Java Script

SELF-Forum

Scrollbuttons mit Java Script

Onkel Schnitzel
– Informationen zu den Bewertungsregeln

Hallo,

zum Thema Scrollbuttons habe ich dieses schöne Beispiel von Gernot Back gefunden. Ich hab mich jetzt durch das Script gefieselt (hab wenig Ahnung von JavaScript) und versucht es zu verstehen und für meine Bedürfnisse anzupassen. Funktioniert nur leider nicht. Es kommt zwar keine Fehlermeldung, die Buttons werden aber auch nicht angezeigt.

Vielleicht hat ja jemand Lust, es sich mal anzuschauen: Scrolltest

Mit bestem Dank,
Onkel Schnitzel

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Scrollbuttons mit Java Script

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    zum Thema Scrollbuttons habe ich dieses schöne Beispiel von Gernot Back gefunden.

    Zum Thema Scrollbuttons habe ich dieses schöne Posting geschrieben. Und dieses. Und dieses. Und dieses. Und dieses.

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Scrollbuttons mit Java Script

      Onkel Schnitzel
      – Informationen zu den Bewertungsregeln

      Hello out there!

      zum Thema Scrollbuttons habe ich dieses schöne Beispiel von Gernot Back gefunden.

      Zum Thema Scrollbuttons habe ich dieses schöne Posting geschrieben. Und dieses. Und dieses. Und dieses. Und dieses.

      See ya up the road,
      Gunnar

      Hallo Gunnar,

      die hab ich alle schon gelesen. Die Nachteile sind mir durchaus bewußt.

      Gruß,
      Onkel Schnitzel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Scrollbuttons mit Java Script

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    zum Thema Scrollbuttons habe ich dieses schöne Beispiel von Gernot Back gefunden.

    Vielleicht hat ja jemand Lust, es sich mal anzuschauen: Scrolltest

    Gernot scrollt ein IFRAME-Element. Du versuchst das mit einem DIV-Element. Du scheiterst daran, dass

    1. DIV-Elemente kein onload-Attribut definiert haben. Die Funktion pruefe() wird deshalb nie aufgerufen.
    2. DIV-Elemente auch keine Methode scrollBy() haben.

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Scrollbuttons mit Java Script

      Onkel Schnitzel
      – Informationen zu den Bewertungsregeln

      Gernot scrollt ein IFRAME-Element. Du versuchst das mit einem DIV-Element. Du scheiterst daran, dass

      1. DIV-Elemente kein onload-Attribut definiert haben. Die Funktion pruefe() wird deshalb nie aufgerufen.
      2. DIV-Elemente auch keine Methode scrollBy() haben.

      Och, Mist! Ein iframe wollte ich ja eigentlich vermeiden. Mal blöd gefragt: Warum gibts denn diese Funktionen für divs nicht?

      Gruß,
      Onkel Schnitzel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Scrollbuttons mit Java Script

        Axel Richter
        +1 Informationen zu den Bewertungsregeln

        Hallo,

        Och, Mist! Ein iframe wollte ich ja eigentlich vermeiden. Mal blöd gefragt: Warum gibts denn diese Funktionen für divs nicht?

        Weil ich Zeit hatte:

          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Scrollbares DIV mit Spezialscrollern ;-)</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
 #container {width:300px; height:200px; margin:auto; background-color:#007070;}  
 #scrolldiv {width:100%; height:100%; background-color:#00AFAF; overflow:auto;}  
</style>  
<script type="text/javascript">  
<!--  
 function init() {  
  var myScrollDiv = document.getElementById("scrolldiv");  
  myScrollDiv.style.overflow = "hidden";  
  myScrollDiv.style.width = "280px";  
  var myContainer = document.getElementById("container");  
  myContainer.style.position = "relative";  
  var bUp = document.createElement("BUTTON");  
  bUp.appendChild(document.createTextNode("U"));  
  bUp.style.width = "20px";  
  bUp.style.height = "20px";  
  bUp.style.position = "absolute";  
  bUp.style.top = "0";  
  bUp.style.right = "0";  
  bUp.style.padding = "0";  
  bUp.onmouseover = up;  
  bUp.onmouseout = stop;  
  var bDown = document.createElement("BUTTON");  
  bDown.appendChild(document.createTextNode("D"));  
  bDown.style.width = "20px";  
  bDown.style.height = "20px";  
  bDown.style.position = "absolute";  
  bDown.style.bottom = "0";  
  bDown.style.right = "0";  
  bDown.style.padding = "0";  
  bDown.onmouseover = down;  
  bDown.onmouseout = stop;  
  var bNorm = document.createElement("BUTTON");  
  bNorm.appendChild(document.createTextNode("N"));  
  bNorm.style.width = "20px";  
  bNorm.style.height = "20px";  
  bNorm.style.position = "absolute";  
  bNorm.style.top = "50%";  
  bNorm.style.marginTop = "-10px";  
  bNorm.style.right = "0";  
  bNorm.style.padding = "0";  
  bNorm.onclick = deinit;  
  myContainer.appendChild(bUp);  
  myContainer.appendChild(bDown);  
  myContainer.appendChild(bNorm);  
 }  
  
 function deinit() {  
  var myScrollDiv = document.getElementById("scrolldiv");  
  myScrollDiv.style.overflow = "";  
  myScrollDiv.style.width = "";  
  var myContainer = document.getElementById("container");  
  myContainer.style.position = "";  
  var myButtons = myContainer.getElementsByTagName("BUTTON");  
  while (myButtons.length > 0) {  
   myContainer.removeChild(myButtons[0]);  
  }  
 }  
  
 function down() {  
  var myScrollDiv = document.getElementById("scrolldiv");  
  myScrollDiv.scrollTop += 1;  
  myScrollDiv.scr = window.setTimeout("down()", 10);  
  
  //Testausgabe von scrollTop  
  var myMonitor = document.getElementById("monitor");  
  myMonitor.innerHTML = myScrollDiv.scrollTop;  
 }  
  
 function up() {  
  var myScrollDiv = document.getElementById("scrolldiv");  
  myScrollDiv.scrollTop -= 1;  
  myScrollDiv.scr = window.setTimeout("up()", 10);  
  
  //Testausgabe von scrollTop  
  var myMonitor = document.getElementById("monitor");  
  myMonitor.innerHTML = myScrollDiv.scrollTop;  
 }  
  
 function stop() {  
  var myScrollDiv = document.getElementById("scrolldiv");  
  window.clearTimeout(myScrollDiv.scr);  
 }  
  
 window.onload = init;  
//-->  
</script>  
</head>  
<body>  
<div id="container">  
<div id="scrolldiv">  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo neque, ultrices id, venenatis ut, interdum sit amet, ante. Suspendisse sapien lorem, ornare at, iaculis eu, pellentesque eu, leo. Donec mi elit, interdum sit amet, ornare vel, porttitor sit amet, sapien. Nunc urna lacus, imperdiet vel, imperdiet non, placerat eu, felis. Donec sapien. Donec porta magna ac nibh. Aliquam sagittis sem non sapien. Suspendisse aliquet erat id eros. Cras tincidunt ornare est. Vivamus mattis eros ac tellus. Etiam commodo eros ac risus pellentesque facilisis. Ut tincidunt. Pellentesque feugiat sapien in quam. Suspendisse potenti. Suspendisse potenti. In hac habitasse platea dictumst. Suspendisse ullamcorper nibh. Nulla facilisi.</p>  
  
<p>Curabitur at leo vel leo euismod ultricies. Aliquam posuere viverra tellus. Donec tincidunt elementum eros. Nulla aliquet nulla non justo dignissim aliquam. Morbi eget dui eu tortor tempus malesuada. Sed a urna et arcu luctus ornare. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam consequat sollicitudin justo. Praesent velit. Donec consequat, sapien quis dignissim egestas, nibh sem mollis dolor, ac scelerisque nisl lorem vel massa. Nulla facilisi. Duis vulputate, orci sit amet euismod tincidunt, risus tortor pulvinar arcu, eleifend mollis augue pede id nibh. Aenean eu nibh et ligula sagittis iaculis. Nunc metus arcu, venenatis sed, semper et, dapibus sit amet, justo. Donec faucibus, quam nec feugiat placerat, lorem metus mattis dui, in malesuada ante velit eget ante. Duis sollicitudin magna at felis. Etiam augue eros, viverra nec, scelerisque eu, volutpat blandit, elit. Duis commodo nulla eget turpis.</p>  
</div>  
</div>  
<div id="monitor">&nbsp;</div>  
</body>  
</html>

        Interessant ist das Verhalten von DIV.scrollTop, weil es durch inkrementieren bzw. dekrementieren offensichtlich nicht kleiner als 0 bzw. größer als Maximum werden kann.

        Getestet ist das im jeweils aktuellsten IE (IE6), FF und Opera unter Windows.

        viele Grüße

        Axel

        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

        1. Scrollbuttons mit Java Script

          Onkel Schnitzel
          – Informationen zu den Bewertungsregeln

          Hallo Axel,

          Ich werd das Script morgen mal probieren. Ich habs jetzt erstmal mit iframes gemacht. Ging besser, als ich dachte.

          Vielen Dank und Beste Grüße,
          Onkel Schnitzel

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  3. Scrollbuttons mit Java Script

    Howe
    +2 Informationen zu den Bewertungsregeln

    Ganz ehrlich, solche Seiten machen mich total krank!

    :)

    Wenn Leute Texte in irgendwelche Gucklöcher stopfen und dann muss man mit irgendwelchen Knöpfen in Zeitlupe rumwursteln. Zeigt doch einfach den ganzen Text. Es ist nicht verboten dass eine Webseite, als ganzes, nach unten weitergeht und gescrollt werden!

    Dieses umgehen des normalen Scrollbars nervt fast immer da es fast immer schlecht funktioniert und den Nutzer einschränkt.

    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln