Landkarte mit Scrollfunktion

[Quabbe]

Hallo,

ich habe mittels Mootools (Scroll) eine, na ja, teils scrollbare Landkarte in meine Seite integriert. Siehe (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]

AW: Landkarte mit Scrollfunktion

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]

AW: Landkarte mit Scrollfunktion

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]

AW: Landkarte mit Scrollfunktion

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]

AW: Landkarte mit Scrollfunktion

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]

AW: Landkarte mit Scrollfunktion

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]

AW: Landkarte mit Scrollfunktion

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.

 

[Quabbe]

AW: Landkarte mit Scrollfunktion

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]

AW: Landkarte mit Scrollfunktion

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]

AW: Landkarte mit Scrollfunktion

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]

AW: Landkarte mit Scrollfunktion

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]

AW: Landkarte mit Scrollfunktion

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

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

 

[ArtiHl]

AW: Landkarte mit Scrollfunktion

ich hab gerade von deiner hauptseite geredet.

Wenn ich dort die obengenannte passage rausnehme dann klappts.

 

[Quabbe]

AW: Landkarte mit Scrollfunktion

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!

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]

AW: Landkarte mit Scrollfunktion

müsste so eigendtlich funktionieren.

 

[Quabbe]

AW: Landkarte mit Scrollfunktion

Was mir nur auffällt: wenn ich zu einem Land scrolle und mit der Maus den Kartenrand berühre, zuckt und zappelt das Ding wie verrückt. Kann ich js irgendwie verklickern, dass das Scrollen per Maus Priorität vor dem automatischen Scrollen haben soll und dieses dadurch abgebrochen wird?

 

[ArtiHl]

AW: Landkarte mit Scrollfunktion

Zu dem Rand:
du packst um das div mit der id "demo-inner" ein weiteres div:

<div class="BildRand">
<div id="demo-inner">
/*Inhalt von demo-inner*/
</div>
</div>

Das div mit der klasse "BildRand" positionierst du mit CSS genau über dem div "demo-inner" ausserdem gibst du ihm die gleiche größe.
Dann fügst du als hintergrundgrafik dein Rand ein.

Wenn du mausover effekte haben willst wird das etwas schwieriger.
Dann könntest du z.B. mit listen arbeiten, eine für jede seite, diese musst du dann mit css in die richtige position bringen(die listen befinden sich im div "BildRand" und dann kannst du wie bei einer normalen hover navigation den mouseovereffekt erzeugen.

Bei deinem anderen Problem muss ich erstmal gucken, ich hab aber gesehen was du meinst.

 

[Quabbe]

AW: Landkarte mit Scrollfunktion

Danke, ich habs grad versucht. Jedoch legt er die ul dann nicht über die Karte sondern verdrängt diese nur. Sprich, die Karte fängt dann erst weiter unten an.

Müsste mit position:absolute (relative?) eigentlich lösbar sein, glaube ich. Na, ich werd mal weiter daran arbeiten!

edit: ich kriegs nicht hin. Trotz position:absolute und background-attachment:fixed will die verflixte Grafik nicht an Ort und Stelle bleiben. Siehe hier: www.caeruin.de/kartenwerk.html

edit2: egal, dann halt ohne Randgrafik. Ich hab das li-Gerüst zwar über die ganze Konstruktion legen können, scrollen konnte ich dann aber nicht mehr, wenn ich mit der Maus darüber war. Soll ja auch nicht Sinn der Sache sein ...


Quabbe