Problem mit 2 Mootools Plugins zusammen nutzen
Hey,
ich hoffe dieser Thread passt hier hinein. Sonst bitte Offtopic schieben, danke. Es geht um altbekanntes Problem, das bei der Arbeit mit all diesen Frameworks mit der Zeit aufkommt. Wenn man nur die PlugIns benutzt, nicht aber die Sprache. So wie es auch mir ergangen ist. Ja, ich geb es zu, ich kann leider nur mit rudimentären Javascript-Kenntnissen mithalten. Und das heutzutage... schande!^^
Auf einer Seite nutze ich zwei Mootools Plugins, beide von David Walsh. Das eine, Clickables PlugIn, und das andere, Smooth Scroll machen genau das, was sie sollen.
- Clickables sorgt dafür, dass nicht nur Links sondern auch Listenelemente etc. anklickbar sind.
- SmoothScroll ersetzt das ruckartige Verhalten bei Sprunglinks durch ein sanftes scrollen.
Nun ist es aber so, dass eines der Plugins (SmoothScroll) das andere in Kombination mit diesem aushebelt. Ich stell mir das so vor, dass SmoothScroll nach Links mit Sprungmarken im gesamten DOM sucht und denen dann dieses "sanfte Verhalten" verpasst, indem es per Javascript zur gewünschten Stelle scrollt, anstatt das dem Browser zu überlassen. Der Link selbst wird also "ausgehebelt" (in etwa onclick: return false; übergeben?). Dieses Verhalten ist aber nicht am gesamten Dokument erwünscht. Ich habe zum Beispiel Links, die sowohl auf andere Seiten verweisen als auch mit einer Sprungmarke bestückt sind (/seite.html#sprungmarke).
Mein momentaner Lösungsansatz sieht derzeit so aus, dass ich nur bestimmten Bereichen (Klassen) dieses Scroll-Verhalten gewähre, um so nicht mit anderen Links samt Sprungmarken zu konfrontieren.
Hier die function.js, in der alle PlugIns aufgerufen werden:
Code:
window.addEvent('domready', function() {
// (en) smooooooth scrolling enabled
// (de) sanftes scrollen aktivieren
var smooothly = new SmoothScroll({
duration: 3000
});
// (en) entire list items on table of contents are clickable
// (de) Listen-Elemente im Inhaltsverzeichnis sind anklickbar
var toc = new dwClickables({
elements: $$('.index li'),
selectClass: 'linkto',
anchorToSpan: false
});
// (en) entire teaser article are clickable
// (de) Artikel-Anreisser sind anklickbar
var teaser = new dwClickables({
elements: $$('.ce_teaser'),
selectClass: 'more',
anchorToSpan: false
});
});
Den ersten Teil des Codes möchte ich nur einer bestimmten Klasse zuweisen (.smooth). Gibt es da den ein oder anderen Mootools Experten, der mir unter die Arme greifen kann?
EDIT: Wie es scheint hab ich da etwas in meinem Lösungsansatz übersehen: Es funktioniert auch dann nicht, wenn ich den Aufruf des Plugins aus meiner function.js entferne. Bereits seit der Einbindung im Head der fe_page.tpl haut nichts mehr mit Clickables hin. Vorschläge?
Großen Dank schon mal im Voraus!
