Antworten auf deine Fragen:
Neues Thema erstellen

overflow nicht mit scrollbalken, sondern mit Buttons bewegen?

G

Gutti

Guest

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
 

Christian

verpeilt & verschallert

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

Aktives Mitglied

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)
 
Zuletzt bearbeitet:
G

Gutti

Guest

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

Noch nicht viel geschrieben

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

XHTML/CSS Fetischistin

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.

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

stroyer

Aktives Mitglied

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

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

Gutti

Guest

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):


<!-- funktion auslösen javascript -->

<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.
 
Zuletzt bearbeitet:

Hansi05

Aktives Mitglied

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 :D

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

stroyer

Aktives Mitglied

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

Aktives Mitglied

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 :D
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?
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben