overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

Gutti · 29.01.2009

Hallo,
habe gerade erst mit css begonnen und finde im Web keine Lösung.

Es geht um einen langen Text, der mit overflow:auto gescrollt werden kann. Das passt aber aber garnicht zum restlichen Layout, weshalb ich lieber an Stelle des Scrollbalkens gerne zwei Buttons hätte, mit denen man mit :hover auf und abscrollen kann.

Was ähnliches habe ich noch mal, jedoch mit Grafiken drin. Also einen 1000px breiten Streifen mit Fotos drauf, den ich über die Seite wie über eine Bühne schieben möchte.

Auch hier ohne Scrollbalken, sondern mit Buttons.

Weiß jemand Rat?

Gutti

sokie · 29.01.2009

AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

Das lässt sich mit reinem html/css nicht machen.
Javascript-funktionen wie scrollTo / scrollBy könnten Dir da weiterhelfen

SELFHTML: JavaScript / Objektreferenz

edit: verschoben -> scriptsprachen

swsde · 29.01.2009

AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

guckst du hier:
JavaScript Search: Scripts: Scroll Button

gruß.
thomas.

Christian · 29.01.2009

AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

Lustigerweise hab ich sowas erst vor ein paar Wochen realisiert.

Wenn Du unten bei Zubehörartikel schaust, siehst Du rechts und links einen Pfeil, der im Hovermodus nach rechts und links scrollt.
Das Script kannst Du dir ja aus dem Quelltext selber raussuchen.
(und nein das ist keine Schleichwerbung.)

stroyer · 02.02.2009

AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

Per Flash ließe sich das elegant lösen, nur ist es etwas kompliziert. In JS würde ich es sonst einfach so machen, dass ich wie es Christian im Prinzip gemacht hat Scrollbalken ausblenden bzw. selber einen per JS und divs erstellen und dann einfach über CSS left anpassen.
Ich habe so was mal gemacht mit eigenem Scrollbalken. (Nicht erschrecken; per PHP generiert)
Bild kannst du ersetzen bzw. in dem Fall eine 4500x100 Pixel Grafik (ein paar Fotos nebeneinander). Vielleicht findest du was, was dir nutzt.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
      <!--
        a
          {
            color:#CCCCCC;
            text-decoration:none;
          }
        a img
          {
            border:none;
          }
      -->
    </style>
    <script type="text/javascript">
      <!--
        var drag=false;
        var xstart=0;
        var lefting=false;
        var righting=false;
        function down(event)
          {
            drag=true;
            xstart=event.screenX;
          }
        function getInt(str)
          {
            var x='';
            var not='--0123456789';
            for(i=0;i<str.length;i++)
              {
                if(not.search(str.substr(i,1))>1)
                  {
                    x+=str.substr(i,1);
                  }
              }
            return x*1;
          }
        function passt(i)
          {
            if(i<1)
              {
                i=1;
              }
            if(i>388-38-1)
              {
                i=388-38-1;
              }
            return i;
          }
        function ch()
          {
            document.getElementById('bilder').style.marginLeft='-'+(getInt(document.getElementById('slider').style.left)/(388-38-1)*(45*100-448)-1)+'px';
          }
        function left()
          {
            dx=-5;
            document.getElementById('slider').style.left=passt(getInt(document.getElementById('slider').style.left)+dx)+'px';
            ch();
            lefting=true;
            setTimeout('checkLeft(-5);',300);
          }
        function right()
          {
            dx=5;
            document.getElementById('slider').style.left=passt(getInt(document.getElementById('slider').style.left)+dx)+'px';
            ch();
            righting=true;
            setTimeout('checkRight(5);',300);
          }
        function checkRight(c)
          {
            if(righting==false)
              {
                return;
              }
            dx=c;
            document.getElementById('slider').style.left=passt(getInt(document.getElementById('slider').style.left)+dx)+'px';
            ch();
            setTimeout('checkRight(4);',50);
          }
        function checkLeft(c)
          {
            if(lefting==false)
              {
                return;
              }
            dx=c;
            document.getElementById('slider').style.left=passt(getInt(document.getElementById('slider').style.left)+dx)+'px';
            ch();
            setTimeout('checkLeft(-4);',50);
          }
        function move(event)
          {
            if(drag==false)
              {
                return;
              }
            var dx=event.screenX-xstart;
            xstart=event.screenX;
            if(passt(getInt(document.getElementById('slider').style.left)+dx)!=getInt(document.getElementById('slider').style.left)+dx)
              {
                xstart-=dx-passt(getInt(document.getElementById('slider').style.left)+dx)+getInt(document.getElementById('slider').style.left);
              }
            document.getElementById('slider').style.left=passt(getInt(document.getElementById('slider').style.left)+dx)+'px';
            ch();
          }
        function up()
          {
            drag=false;
            lefting=false;
            righting=false;
          }
      //-->
    </script>
  </head>
  <body onMouseUp="javascript:up();" onMouseMove="javascript:move(event);">
    <div style="overflow: hidden; width:448px; height:125px;">
      <div style="overflow: hidden; position:absolute; margin-left:0px; height:100px; width:448px; margin-top:0px;">
        <div id="bilder" style="overflow: hidden; margin-left:0px; width:4500px; height:100px; margin-top:0px;">
                    <img width="4500" height="100" style="position:absolute; margin-left:0px;" src="../fotogalerie/wide.php" usemap="#map">
          <map name="map">
          <area shape="rect" coords="0,0,100,100" href="slide.php?id=0"><area shape="rect" coords="100,0,200,100" href="slide.php?id=1"><area shape="rect" coords="200,0,300,100" href="slide.php?id=2"><area shape="rect" coords="300,0,400,100" href="slide.php?id=3"><area shape="rect" coords="400,0,500,100" href="slide.php?id=4"><area shape="rect" coords="500,0,600,100" href="slide.php?id=5"><area shape="rect" coords="600,0,700,100" href="slide.php?id=6"><area shape="rect" coords="700,0,800,100" href="slide.php?id=7"><area shape="rect" coords="800,0,900,100" href="slide.php?id=8"><area shape="rect" coords="900,0,1000,100" href="slide.php?id=9"><area shape="rect" coords="1000,0,1100,100" href="slide.php?id=10"><area shape="rect" coords="1100,0,1200,100" href="slide.php?id=11"><area shape="rect" coords="1200,0,1300,100" href="slide.php?id=12"><area shape="rect" coords="1300,0,1400,100" href="slide.php?id=13"><area shape="rect" coords="1400,0,1500,100" href="slide.php?id=14"><area shape="rect" coords="1500,0,1600,100" href="slide.php?id=15"><area shape="rect" coords="1600,0,1700,100" href="slide.php?id=16"><area shape="rect" coords="1700,0,1800,100" href="slide.php?id=17"><area shape="rect" coords="1800,0,1900,100" href="slide.php?id=18"><area shape="rect" coords="1900,0,2000,100" href="slide.php?id=19"><area shape="rect" coords="2000,0,2100,100" href="slide.php?id=20"><area shape="rect" coords="2100,0,2200,100" href="slide.php?id=21"><area shape="rect" coords="2200,0,2300,100" href="slide.php?id=22"><area shape="rect" coords="2300,0,2400,100" href="slide.php?id=23"><area shape="rect" coords="2400,0,2500,100" href="slide.php?id=24"><area shape="rect" coords="2500,0,2600,100" href="slide.php?id=25"><area shape="rect" coords="2600,0,2700,100" href="slide.php?id=26"><area shape="rect" coords="2700,0,2800,100" href="slide.php?id=27"><area shape="rect" coords="2800,0,2900,100" href="slide.php?id=28"><area shape="rect" coords="2900,0,3000,100" href="slide.php?id=29"><area shape="rect" coords="3000,0,3100,100" href="slide.php?id=30"><area shape="rect" coords="3100,0,3200,100" href="slide.php?id=31"><area shape="rect" coords="3200,0,3300,100" href="slide.php?id=32"><area shape="rect" coords="3300,0,3400,100" href="slide.php?id=33"><area shape="rect" coords="3400,0,3500,100" href="slide.php?id=34"><area shape="rect" coords="3500,0,3600,100" href="slide.php?id=35"><area shape="rect" coords="3600,0,3700,100" href="slide.php?id=36"><area shape="rect" coords="3700,0,3800,100" href="slide.php?id=37"><area shape="rect" coords="3800,0,3900,100" href="slide.php?id=38"><area shape="rect" coords="3900,0,4000,100" href="slide.php?id=39"><area shape="rect" coords="4000,0,4100,100" href="slide.php?id=40"><area shape="rect" coords="4100,0,4200,100" href="slide.php?id=41"><area shape="rect" coords="4200,0,4300,100" href="slide.php?id=42"><area shape="rect" coords="4300,0,4400,100" href="slide.php?id=43"><area shape="rect" coords="4400,0,4500,100" href="slide.php?id=44">          </map>
        </div>
      </div>
      <div style="position:absolute; margin-top:100px; width:448px; height:25px; background-color:blue;">
        <div style="position:absolute; left:6px; margin-top:1px; color:white;">
          <a href="javascript:void(0);" onMouseDown="javascript:left();">&larr;</a>
        </div>
        <div style="position:absolute; left:30px; right:30px; width:388px; height:25px; background-color:grey;">
          <div id="slider" style="position:absolute; height:23px; top:1px; left:1px; width:38px; background-color:lightgrey;" onMouseDown="javascript:down(event);" onMouseMove="javascript:move(event);">
          </div>
        </div>
        <div style="position:absolute; right:6px; margin-top:1px; color:white;">
          <a href="javascript:void(0);" onMouseDown="javascript:right();">&rarr;</a>
        </div>
      </div>
    </div>
  </body>
</html>

Ich arbeite gerade daran, dass die Animation "weich", also nicht linear geht. (Beispiel www.space-shuttle-mission.com ; dort ist es mit Flash realisiert)

Gutti · 23.02.2009

AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

Hallo,
schönen Dank für Eure Tipps. nachdem ich zwei Tage an den Scrollern rumgekaut habe, ist es dieser geworden, den ich dann für vertikales scrollen umgebaut habe:

---

// JavaScript Document
// DIV horizontal scrollen

function right() {
var ScrollXDiv = document.getElementById("scrollhdiv");
ScrollXDiv.scrollLeft += 1;
ScrollXDiv.scr = window.setTimeout("right()", 1);
}

function left() {
var ScrollXDiv = document.getElementById("scrollhdiv");
ScrollXDiv.scrollLeft -= 1;
ScrollXDiv.scr = window.setTimeout("left()", 1);
}

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

---

// JavaScript Document
// DIV vertikal scrollen

function down() {
var ScrollYDiv = document.getElementById("scrollvdiv");
ScrollYDiv.scrollTop += 1;
ScrollYDiv.scr = window.setTimeout("down()", 1);
}

function top() {
var ScrollYDiv = document.getElementById("scrollvdiv");
ScrollYDiv.scrollTop -= 1;
ScrollYDiv.scr = window.setTimeout("top()", 1);
}

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

Schöne Grüße aus NWM,
Gutti

csa13 · 23.02.2009

AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

habe eigtl nicht viel mit js zu tun, könnte mir deshalb bitte jemand erklären wie man den code von oben im body dann aufruft??? und was ich dann bei overflow in der css setzen soll etc!

danke,
csa

lucy_lawless · 23.02.2009

AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

Christian schrieb:
Lustigerweise hab ich sowas erst vor ein paar Wochen realisiert.

Wenn Du unten bei Zubehörartikel schaust, siehst Du rechts und links einen Pfeil, der im Hovermodus nach rechts und links scrollt.

hm, scheint aber nicht so ganz geklappt zu haben. mein firefox zeigt da nen scrollbalken...

stroyer · 23.02.2009

AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

scrollLeft und scrollTop denk ich werden nur vom IE interpretiert, wenn es mich täuscht.

Gutti · 23.02.2009

AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

@ csa13:

overflow:hidden

Script als Textdatei mit Endung .js abspeichern und im head einbinden mit:

<script type="text/javascript" src="../pfad/scriptname.js"></script>

auf den korrekten Pfad achten!

und auf der Seite (z.B. für das vertikale Scrollen):



<div class="pfeil_oben_grafik" id="top" onMouseOver="top();" onMouseOut="stop();"></div>
<div class="pfeil_unten_grafik" id="down" onMouseOver="down();" onMouseOut="stop();"></div>

Viel Erfolg!

Gutti.

Hier kannst Du die Scroller auf "Schmuck -> Ringe" und "Kontakt" ansehen: http://ilkabruse.de

Ich bin noch längst nicht fertig, für Hinweise und Kritik bin ich dankbar.

Hansi05 · 03.03.2009

AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

Heyho,

Kann mir jmd sagen was hier falsch ist?

HTML:

<body>
<div id="scrollvdiv" style="width:500px; height:200px; overflow:hidden">
<p>das</p>
<p>as</p>
<p>das</p>
<p>djdghjdghj</p>
<p>ddjmhjm</p>
<p>das</p>
<p>ddghmdghm</p>
<p>das</p>
<p>das</p>
</div>
<div class="pfeil_unten_grafik" id="down" onMouseOver="down();" onMouseOut="stop();">DAS</div>
<div class="pfeil_oben_grafik" id="top" onMouseOver="top();" onMouseOut="stop();">ASD</div>
</body>

Warum geht das bei mir nicht?

Vllt mal am besten ne Bsp Datei erstellen wo nichts weiter drinne ist was mich als Depp verwirren kann

Und kann ich das noch so verändern, dass man via Mausrad scrollen kann?

stroyer · 03.03.2009

AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

Fürs Scrollrad musst du die Events abfragen. Kannst du zu dem Beispiel das Script posten, bzw. was geht jetzt nicht?

Hansi05 · 04.03.2009

AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

Das Scrollen per Button geht nicht, hier erstmal die Seite, bei der ich das Scrollen erstmal zum Laufen bekommen will:

Und das Script dazu:

Okay, ich habs jetzt hinbekommen, nur noch die Frage, wie kann ich zusätzlich noch das Mausrad nutzen? Bin Javascript noob

Bzw mit welchen Befehl muss ich das abrufen? onmouseover="left(); ists ja im Script, durch was muss ich das ersetzen wenn ich mit Mausrad scrollen will?