Slide / Scroll Funktion einbinden

[Kirin25m]

Hallo zusammen,

ich bin neu hier und muß mich erst einmal ein wenig einfuchsen. Ich habe eine Internetseite soweit fertig programmiert - es wird eine horizontale Bildergallerie mit Scrollfunktion. Alles läuft soweit perfekt. Jetzt habe ich im Internet ein Javascript gefunden, damit die Seite bei Bewegung der Maus automatisch scrollt, was ich als nettes Gimmick gerne mit einbinden würde. Problem ist, daß ich es nicht hinbekomme, meine Gallerie einzusprechen. Nun hat alles soweit gut geklappt, nun scheitert es an dieser "Kleinigkeit".

Hier der Link zu dem Tool:

mootools demos - The Scroller Class

Ich würde gerne den Code zum "Mousemove" einbinden.


Hier einmal mein Code zu Gallerie:

html:

<div id='mycustomscroll' class='flexcroll'>
<div id='portfolio'>

css:

#portfolio {
border: 0px solid #FFFFFF; display: inline; white-space: nowrap;
}
#mycustomscroll {
width: auto;
height: 420px;
background-color:#FFFFFF;
overflow: auto;
position: relative;
background-color:#FFFFFF;
padding: 0px;


Sollte ich den Script direkt in die html schreiben od. lieber auslagern? Ich habe bereits ein Javascript für flexcroll.
Wie schon geschrieben, mein Hauptproblem ist, daß ich meine Gallerie ansprechen möchte - aber bislang leider ohne Erfolg.

Für Eure Mithilfe möchte ich mich an dieser Stelle vorab bedanken.

 

[Gilles]

In dem Beispiel waren beide Elemente Blockelemente mit einer festen Größe.
Ich weiss nicht ob das portfolio mit display inline Probleme machen könnte.

Wie sieht denn dein Script bisher aus?
Nach der Demo her müsste es ja so aussehen:

var scroll = new Scroller('mousemove', {area: 150, velocity: 1});
// Mousemove $('mycustomscroll').addEvent('mouseover', scroll.start.bind(scroll)); $('mycustomscroll').addEvent('mouseout', scroll.stop.bind(scroll));

Scripte auszulagern oder nicht ist Geschmackssache. Ich entscheide es Komponenten und Größenabhängig. Schreibe ich eine Komponente (Zum Beispiel einen Scroller wie du ihn nutzt) dann lager ich das Script in eine Datei aus. Habe ich einen 4-5 Zeiler, der solche Komponenten aufruft, so belass ich dieses meistens direkt im Html.

Wenn dein Script dann immer noch nicht funktioniert schreib noch mal :)
Eine kleine Bitte. Html und CSS werden besser in den dafür vorgesehen Code-tags dargestellt. Siehe dafür den Link in meiner Signatur :)

 

[Kirin25m]

Hallo Gilles,


erst einmal vielen Dank für Deine schnelle Antwort und dem Script. Ich habe es gerade so geschrieben, wie Du es vorgegeben hast - leider funktioniert es damit auch nicht. Ich habe nun weder in der HTML noch in der CSS etwas hineingeschrieben, richtig?

Grüsse
Michael

 

[Gilles]

du musst schon alles kombinieren :) Wie auch in der Demo. Du hast einen html, einen css und einen js teil. Schau dir die Demo die du gepostet hast noch einmal an :)

 

[Kirin25m]

Hab ich - aber was genau soll ich in die CSS schreiben? Weil ich ja mein Portfolio habe bzw. mein "mycustomsscroll" habe. Ich bin da gerade auf einem Holzweg - wenn Du mich viel. auf den richtigen Weg der Erleuchtung bringen würdest, wäre ich Dir sehr dankbar ;-).

Grüsse

 

[Gilles]

Fangen wir mal so an: Wie sieht dein Vorhaben aus, was für Elemente hast du gegeben? Wo steckt dein Inhalt drin, der gescrollt werden soll?
Denn sonst kann ich auch nur raten, was in 80% der Fälle in die Hose geht
Weil ich bin davon ausgegangen du hast im ersten Post dein HTML und dein CSS gepostet und dass portfolio das sein soll, was gescrollt werden kann. Ich nehme nur schwer an, dass die Scrollgeschichte nur bei block-Elementen funktionert (Hab es aber nicht ausprobiert).