MOOTOOLS: Fx.Slide 2

[Grawapple]

Moins

Ich habe folgenden Code:

window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'
	};
	
	//MENU

	var slideHome = new Fx.Slide('site_home');
	var slideImgsHome = new Fx.Slide('images_home').hide();
	var slidePerson = new Fx.Slide('site_person').hide();
	var slidePinguin = new Fx.Slide('site_pinguin').hide();
	var slideGalerie = new Fx.Slide('site_galerie').hide();
	var slideKontakt = new Fx.Slide('site_kontakt').hide();
	
	//!MENU!

	$('home_slide').addEvent('click', function(e){
		e.stop();
		slideImgsHome.slideOut();
		slidePinguin.slideOut();
		slideGalerie.slideOut();
		slideKontakt.slideOut();
		slidePerson.slideOut();
		slideHome.slideIn();
	});

	$('person_slide').addEvent('click', function(e){
		e.stop();
		slideHome.slideOut();
		slideImgsHome.slideOut();
		slidePinguin.slideOut();
		slideGalerie.slideOut();
		slideKontakt.slideOut();
		slidePerson.slideIn();
	});

	$('pinguin_slide').addEvent('click', function(e){
		e.stop();
		slideHome.slideOut();
		slideImgsHome.slideOut();
		slidePerson.slideOut();
		slideGalerie.slideOut();
		slideKontakt.slideOut();
		slidePinguin.slideIn();
	});
	
	$('galerie_slide').addEvent('click', function(e){
		e.stop();
		slideHome.slideOut();
		slideImgsHome.slideOut();
		slidePerson.slideOut();
		slidePinguin.slideOut();
		slideKontakt.slideOut();
		slideGalerie.slideIn();
	});
	
	$('kontakt_slide').addEvent('click', function(e){
		e.stop();
		slideHome.slideOut();
		slideImgsHome.slideOut();
		slidePerson.slideOut();
		slidePinguin.slideOut();
		slideGalerie.slideOut();
		slideKontakt.slideIn();
	});
	
		$('home_activateimgs').addEvent('click', function(e){
		e.stop();
		slideHome.slideOut();
		slidePerson.slideOut();
		slidePinguin.slideOut();
		slideGalerie.slideOut();
		slideKontakt.slideOut();
		slideImgsHome.slideIn();
	});
	
	$('home_imgs_close').addEvent('click', function(e){
		e.stop();
		slideImgsHome.slideOut();
		slidePerson.slideOut();
		slidePinguin.slideOut();
		slideGalerie.slideOut();
		slideKontakt.slideOut();
		slideHome.slideIn();
	});


	
});

Nun, wie ihr seht ist das recht umständlich jedes mal alle "offenen" Slides zu schliessen und das neue zu öffenen. Ausserdem flackerts manchmal so komisch, was sehr störend ist. Siehe: pinguin.wapple.ch. Nun wollte ich fragen, ob es ne Möglichkeit gäbe, wie man das "offene" Slide beim Namen finden kann und dann nur dasjenige auch wirklich schliesst?

Danke für jede Antwort

LG Arcturo

 

[Bajuware]

extrem umständlich programmiert. Wie wärs mit ner function() die alle panels aus"slidet"

 

[Grawapple]

Ne, weil jetzt flackerts ja so doof...siehe BSP. Das ist, weil es alle rein und raus fährt...

 

[C64]

Also ich persönlich würde ja eher auf jQuery setzen Soweit ich mich erinnern kann brauchen die mootools ja flash, richtig? Und Flash versuche ich stehts zu umgehen
Auf jeden Fall könntest du slides einfach durchnummerieren (slide1, slide2...). So löse ich so etwas immer.
Mit jQuery wüsste ich da schon ein paar Ansätze. Hab das zB auf meiner neuen Seite mit jQuery umgesetzt und da ruckelt und flackert nix
Auf jeden Fall wäre das mit einer function() deutlich einfacher

Ich weiß nicht wie mootools den Slide realisiert. Denn wenn du auf jQuery setzt, dann würde das mit nem negativen margin gelöst und dann könntest du das css einfach auslesen lassen und die Teile aussliden lassen, die aktuell ein positiven marginwert (oder ==0) haben und dann den gewünschten einfahren lassen.

 

[Grawapple]

Hmm also MOOTOOLs benutzt auch JS...

 

[Bajuware]

Ne, weil jetzt flackerts ja so doof...siehe BSP. Das ist, weil es alle rein und raus fährt...

Oh man, sag doch nicht »ne« wenn du scheinbar wenig Ahnung hast und Hilfe möchtest. Dein Code ist viel zu aufgeblasen und rödelt sinnlos runter. Du startest eine Kette die natürlich flackert. Vor allem wenn Scrollbars mit im Spiel sind und sich die Höhe verändert ist das bei diesem Vorgehen kein Wunder.

Alle Panels mit einer function() aussliden, ein kurzes Timeout setzen und dann das neue Panel einsliden. Trotzdem würd ich das ganze nochmal gründlich überdenken, denn je nach Länge der Panels musst du die Höhe ja auch noch abfragen um Überlappungen zu vermeiden, die aktuell aufgrund einer fixen Länge und eines einzig längeren Panels ja noch ausgeschlossen sind.

Sinnvoller in diesem Aufbau wäre eh eine if/else Abfrage welche Panel offen ist und welches Panel geöffnet werden soll, du sprichst sinnloser Weise ja auch immer alle an.

Wie gesagt, der Codeaufbau und der Funktionsaufbau sind falsch - ganz einfach.