Javascript: Div-Layer scrollen

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/javascript_div-layer_scrollen_201541/page_1 - zur Vollversion wechseln!

Hallo

Ich versuche gerade ein Script zum scrollen eines Divs für meinen Zweck anzupassen. Zuerst habe ich es mit diesem Script probiert. Hat soweit eigentlich auch gut geklappt; nur leider nicht mit Safari. Nach langer Suche bin ich dann auf folgendes Script gestoßen:

Code:

<script type="text/javascript">
<!--
 function init() {
  var myScrollDiv = document.getElementById("scrolldiv");
  myScrollDiv.style.overflow = "hidden";
  myScrollDiv.style.width = "329px";
  var myContainer1 = document.getElementById("container1");
  myContainer1.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.left = "400px";
  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.left = "400px";
  bDown.style.padding = "0";
  bDown.onmouseover = down;
  bDown.onmouseout = stop;
  myContainer1.appendChild(bUp);
  myContainer1.appendChild(bDown);
 }

 function deinit() {
  var myScrollDiv = document.getElementById("scrolldiv");
  myScrollDiv.style.overflow = "";
  myScrollDiv.style.width = "";
  var myContainer1 = document.getElementById("container1");
  myContainer1.style.position = "";
  var myButtons = myContainer1.getElementsByTagName("BUTTON");
  while (myButtons.length > 0) {
   myContainer1.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>

Aus Usability-Sicht ist das grober Unfug. Was spricht gegen ganz normale Scrollbars?

Ja das ist mir bewusst. Ich mach die Seite allerdings für einen Bekannten (Grafiker) und da steht das Design eindeutig im Vordergrund.

Wird jedoch auch nur auf einer einzigen Seite benötigt.

Zitat von -TB-

Ja das ist mir bewusst. Ich mach die Seite allerdings für einen Bekannten (Grafiker) und da steht das Design eindeutig im Vordergrund.

würds auch lassen. Aber von der Funktionalität abgesehen: du kannst die Scrollbar teilweise mit CSS customizen (also den Balken verschwindenlassen usw)

@that: Von der Funktion würde das gepostete Script absolut genügen, es müssten nur die blöden Standard Buttons weg

Nein Umblättern geht auch nicht, da kann man die Idee dahinter nicht erkennen. Das hab ich in meiner Verzweiflung auch schon probiert.

@fatmike: Die komplette Navigation der Webseite ist von der "Art" so aufgebaut, Scrollbars kommen leider auch nicht in Frage.

Zitat von -TB-

@that: Von der Funktion würde das gepostete Script absolut genügen, es müssten nur die blöden Standard Buttons weg

Code:

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.left = "400px";
bUp.style.padding = "0";

Code:

var bUp = document.getElementById('idVonDeinerGrafikDieUpSeinSoll');

Zitat von -TB-

Nein Umblättern geht auch nicht, da kann man die Idee dahinter nicht erkennen. Das hab ich in meiner Verzweiflung auch schon probiert.

Zitat von -TB-

@fatmike: Die komplette Navigation der Webseite ist von der "Art" so aufgebaut, Scrollbars kommen leider auch nicht in Frage.

Zitat

Meiner persönlichen Meinung nach sollte man sowas nicht online stellen. Wer einen eigenen Scrollbar-Ersatz implementiert, hat das Web nicht verstanden.

Bei HTML beginnt man bei 100% Usability und Kompatibilität und arbeitet sich von dort nach unten.

Danke erstmals, genau nach dem habe ich gesucht

Zitat von that

Man kann die Idee von "Umblättern" nicht erkennen?

Zitat von that

Meiner persönlichen Meinung nach sollte man sowas nicht online stellen. Wer einen eigenen Scrollbar-Ersatz implementiert, hat das Web nicht verstanden.

Bei HTML beginnt man bei 100% Usability und Kompatibilität und arbeitet sich von dort nach unten.

Code:

<script type="text/javascript">
<!--
 function init() {
  var myScrollDiv = document.getElementById("scrolldiv");
  var myContainer1 = document.getElementById("container1");
  var bUp = document.getElementById("b_up");
  bUp.onmouseover = up;
  bUp.onmouseout = stop;
  var bDown = document.getElementById("b_down");
  bDown.onmouseover = down;
  bDown.onmouseout = stop;
  myContainer1.appendChild(bUp);
  myContainer1.appendChild(bDown);
 }

 function down() {
  var myScrollDiv = document.getElementById("scrolldiv");
  myScrollDiv.scrollTop += 1,5;
  myScrollDiv.scr = window.setTimeout("down()", 10);
 }

 function up() {
  var myScrollDiv = document.getElementById("scrolldiv");
  myScrollDiv.scrollTop -= 1,5;
  myScrollDiv.scr = window.setTimeout("up()", 10);
 }

 function stop() {
  var myScrollDiv = document.getElementById("scrolldiv");
  window.clearTimeout(myScrollDiv.scr);
 }

 window.onload = init;
//-->
</script>

ich verwend für solche dinge meistens fertige libraries.

die von yahoo sind zum beispiel ganz net.

http://developer.yahoo.com/yui/

versuchs mit bup.onmouseover = function() { up(); }

Hab nach langem herumexperimentieren eine funktionierende Lösung gefunden. Der Code sieht nun folgendermaßen aus:

Code:

<script type="text/javascript">
<!--
 function init() {
  var myScrollDiv = document.getElementById("scrolldiv");
  var myContainer1 = document.getElementById("container1");
 }

 function down() {
  var myScrollDiv = document.getElementById("scrolldiv");
  myScrollDiv.scrollTop += 1,5;
  myScrollDiv.scr = window.setTimeout("down()", 10);
 }

 function up() {
  var myScrollDiv = document.getElementById("scrolldiv");
  myScrollDiv.scrollTop -= 1,5;
  myScrollDiv.scr = window.setTimeout("up()", 10);
 }

 function stop() {
  var myScrollDiv = document.getElementById("scrolldiv");
  window.clearTimeout(myScrollDiv.scr);
 }

 window.onload = init;
//-->
</script>

Code:

<img name="b_up" src="img/b_up.jpg" alt="Up" onmouseover="up();" onmouseout="stop();">
<img name="b_down" src="img/b_down.jpg" alt="Down" onmouseover="down();" onmouseout="stop();">

Hi, ich hab das alte Skript hier ausgegraben weils so schön minimalistisch ist - allerdings buggeds bei mir ein bisschen wenn ich versuche UP/DOWN automatisch bis zum Ende scrollen zu lassen, STOP stoppt das ganze (sind 3 Img Buttons).

Der Text flackert beim Scrollen wenn er ganz oben/unten angelangt ist - kann mir jemand einen STOP einbauen oder so etwas in der Art ?

Brauchst eine abfrage ob schon ganz oben/unten angekommen und nur dann den scrollTop ändern wenn nicht

Ist das

Code:

myScrollDiv.scrollTop += 1,5;

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2025