scrollen ohne balken -> Slide ?

  • Themenstarter Themenstarter Comenius
  • Beginndatum Beginndatum
C

Comenius

Hallo,

ich habe mangels Erfahrungen in Javascript keine Ahnung, wonach ich suchen muss:

Ich lade ein paar Bilder in eine <div>-Box und möchte in dieser nun gerne ohne Scrollbalken, hin- und herfahren können.

Je weiter man mit der Maus in eine Richtung geht, desto schneller sollte sich das Ganze auch in selbige bewegen.

Begriffe wie "Slide" etc. konnte ich mir zwar aus den Fingern saugen, aber leider nichts passendes finden.

Wäre cool, wenn mir jemand sagen könnte, was ich bei google eintippen muss. :)

Gruss
Commi
 
Hatte in der letzten Zeit auch das Problem. Hatte einige Thumbnails, die ich in einem DIV Container geladen hab, und die sollten dann hin- und herscrollen. Schau dir mal folgendes Script an:
Code:
function doresize () 
    {location.reload();return false;}
if(document.layers)window.captureEvents(Event.RESIZE); window.onresize=doresize;

var  js10 = (document.images)?false:true; // NN2.x
var  js11 = (document.images) && ((window.screen)?false:true); // NN3.x
var  ie = ((document.all) && (window.offscreenBuffering)) ? true : false; // IE >= 4.x
var  isNS = ((document.captureEvents) && (!document.getElementById)) ? true : false; // NN4.x
var  mz = ((document.getElementById) && (!document.all) && (document.documentElement)) ? true : false; // NN6/MZ
var  op = ((document.getElementById) && (navigator.userAgent.indexOf('Opera') != -1)) ?true : false;
var isMacIE = ( (navigator.userAgent.indexOf("IE 4") > -1) && (navigator.userAgent.indexOf("Mac")  > -1) );

y=0; weiter=0; i=0; stop=0;

function testen() 
{
br=0;
    if (ie)        
    {
    br=2;
    schicht='document.all["';stil='"].style';
    }
    if (isNS)            
    {
    schicht='document.layers.scrollWindowDiv.document.layers["';stil='"]';
    }
    if (mz)
    {
    schicht='document.getElementById("';stil='").style';
    }
    if(op) 
    {
    schicht='document.getElementById("';stil='").style';
    }
    /* elsewindow.location.href="controlling.html"; // nur NN und IE */
}

function moveIt(wen,wert) 
{
test=y;  // Hilfsvariable
y+=wert;
stop=-250; //Wie weit nach rechts gescrollt werden soll
if (y < stop || y > 1)
    {
    y=test;
    eval(schicht+wen+stil+'.left="'+y+'px"');
}
else 
    {
    eval(schicht+wen+stil+'.left="'+y+'px"');
    }
}

function scrollen(wert,i) 
{

moveIt('pic',wert);
a=wert;
b=i;
if ((weiter)&&(y<0)) setTimeout("scrollen(a)",1);
}

Und so musst du es einbinden. Hier mal die Pfeile zum scrollen (hab da zwei weiße Pfeile in PS gemacht)
Code:
//Pfeil Links
echo '<a href="#" onMouseover="weiter=1;scrollen(2)" onMouseout="weiter=0" style="position:absolute; left:0px; top:0px; width:22px; height:68px; background:url(pfeil_links.gif); display:block;"></a>';
//Pfeil rechts
echo '<a href="#" onMouseover="weiter=1;scrollen(-2)" onMouseout="weiter=0" style="position:absolute; right:2px; top:3px; width:22px; height:68px; background:url(pfeil_rechts.gif); display:block;"></a>';

Und die beiden DIV Container musst du so aufbauen, dass bei dem darüberliegenden overflow:hidden (also bei zu großem Inhalt keine Scrollbalken) aktiviert ist.
Code:
echo '<div style="overflow:hidden; position:absolute; top:1px; left:32px; width:730px; height:78px;">';
echo '<div id="pic" style="position:absolute; left:0px; top:0px;">
<table><tr>';
 echo '<td><a href="bild.jpg">
    <img class="tn" src="kleines_bild.jpg" border="0" alt="'.$s[titel].'"></a></td>';
echo '</tr></table></div></div>';

Bei der Tabelle kannst du jetzt noch beliebig viele <td><img src="kleines_bild123.jpg"></td> machen.

Hoffe ich hab dir geholfen!
Schönen Tag noch, und genießt den Sommer!

sc.

PS: Das obige Script hab ich auch bloß von einer Seite runtergeladen, und meinen Vorstellungen nach modifiziert. Nur damit's gsagt is! :-)
 
Hi,

danke für das Script. Es ist nicht schlecht, aber erdrückend... wow :)

Nein, Ernst beiseite: Es funktioniert, aber leider mit Pfeilen (sprich deinen Pics).
Wie beschrieben sollte es aber alleine mit der Maus funktionieren. Je weiter die Maus in eine Richtung zeigt, desto schneller sollte sich der ganze Quark in selbige bewegen.

Ich würde mich ja gerne selbst auf die Jagdt nach einem Script/Tutorial begeben, aber ich habe wie gesagt keinen Schimmer, wonach ich suchen soll...:confused:

Gruss
Commi
 
Hi,

also gibt es für sowas überhaupt keine Bezeichnung? :rolleyes:
Dann kann ich ja lange suchen...

Die 2 Seiten von dir sind echt super, danke!
Ich werde mich mal durcharbeiten.

Gruss
Commi

-------------

Hossa... Ich habe selten sowas wie den Quellcode dieser beiden Scripts gesehen, Hammer...

Ich habe die letzten Stunden damit verbracht, das Script - Scrollbarer Layer - auf meine Bedürfnisse anzupassen. Natürlich bin ich kläglich gescheitert :rolleyes:

Mittels PHP und einer Schleife, lasse ich alle Bilder eines Ordners in eine Div-Box ausgeben. Die Bilder sind nebeneinander. Also genau anders herum als bei deinem Script.

Das Teil mit dem "Mauszeiger-Folgen" habe ich weitestgehend durchschaut. Ich kann mir allerdings keinen Reim darauf bilden, dass ganze auch nur annähernd in meine Codeschnipsel übertragen zu können.

Ich weiß nicht... Aber Javascript ist irgendwie überhaupt nicht mein Fall. Ich scheitere sogar an manchen Tutorials :suspekt:

PHP:
echo "<a href=\"#\" onclick=\"document.getElementById('test').style.display='block'; return false;\">$trennen[1]</a>"; 

// $trennen[1] enthält die Bildurl. Die ganze Zeile läuft in einer Schleife
// Mit dem onclick wird eine weitere Div-Box geöffnet und "display" auf "none" gestellt.
// Sprich: nach dem Klick auf ein Bild, öffnet sich weiter unten eine Div-Box in der entsprechende Daten des Bildes stehen. 

<div id="test" style="display:none">Bildzugehörige Daten...</div>

// Auf das ganze möchte ich nun die Geschichte mit dem Scrollen anwenden.

Mit viel Mühe kann ich einige Javascript-scripts (komischer Ausdruck) zwar verstehen, aber dies hier überfordert mich total.

Könnte mir das evtl. jemand etwas näher bringen?
Ich wäre für Hilfe jeder Art dankbar :)

Danke und guad´s Nächtle

Gruss
Commi
 
Zuletzt bearbeitet von einem Moderator:
Okay, ich verstehe dein Dilemma. Habe das Script ja selbst geschrieben und hatte bei javascript Code:
  1. if ( (intSpd>0) ? (top<0) : (top>parseInt(objScrll.parentNode.style.height)-objScrll.offsetHeight) )

Bei meinem eigenen Script nen Verständnissholperer. Da kann ich mir denken, wie du dich gefühlt hast. Bei diesem speziellen Javascript kommen mehr obskure Sachen auf ängstem Raum vor, als in einem Richard Ravens Roman.

Darum erkläre ich dir erstmal die allgemeine Vorgehensweise für dein Problem:
Du brauchst zwei Layer. Einer enthält deiner Bilder, einer ist eine Art Ramen. Der Ramen verhindert, dass die Bilder außerhalb mit angzeigt werden. In meine Script wäre das hier die Entsprechung:
HTML:
<div style="position:relative; overflow:hidden; height:120px; width:128px;">
    <div id="content" style="position: absolute; width: 117px; padding: 5px; left: 0; top: 0;">
        Bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />
        bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />
        bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />
    </div>
</div>
So jetzt willst du den Layer mit dem Inhalt in dem Ramen-Layer bewegen. Dafür müsst du in erstmal ansprechen. Das geht im normalfall am besten über die Funktion getElementById(). Für das ansprechen ist dieser Teil hier zuständig:
Javascript:
if ( objScrll=document.getElementById(strId) ) {
    ....
}
Hier wird geprüft ob ein Element mit der id, die in der Variablen "strId" gespeichert ist existiert und das ensprechende Element gleich der Variable "objScrll" zugewiesen. Daher die Zuweisung im if. Könnte dir vielleicht erste Probleme gemacht haben, ist aber ein gängie Sache.

So, jetzt hast du den Layer mit dem Inhalt also angesprochen und kannst unanständige Sachen mit machen. Du willst ihn hin und her bewegen. Das geht indem du seiner Eigenschaft style.left (in meinem Script ist es style.top, aber du willst ja horizontal und nicht vertikal scrollen) etwas zuaddierst oder etwas abziehst. Das wäre dann diese Zeile in meinem Skript:
Javascript:
objScrll.style.top = (top + intSpd) +"px";
Die Variable "intSpd" enthält dabei die Scrollgeschwindigkeit, also wie viel hinzu addiert werden soll. Bei dir muss das einfach die alte Mausposition minus der neuen mal einen Korrekturfactor kleiner eins sein damit der Layer nicht ultraschnell wird.

Das ist so etwa die Grundidee. Du musst dich dann noch mit if-Anweisungen rumschlagen, damit es nicht weiterscrollt, wenn der Layer mit dem Inhalt eigentlich schon außer sicht ist.
 
Leider hat der Server gesponnen, wollte diese Post eigentlich noch verlängern und kam dann nicht mehr auf tutorials.de

Wenn mir wieder einfällt, was ich schreiben wollte und du noch mehr wissen willst, kannst du dich ja nochmal hier melden.
 
Hi,

erstmal danke für deine Mühe. Ich konnte den Code an einigen Stellen letztendlich doch besser verstehen.

Leider ist mir kurz nach "unseren" Posts meine Gurke abgeschmiert. Habe heute einen neuen PC geholt. Wahrscheinlichste Ursache war wohl Lochfraß...

Um aber die Wahrheit zu sagen, habe ich am Ende alle Zelte abgebrochen, weil ich auf eine Interessante Seite gestoßen bin:

http://www.dyn-web.com/dhtml/scroll/

Um genau zu sein, auf ein ziemlich interessantes Script:

http://www.dyn-web.com/dhtml/scroll/speed-opts.html


Das gefällt mir recht gut, vor allem aber aus einem besonderen Grund:
Code:
Copyright 2001-4 by Sharon Paine
:p

Nein, ernsthaft...

Ich habe mich - seit ich auf der Suche nach so einem Script/Tutorial war - gefragt, warum man zum Scrollen eines Div so viel Zeilen Javascript benötigt... Das wollte mir einfach nicht in den Kopf. Und angesichts dieses Scripts bin ich jetzt doch zufrieden. Zwar ist es alles andere als "kurz" - aber was will man machen...

Javascript zu können, würde mich schon irgendwie reizen, aber leider fehlt mir dazu einfach die Zeit.
Bis dahin bleibe ich wohl ein

NächteumdieOhrenschlagender-Kaffee-und-Redbull-trinkender-Kettenrauchender-PHP-Programmierer

In dem Sinne, Danke für deine/eure Hilfe :)

Gruss
Commi
 
Zuletzt bearbeitet von einem Moderator:

Neue Beiträge

Zurück