1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

MOOTOOLS: Fx.Slide 2

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Grawapple, 18.09.09.

  1. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    Moins

    Ich habe folgenden Code:

    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
     
  2. Bajuware

    Bajuware Oberösterreichischer Brünerling

    Dabei seit:
    23.04.08
    Beiträge:
    707
    extrem umständlich programmiert. Wie wärs mit ner function() die alle panels aus"slidet" ;)
     
  3. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    Ne, weil jetzt flackerts ja so doof...siehe BSP. Das ist, weil es alle rein und raus fährt...
     
  4. C64

    C64 Halberstädter Jungfernapfel

    Dabei seit:
    12.04.06
    Beiträge:
    3.836
    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.
     
  5. Grawapple

    Grawapple Uelzener Rambour

    Dabei seit:
    13.05.06
    Beiträge:
    373
    Hmm also MOOTOOLs benutzt auch JS...
     
  6. Bajuware

    Bajuware Oberösterreichischer Brünerling

    Dabei seit:
    23.04.08
    Beiträge:
    707
    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.
     

Diese Seite empfehlen