Javascript: Div-Layer scrollen

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>

Dieses funktioniert zwar unter Safari allerdings brauche ich statt den Standard-Buttons Grafiken zum scrollen. Da ich allerdings keine Ahnung von Javascript habe kann ich die einfach nicht austauschen. (Googlen hat mich leider auch nicht weitergebracht)

Wie kann ich nun statt den Buttons Grafiken einbinden?

tia

Freundliche Grüße Thomas

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.

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

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

Dann tu einfach den Code da 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";

und ersetze ihn durch

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.

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

Zitat von -TB-

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

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?

Nein, ich meinte die Idee die hinter dem "Div mit buttons scrollen" steckt. Wenn man da einfach Umblättert kann man den Text nicht vernünftig lesen (bzw noch schlechter).

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.

Mit der Art war nur "Klick auf Button dann..." gemeint, diese Scrollfunktion kommt nur ein einziges Mal vor. Das überall einzubauen wär natürlich absoluter Schwachsinn. Ich muss allerdings sagen, man kann sich das ganze nur schwer vorstellen. Ich empfinde das Scollen per Buttons bei dieser konkreten Verwendung nicht als sehr störend/einschränkend.


Edit:Also ich gebs langsam echt auf; geht mal wieder nicht in Safari. Die Konsole meldet einen Null Value Error bei 'bUp.onmouseover = up;'. Ich hab dafür mal versucht den Code etwas aufzuräumen. Brauche ich die Funktion 'DeInit' überhaupt?

Momentan siehts jedenfalls so aus:

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>

Edit2: In FF gehts übrigens auch nicht, liefert genau denselben Fehler.

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

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 ?

Ist das

Code:

myScrollDiv.scrollTop += 1,5;

wirklich beabsichtigt? Ich mein damit das Fließkomma. In JS trennt man mit einem Punkt, nicht Komma. In Wahrheit zählt der code 5 hinzu; nicht 1.5;