[gelöst] Accordeon bei Mouseover öffnen/schließen?

[comanche]

Hallo,

über die Suchfunktion bin ich nicht fündig geworden, deshalb frag' ich ganz unverfroren: Kann ich das Accordeon so einstellen, dass es bei Mouseover einklappt/aufklappt?

Danke und Grüße,
Andreas

[schman]

Das Accodion läuft über MooTools, hierzu gibt es auch ein Template moo_accordion (oder so ähnlich)
Dort wird der Aufruf des accordiosn getätigt, nun kannst du alle Optionen verwenden die eben das Accordion bereitstellt.

[comanche]

Danke für den Tipp. Allerdings habe ich als Nicht-Programmierer keine Ahnung, wie die Syntax im Template lauten müsste.

Ich hatte mir diese Seite angeschaut und versucht die entsprechende Funktion (unter "View Source") in mein Seitentemplate einzubauen, um den Event "mouseover" zu setzen. Das klappt aber so nicht.

<script type="text/javascript">
	$(function() {
		$("#accordion").accordion({
			event: "mouseover"
		});
	});
	</script>

Wo und vor allem WIE kann ich das Verhalten auf "mouseover" umstellen? Hast Du noch einen Hinweis für mich?

Grüße,
Andreas

[lindesbs]

Nach Befragung einer gaengigen Suchmaschine, finde ich folgende Seite : http://davidwalsh.name/mootools-accordion-hover-event

Schau Dir die Demo an, ich vermute mal, das ist das, was du haben moechtest.

[comanche]

Nach Befragung einer gaengigen Suchmaschine, finde ich folgende Seite : http://davidwalsh.name/mootools-accordion-hover-event

Schau Dir die Demo an, ich vermute mal, das ist das, was du haben moechtest.

Vielen Dank für den Link!

Da ich ein hier im Forum gepostetes Toggler-Script im Einsatz habe, dachte ich mir, ich integriere den Mouseover in diesem Script, was dann so aussschaut:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
	$$('.toggler').addEvent('mouseenter', function() {
	this.fireEvent('click'); });
	
	this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'), 
	{
		opacity: false,
		onActive: function(toggler, i)
		{
			toggler.getFirst() ? toggler.getFirst().addClass('togactive') : toggler.addClass('togactive');
			toggler.getFirst() ? toggler.getFirst().removeClass('toginactive') : toggler.removeClass('toginactive');
		},

		onBackground: function(toggler, i)
		{
			toggler.getFirst() ? toggler.getFirst().removeClass('togactive') : toggler.removeClass('togactive');
			toggler.getFirst() ? toggler.getFirst().addClass('toginactive') : toggler.addClass('toginactive');
		}
	});
	
});
//--><!]]>
</script>

Es funktioniert grundsätzlich, bis auf dass die Elemente beim Darüberfahren manchmal "zittern". Siehe hier:

Beispielseite

Ist die Funktion korrekt in das Script integriert oder siehst Du da gravierende Fehler?

Nochmals vielen Dank und viele Grüße,
Andreas

[lindesbs]

Offensichtlich funktioniert es ja, aber ich kann nicht sagen ob das richtig oder flasch ist. JS ist nicht wirklich mein Ding.

[comanche]

Offensichtlich funktioniert es ja, aber ich kann nicht sagen ob das richtig oder flasch ist. JS ist nicht wirklich mein Ding.

Ok, trotzdem vielen Dank!

Grüße,
Andreas

[comanche]

Jetzt habe ich noch eine Frage, zu der ich wieder mal per Suche keine Antwort gefunden habe (Asche auf mein Haupt):

Ist es möglich, das Schließen eines Accordeon-Elements bei Klick auf dessen Titel zu verhindern?

Es soll sich ein Element quasi nur dann schließen, wenn ein anderes geöffnet wird. Hintergrund: bei Verwendung des Mouseover-Events endet es schnell in hektischem Auf- und Zuklappen der Elemente. Aber auch ohne Mouseover-Effekt wäre es schön, wenn man das Zuklappen per Klick eines geöffneten Elements unterbinden könnte, um zu verhindern, dass alle Elemente geschlossen sind.

Vielleicht bildet das weiter oben gezeigte Script schon eine Grundlage, um das Reagieren eines geöffneten (aktiven) Elements auf ein Maus-Event zu unterbinden?

Grüße,
Andreas

[xchs]

Hallo comanche,

Es funktioniert grundsätzlich, bis auf dass die Elemente beim Darüberfahren manchmal "zittern".

Also, soweit ich das sehe, kommt dieser "Effekt" dadurch zustande, dass da im ersten Element des Akkordeons zusätzlich ein Flash-Video eingebunden ist, also im Prinzip genau dann, wenn sowohl im Flash als auch im JS eine Aktion stattfindet.

Weiters fällt mir auf, dass Dein Akkordeon zweimal initialisiert und konfiguriert wird, einmal im HEAD der Seite und einmal am Seitenende. Hast Du den Code für das Akkordeon im HEAD manuell in Dein Seiten-Template "fe_xxx.tpl" eingefügt oder hast Du das über das betreffende Eingabefeld im "Seitenlayout" gemacht?

In Deinem Seitenlayout ist auf jeden Fall unten im Abschnitt "MooTools-Templates" der Eintrag "moo_accordion" ausgewählt, den Du aber im gegenständlichen Fall nicht mehr brauchst (andernfalls wird - wie oben schon erwähnt - das Akkordeon zweimal konfiguriert)

Als Alternative könntest Du durchaus auch, anstelle den Code im HEAD der Seite einzubinden, ein eigenes MooTools-Template anlegen (z.B. "moo_accordion_mouseover.tpl") und dort den besagten Code mit sämtlichen diebezüglichen Einstellungen/Optionen reinschreiben. So hättest Du nämlich auch die Möglichkeit, dieses Template bequem im Backend unter Seitenlayouts zu aktivieren oder deaktivieren...

[comanche]

xchs, vielen Dank für die ausführlichen Erklärungen! Ich werde schauen, dass ich etwas Ordung in das Chaos bringe. *schäm*

Grüße,
Andreas

[comanche]

... Weiters fällt mir auf, dass Dein Akkordeon zweimal initialisiert und konfiguriert wird, einmal im HEAD der Seite und einmal am Seitenende. ...

Ich hatte das Accordeon Script im Seitenlayout unter den Head-Tags eingefügt. Dass das Accordeon zweimal initialisiert wird war der entscheidende Hinweis! Da sieht man mal wieder, was man alles falsch machen kann, wenn man von Scripting keine Ahnung hat *g*.

Nun habe ich - wie von Dir vorgeschlagen - ein eigenes Moo-Template erstellt und das Script aus dem Head-Bereich herausgenommen. Es wird also nur noch einmal am Seitenende initialisiert. Und siehe da: das Zittern ist weg und das Verhalten des Accordeon beim Mouseover ist genau so, wie ich es wollte.

Vielen Dank dafür!

Grüße,
Andreas