zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Fx.Slide auf mehrere Tabellenreihen anwenden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.12.2011, 05:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.12.2011
Beiträge: 4
rocco befindet sich auf einem aufstrebenden Ast
Standard Fx.Slide auf mehrere Tabellenreihen anwenden

Hallo,

ist es möglich mit Fx.Slide bestimmte Tabellenreihen ein/auszublenden?

Wenn Ja,
wie bekomme ich es hin das ich eine Klasse ansprechen kann?
Code:
window.addEvent('domready', function(){
	
	var mySlide = new Fx.Slide('row_1', {mode: 'vertical'}).hide();
	
	
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
	
	
});
Wie kann ich mehrere Reihen z.B. row_1, row_2, row_3, row_4 usw anzusprechendas sie zusammen ein/ausblenden?
Die Anzahl weiß ich vorher nicht, die liefert php.
Ich könnte natürlich auch allen Tabellenreihen die getoggelt werden sollen eine Klasse geben z.B. hidden, die sollten aber dann wie ein gesamtes Element ein/ausgeblendet werden.

Viele Grüße

rocco

Geändert von rocco (29.12.2011 um 05:28 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.12.2011, 10:07
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Haben alle td der zweiten Spalte die Klasse class='wechmit' dann sollte es mit

Code:
$('.wechmit').toggle()
ein- und ausblendbar sein. Den Händler würde ich an den Spaltenkopf klemmen.
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.12.2011, 17:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.12.2011
Beiträge: 4
rocco befindet sich auf einem aufstrebenden Ast
Standard

Hallo Scheppertreiber,

habe jetzt allen Tabellenreihen die getoggelt werden sollen die classe fx_slide gegeben aber es funktioniert leider nicht.

Code:
window.addEvent('domready', function(){
	
	var mySlide = new Fx.Slide $('.fx_slide', {mode: 'vertical'}).hide();
	
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
	
	
});
und aufgerufen wird es:
Code:
<div><a id="toggle" href="#">Toggle</a></div>
Wenn ich anstatt der classe
Code:
new Fx.Slide $('.fx_slide', {mode: 'vertical'}).hide();
eine ID
HTML-Code:
new Fx.Slide ('gallery', {mode: 'vertical'}).hide();
verwende geht es.

Warum geht es mit einer Klasse nicht?
Mit Zitat antworten
  #4 (permalink)  
Alt 29.12.2011, 21:29
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

Ihr sprecht da ein wenig aneinander vorbei, rocco nutzt Mootools, Joe hat Beispielcode für jQuery gezeigt.

Ein Beispiel mit Mootools könnte so aussehen:
Code:
$('toggle').addEvent('click', function() {
	$$('.wechmit').set('slide').slide();
});
Dein Element mit der id „toggle“ ist der Auslöser, alle Elemente mit der Klasse „wechmit“ werden ein- und ausgeklappt. Den Schnippsel kannst du statt deines Codes in deiner domready-Funktion verwenden.

Du kannst natürlich auch mit den Fx-Klassen direkt arbeiten rocco, aber du scheinst Javascript mehr zu raten als zu beherrschen, daher solltest du zu der einfacheren Lösung greifen oder/und dich mit den Grundlagen beschäftigen.
Mit Zitat antworten
  #5 (permalink)  
Alt 29.12.2011, 21:50
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.626
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

Siehe auch: MooTools Docs - Element/Element
__________________
github | http://dnaber.de
Mit Zitat antworten
  #6 (permalink)  
Alt 29.12.2011, 22:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.12.2011
Beiträge: 4
rocco befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Antworten.
Es funktioniert, freu.

@inta: ja das stimmt, bin nicht wirklich fit in Javascript, ist ne ewige probiererei..

Jetzt habe ich noch das Problem das beim Aufruf der Seite die Elemente eingeklappt sein sollen.
Wie kann ich das lösen?
Mit Zitat antworten
  #7 (permalink)  
Alt 29.12.2011, 22:45
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

Wirf doch mal einen Blick in die Dokumentation zu Fx.Slide.

Wie du dort lesen kannst, können die Element auch ohne Effekt ausgeblendet werden, das tust du einfach bei domready, zum Beispiel so:
Code:
$$('.wechmit').set('slide').slide('hide');
$('toggle').addEvent('click', function() {
	$$('.wechmit').slide();
});
Mit Zitat antworten
  #8 (permalink)  
Alt 29.12.2011, 23:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.12.2011
Beiträge: 4
rocco befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank inta,
bin am Docu lesen aber ist nicht ganz einfach zu verstehen...

Der Slider funktioniert wie gewünscht, nur die nicht slidebaren Reihen werden teilweise verschoben.
Dieses HTML wird erzeugt:
HTML-Code:
<tbody>
<tr>
    <td style="width: 33%;"></td>
    <td style="width: 33%;"></td>//wird nach rechts geschoben
    <td style="width: 33%;"></td>//wird nach rechts geschoben
</tr>
<div style="margin: 0px; position: static; overflow: hidden; height: 129px;">
    <tr class="wechmit" style="margin: 0px;">
        <td style="width: 33%;"></td>
        <td style="width: 33%;"></td>
        <td style="width: 33%;"></td>
    </tr>
</div>
<div style="margin: 0px; position: static; overflow: hidden; height: 129px;">
    <tr class="wechmit" style="margin: 0px;">
        <td style="width: 33%;"></td>
        <td style="width: 33%;"></td>
        <td style="width: 33%;"></td>
    </tr>
</div>
</tbody>
Im Firebug sehe ich das ein <div> um die slidebare Tabellenreihen gelegt wird.
In der ersten Reihe die nicht slidbar sein soll werden das zweite und dritte <td> nach rechts geschoben.
Das verstehe ich nicht, warum ist das so?
Mit Zitat antworten
  #9 (permalink)  
Alt 30.12.2011, 01:44
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.626
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

Das steht aber auch da:
Zitat:
To create the slide effect an additional Element (a "div" by default) is wrapped around the given Element. This wrapper adapts the margin from the Element. It's overflow is set to hidden and it has a fixed height.
Du wirst die Animation wohl selber machen müssen. Mit periodical() geht das auch ganz gut.

Kennst Du die Artikelserie »Mootools für die Massen« von Peter Kröner? Die könnte für dich interessant sein.
__________________
github | http://dnaber.de
Mit Zitat antworten
Sponsored Links
Antwort

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
mootools Fx.Slide: ohne Mausklick öffnen hailander Javascript & Ajax 4 28.01.2010 16:23
Problem mit Breite&Anordnung von DIVs in Kombi mit fx.slide BoScH CSS 0 12.08.2009 13: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 08:23 Uhr.