Landkarte mit Scrollfunktion

[Quabbe]

Hallo,

ich habe mittels Mootools (Scroll) eine, na ja, teils scrollbare Landkarte in meine Seite integriert. Siehe --> hier <-- (Funktionieren tun zZt nur die ersten fünf Links ... bevor ich mir die Arbeit mache, brauche ich erstmal euren Rat!)

Sieht soweit ganz toll aus, nur soll die Karte natürlich auch auf normalem Weg scrollbar sein. Im besten Fall, indem ich mit der Maus einfach an den Rand fahre. Ich habe dazu mal einen Screenshot erstellt, wie das ganze aussehen könnte:

Meine Javascrip Kenntnisse sind begrenzt. Ehrlich gesagt, ich verstehe gar nichts von Javascript und habe momentan auch nicht die Zeit, mich darin einzuarbeiten. Mein Caeruin-Projekt verschlingt einfach jede freie Stunde und es gibt noch so viele Bereiche, die ausgebastelt werden müssen. Von der Landkarte, die noch nicht wirklich fertig ist, ganz zu schweigen ...

Na jedenfalls wollte ich deshalb mal hier anfragen, ob mir nicht jemand klipp und klar sagen kann, was ich zu tun habe, um meine Idee zu realisieren. Ist es überhaupt möglich, die Scrollfunktion, wie ich sie mir vorstelle, mit Mootools Scroll zu vereinen? Wäre toll, wenn mir jemand helfen könnte oder mir einen Link zu irgendeiner Form hilfreicher Lektüre geben könnte.


liebe Grüße,
Quabbe

[ArtiHl]

Hier gibt es ein Beispiel:

mootools demos - Fx.Scroll

statt click kannst du auch mouseover einsetzten.
Falls du Hilfe beim Einbau benötigst melde dich.

[Quabbe]

Ja, das Beispiel kenne ich (siehe Link in meinem ersten Satz).

Was heißt dass, ich kann auch mouseover einsetzen? Klingt ja so, als wäre es ganz einfach. Also insofern ... *meld*

Was muss ich wo einbauen? Muss ich an der js-Datei rumschrauben?

[ArtiHl]

sry, falscher link: guck hier:
mootools demos - The Scroller Class

oben rechts hast du dann das js, html und css.

var scroll2 = new Scroller('mousemove', {area: 100, velocity: 1});

area=anzahl pixel für den mouseover bereich, in deinem fall die breite, bzw. höhe der pfeilgrafik.
velocity=geschwindigkeit.

und hier:
http://mootools.net/docs/more/Interface/Scroller

[Quabbe]

Huhu,

aah, prima Sache. Danke Dir! Genau danach habe ich gesucht. Komisch, dass ich es noch nicht gesehen habe. Ich habe die Demoseite erst kürzlich genau nach sowas durchsucht und nichts gefunden. Wundert mich grade ein bisschen.

Na, jedenfalls habe ich die js-, html- und css-Codes jetzt in die entsprechenden Dateien auf meiner Seite gepackt und hübsch darauf verwiesen. Getan hat sich jedoch nichts. (Habe noch nichts hochgeladen)
Haben die "docs references" auf der mootools-Seite auch irgendeine Bewandtnis? Wenn ich darauf klicke, gelange ich nur auf eine leere Seite ...

Ich würde außerdem gerne die Scrollbalken entfernen. Lässt sich das irgendwie bewerkstelligen?

[ArtiHl]

im Css das overflow:auto auf overflow:hidden setzten.

Lad mal hoch und sag bescheid wenns oben ist.

Zu den doc referenz, ja das funzt irgendwie nicht, der zeite link ist aber die referenz zu der du gelangen müsstest.

[Taharkas]

das hat jetzt zwar nichts mit den mootools zu tun, aber evtl. wäre das für Dich auch was.
Das wird mit der Google Maps API realisiert.
DEMO

[Quabbe]

Habs mal in abgespeckter Variante hochgeladen, zwecks besserer Übersicht, und zwar hier: www.unperfektdesign.de

Da sind jetzt nur die html, css und js Dateien drauf.

@ Taharkas

Hm, das schaut natürlich auch gut aus. Ich hatte anfangs eigentlich geplant, die Karte zoombar zu machen. Als ich dann auf mootools stieß, hab ich mich halt dafür entschieden. Zwischendurch bin ich noch bei Ajax Zoom gelandet, da hab ich dann aber nicht mal mehr Bahnhof verstanden...

edit: habs jetzt hingekriegt! Habe einfach das ganze Gedöhns aus dem Quelltext von der mootools-Seite kopiert, jetzt klappts! Wobei ich noch daran zu knabbern habe, auch meine Caeruin-Seite damit zum Laufen zu bringen. Irgendwas will da nicht so recht klappen ... kann es sein, dass sich manche js-Scripte gegenseitig ausschließen?

[ArtiHl]

Kann sein, allerdings dürften sich deine scripte nicht gegenseitig ausschliessen und zerschiessen.
So müsste es eigendtlich funktionieren:

<script type="text/javascript">
window.addEvent('domready', function() {
var scroll2 = new Scroller('demo-inner', {area: 100, velocity: 0.1});
// Mousemove
$('demo-inner').addEvent('mouseover', scroll2.start.bind(scroll2));
$('demo-inner').addEvent('mouseout', scroll2.stop.bind(scroll2));
                                     });
</script>

[Quabbe]

Danke, ich schaus mir sofort an!

edit: nee, da tut sich immer noch nichts. Ich habe den Code erst in die html-Datei geschrieben und danach der scroll.js hinzugefügt. Die css-Datei muss ich ja nicht zusätzlich ändern, oder?

Aber der Code, den ich jetzt von www.unperfektdesign.de runterkopiert habe, funktioniert ja auch nicht. Als wäre da ein dicker Schnitzer drin, den ich nicht erkenne.

Trotzdem schonmal vielen Dank für Deine Hilfe bis hier, ArtiHI!

edit2: so, ich hab jetzt mal ein bisschen mit unperfektdesign rumprobiert. Wenn ich in der html-Datei auf scroll.js verweise und die js-Datei auch im dortigen Ordner parke, funktioniert nix mehr. Es scheint also an der scroll.js zu liegen?!

[ArtiHl]

Nimm mal das hier raus:

// Drag
			$('drag').addEvent('mousedown', function() {
				this.setStyle('cursor', 'url(/demos/Scroller/closedhand.cur), move');
				scroll1.start();
			});
			$('drag').addEvent('mouseup', function() {
				this.setStyle('cursor', 'url(/demos/Scroller/openhand.cur), move');
				scroll1.stop();
			});

Ich glaube das liegt daran das dort versucht wird die curser datei
"/demos/Scroller/openhand.cur" zu laden, doch die hast du ja nicht und dann geht das script einfach nicht weiter.
Bei mir funtkioniert es auf deiner seite wenn ich das aus deinem js lösche.

[Quabbe]

Ohne Scroll.js klappts nach wie vor, mit Scroll.js nicht.

Wir reden grade von www.unperfektdesign.de, oder?

[ArtiHl]

ich hab gerade von deiner hauptseite geredet.
Kartenwerk
Wenn ich dort die obengenannte passage rausnehme dann klappts.

[Quabbe]

Bei mir tut sich da nix.

Kann sein, dass ich grad den Durchblick verloren habe. Ich hab hier alle möglichen index.html und scroll.js geöffnet und switche ständig zwischen meinem Caeruin- und unperfektdesign-Ordner hin und her und lade alle paar Minuten irgendwas hoch und wieder runter ... erstmal Ordnung schaffen hier.

edit: auf www.unperfektdesign.de liegen die beiden Bilder jetzt nebeneinander. Hilft vielleicht etwas, den Durchblick zu behalten.

edit2: wooooza, ich glaub, ich habs! Beide Scripte verrichten nun ihren Dienst, wie es sein soll! Ich hab das js-Zeugs einfach komplett in die scroll.js gepackt und schon hats geklappt! Jetzt muss ich aus beidem nur noch eins machen ...

edit3: muss ich dazu einfach die Klassen (bzw. Var) ändern? Also aus 'mousemove' zB demo-inner machen?

	var scroll1 = new Scroller('mousemove', {area: 60, velocity: 0.8});			
	// Mousemove
	$('mousemove').addEvent('mouseover', scroll1.start.bind(scroll1));
	$('mousemove').addEvent('mouseout', scroll1.stop.bind(scroll1));

edit4: hrhr, so siehts wohl aus. War einfacher, als ich dachte. Wobei es nicht demo-inner war, sondern demo-wrapper. Jetzt läuft endlich alles! http://www.caeruin.de/kartenwerk.html

Vielen vielen Dank, ArtiHI!

Wenn ich jetzt noch eine Art transparenten Streifen über den Rand legen möchte, der beim Hovern dunkler wird - wie im Bild im Startpost zu sehen -, wie bekomme ich das hin?

[ArtiHl]

müsste so eigendtlich funktionieren.