zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Probleme mit mootools FX.Slide in Verbindung mit Fx.Accordion

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.02.2010, 12:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2010
Beiträge: 7
dkabilka befindet sich auf einem aufstrebenden Ast
Unglücklich Probleme mit mootools FX.Slide in Verbindung mit Fx.Accordion

Hallo ihr Lieben,

ich habe folgendes Problem: Ich möchte gerne einen Toggle-slide in einem Accordion machen. Beides sind Klassen von mootools. Soweit funktioniert das Ganze auch (zu sehen unter: Go!Spirit - Repertoire).

Mein Problem ist nun, dass ich den slide gerne von Anfang an ausgeblendet hätte und erst bei einem Klick auf das Lied soll dieser "erscheinen". Auch das funktioniert mit der .hide() Einstellung. Allerdings wird nicht der Ganze slide geöffnet, sondern immer nur das obere Stück und dann auch leider ohne scrollbar. Lasse ich den Hide weg, ist der toggle ja standardmäßig von Beginn an eingeblendet und oh Wunder, dann wird auch der Ganze angezeigt.

Woran könnte das liegen und wie kann ich es abstellen? Ich habe es schon in der html mit einem height versucht, aber auch das zeigte keine Wirkung.

Hier noch die verschiedenen Codes:
demo.js (zuständig für das Accordion)
PHP-Code:
window.addEvent('domready', function() {
    
    
//create our Accordion instance
    
var myAccordion = new Accordion($('accordion'), 'h3.toggler''div.element', {
        
display: -1,
        
opacitytrue,
        
alwaysHidetrue,
        
onActive: function(togglerelement){
            
toggler.setStyle('color''#A9020A');
        },
        
onBackground: function(togglerelement){
            
toggler.setStyle('color''#3B495A');
        }
    });
}); 
slide.js (zuständig für den Slide Effekt):
PHP-Code:
window.addEvent('domready', function() {
    var 
status = {
        
'true''open',
        
'false''close'
    
};
    
    
//-vertical

    
var myVerticalSlide = new Fx.Slide('vertical_slide').hide();

    $(
'v_toggle').addEvent('click', function(e){
        
e.stop();
        
myVerticalSlide.toggle();
    });

}); 
der zuständige Teil aus der .css-Datei:
Code:
/*FX.Accordion*/
#accordion {
	margin:20px 0px;
}

h3.toggler {
	cursor: pointer;
	border: 0px solid #f5f5f5;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	background: transparent;
	color: #3B495A;
	margin: 0 0 0 0;
	padding: 0px 10px;
}

div.element p, div.element h4 {
	margin:0px;
	padding:0px 10px;
}

blockquote {
	padding:5px 20px;
}

/*FX.Slide*/
h3.section {
	margin-top: 0em;
}

#vertical_slide, #horizontal_slide {
	background: #transparent;
	color: #3B495A;
	padding: 0px 10px;
	border: 1px solid #8C8C8C;
}

div.marginbottom {
	/* Since the Fx.Slide element resets margins, we set a margin on the above element */
	margin-bottom: 0px;
}
und schließlich der html-Ausschnitt:
HTML-Code:
<table>
	<tr>
		<td id="accordion">
		<h3 class="toggler">A</h3>
		<div class="element"> 
			<div class="marginbottom">
			<a id="v_toggle" href="#">All because of Jesus</a>
			</div>
			<div id="vertical_slide">
			<font size="4" color="#A9020A"><center><u><b>All because of Jesus / Alles wegen Jesus</b></u></center></font><br>
			Wegen Jesus sind wir heute hier.<br>
			<br>
			Du kamst aus dem Himmel um am Kreuz zu sterben.<br>
			Du opfertest dein Leben für jeden von uns.<br>
			Und als du wieder auferstandst, errangst du den Sieg.<br>
			Wegen Jesus sind wir heute frei.<br>
			Wegen Jesus sind wir eine Familie.<br>
			Du bist mein Retter, mein Erlöser und mein Freund<br>
			und wenn ich falle, hebst du mich auf.<br>
			Du hast uns das Himmelstor geöffnet und den Sieg gebracht.<br>
			Wegen Jesus sind wir frei.<br>
			Im Namen Jesus haben wir den Sieg.<br>
			Wir werden mit Jesus in alle Ewigkeit leben.<br>
			Glory Halleluja!<br>
			<br>
			Jesus wir loben dich Hallelujah	</div>

			<a href="songtexte/allbecause.html" onclick="window.open('songtexte/allbecause.html','Songtext','width=530,height=370,left=100,top=150,scrollbars=YES'); return false;">All because of Jesus (T. Aas)</a><br>
     	    <a href="songtexte/amazinggrace.html" onclick="window.open('songtexte/amazinggrace.html','Songtext','width=510,height=430,left=100,top=150,scrollbars=YES'); return false;">Amazing Grace</a><br>
      		Amen (Jester Hairston)<br>
      		Angels from the realms of glory (Henry Smart)<br>
      		<a href="songtexte/astarisshining.html" onclick="window.open('songtexte/astarisshining.html','Songtext','width=590,height=320,left=100,top=150,scrollbars=YES'); return false;">A star is shining tonight (<font color="#A9020A">T:</font> Eyvind Skeie / <font color="#A9020A">M/S:</font> T.Aas)</a><br>      		
      		At the cross (<font color="#A9020A">M:</font> R.E. Hudson / <font color="#A9020A">S:</font> H. Jost)<br>
      		Aufrecht stehn (<font color="#A9020A">M:</font> B. Engel / <font color="#A9020A">T:</font> C. Lang)</div>      		
     	<h3 class="toggler">B</h3>
		<div class="element">
			<p>
      		Bewahre uns, Gott (<font color="#A9020A">M:</font> A. Ruuth / <font color="#A9020A">T:</font> E. Eckert)<br>      		
      		Bin überreich beschenkt (<font color="#A9020A">M:</font> D.Falk / <font color="#A9020A">T:</font> A. Malessa)<br>
      		Blessed be His name (<font color="#A9020A">M:</font> H. Jost / <font color="#A9020A">T:</font> R. Wilson)<br>
      		<a href="songtexte/blessthelord.html" onclick="window.open('songtexte/blessthelord.html','Songtext','width=440,height=250,left=100,top=150'); return false;">Bless the Lord (T. Aas)</a></p></div>
usw...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.02.2010, 19:09
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Das Problem ist, dass sich Accordion und Slide in die Quere kommen. Hast du Firebug installiert? Inspiziere damit mal den Code. Das Accordion setzt ein Div mit fester Höhe und overflow: hidden, die Höhe bietet genug Platz für die bei der Initialisierung sichtbaren Elemente, nicht aber für die versteckten.

Ich würde eine eigene Klasse schreiben, welche von Accordion ableitet und den Slider dort implementieren. Ich weiß allerdings nicht, wie gut eine Javascript/Mootools-Kenntnisse sind.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.02.2010, 19:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2010
Beiträge: 7
dkabilka befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

vielen Dank für die Antwort. Leider sind meine Kenntnisse in Java nicht gerade überragend. Ich kann zwar gegebenes anpassen und verstehe auch halbwegs worum es geht, allerdings eine neue Klasse zu schreiben, das kann ich wohl nicht.

Bedeutet es viel Aufwand dies zu tun? Oder hast Du vielleicht eine andere Idee, wie man das mit dem Repertoire umsetzen kann? Momentan läuft es ja über Popups, ich fand den Slider Effekt nur sehr gelungen dafür.

LG
Mit Zitat antworten
  #4 (permalink)  
Alt 12.02.2010, 14:00
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zitat:
Zitat von dkabilka Beitrag anzeigen
Bedeutet es viel Aufwand dies zu tun?
Keine Ahnung, ich habe mir das nicht genauer angeschaut, da ich im Moment selbst Zeitmangel habe.

Zitat:
Zitat von dkabilka Beitrag anzeigen
Oder hast Du vielleicht eine andere Idee, wie man das mit dem Repertoire umsetzen kann? Momentan läuft es ja über Popups, ich fand den Slider Effekt nur sehr gelungen dafür.
Man könnte sich natürlich Alternativen bedienen, die dann den Text außerhalb des Accordions darstellen (Popup, Lightbox oder ähnliches), aber ich persönlich fänd das nicht besonders schick.
Mit Zitat antworten
  #5 (permalink)  
Alt 14.02.2010, 19:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2010
Beiträge: 7
dkabilka befindet sich auf einem aufstrebenden Ast
Standard mhhh

Hat denn vielleicht jemand anderes etwas Zeit und könnte sich das einmal anschauen? Wann hättest Du denn wieder Zeit?

LG und vielen Dank

Natürlich bin ich auch weiterhin dankbar für evtl. andere Realisierungsvorschläge! Immer her damit!
Mit Zitat antworten
Antwort

Stichwörter
accordion, ausklappen, komplett, mootools, probleme, slide

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Link ausblenden nach Klick (Mootools Fx.Slide) Synoxis Javascript & Ajax 1 20.05.2010 15:33
mootools Fx.Slide: ohne Mausklick öffnen hailander Javascript & Ajax 4 28.01.2010 16:23
FX.Slide von MooTools - Erfahrungen? charlie Javascript & Ajax 3 06.09.2008 14:09
MooTools: Fx.Slide - konfiguration img Javascript & Ajax 0 27.06.2008 14:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:16 Uhr.