[gelöst] Layoutbereiche dynamisch einblenden oder ausblenden

**teo** · 25.06.2010, 11:39

Ich bin auf der Suche nach einer Möglichkeit Inhalstbereiche dynamisch ein- oder ausblenden zu können.

Habe eine Seite, die ich mit recht vielen Zusatzfunktionen für den Besucher bestückt habe. Diese Zusatzfunktionen befinden sich alle in der rechten Spalte.

Nun möchte ich eine Möglichkeit schaffen, diese rechte Spalte per Klick auf einen Link oder Button ein- oder auszublenden, für die, welche die Funktionsleiste stört oder nicht brauchen.

Es gäbe da jetzt verschiedene Ansätze.

1. Entweder das Standard-Seitenlayout überschreiben, mit einer Version, in der die rechte Spalte einfach nicht vorhanden ist.

2. Das Einbinden oder Ausklammern eines zusätzlichen Stylesheets in dem ich einfach

Code:

#right .inside { display: none; }

verwende

3. oder das ganze dynamisch mit JavaScript + Cookie (mootools?)

4. Den Kompletten Seitenbaum kopieren und ein anderes Layout verwenden (kommt nicht in Frage )

Vielleicht gibt es ja schon eine Lösung dafür. Ansonsten müsste ich mal versuchen, meine erste Contao-Extension zu schreiben.

**teo** · 25.06.2010, 15:01

Habe das ganze jetzt mit mootools FX.slide gelöst.

Folgendes Script habe ich in das Seitenlayout integriert (ist die abgespeckte Version aus dem Original mootools FX.Slide Demo). Somit wird der Inhalsbereich bei jedem Seitenaufruf wieder versteckt, weil der Status nicht gesichert wird. Habe das Script mit dem mootools HASH.cookie erweitert um den Status zu sichern und bei der Initialisierung des FX.slide abgefragt in welchem Status sich der toggle befindet (2. Codebeispiel) Die Lebensdauer des cookies gibt man mit duration in Sekunden an.

1. Codebeispiel ohne Merker

Code:

<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function() {

	var status = {
		'true': 'schließen',
		'false': 'öffnen'
	};

	//--horizontal
	var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'}).hide();

	$('h_toggle').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.toggle();
	});
	
	// When Horizontal Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myHorizontalSlide.addEvent('complete', function() {
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
});
/* ]]> */
</script>

2. Codebeispiel mit Merker (cookie)

Code:

window.addEvent('domready', function() {

	var pagecookie = new Hash.Cookie('pagecookie', {duration: 3600});

	var status = {
		'true': 'schließen',
		'false': 'öffnen'
	};

	//--horizontal
	if ( true == pagecookie.get('toolbar') )
	{
		var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'}).hide();
	}
	else
	{
		var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});
	}

	// show current status in toggle link
	$('horizontal_status').set('html', status[myHorizontalSlide.open]);

	// switch
	$('h_toggle').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.toggle();
		pagecookie.set('toolbar', myHorizontalSlide.open );
	});

	// When Horizontal Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myHorizontalSlide.addEvent('complete', function() {
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
});

Dann habe ich noch das Template 'fe_page' an der Stelle modifiziert, wo die rechte Spalte angezeigt wird, sofern vorhanden.

Code:

<?php if ($this->right): ?>
<div id="right">

<a id="h_toggle" href="#">Toolbar <span id="horizontal_status">öffnen</span></a>
<div id="horizontal_slide"> 

<div class="inside">
<?php echo $this->right; ?> 
</div>

</div>

</div>
<?php endif; ?>

**stoppel** · 14.10.2010, 01:19

Hallo teo,
ich habe einen ähnlichen Fall wie du. Habe auf meiner Seite verschiedene Bereiche, welche man dynamisch ein- und ausblenden kann. Habe das Ganze mit einem ähnlichen Script gelöst wie du. Der Unterschied liegt darin, dass man verschiedene ID's für verschiedene Elemente vergeben kann. Hier das Script:

Code:

/*
    Smartslider 1.0
    
    Usage:
        Add css class 'slider' for toggle element
        Target element ID in the 'href' attribute with "#"
        
    Options:
        Add css class 'slideShow' that the Element is opened onload
                
    Example:
        <a href="#lorem" class='slider'>Lorem Ipsum</a>
        <p id="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
*/
window.addEvent('domready', function(){
    var mySlides = [];
     $$(".slider").each(function(slider,i){

        // get element to slide
        link = slider.getProperty('href');
        link = link.replace('#','');
         mySlides[i] = new Fx.Slide(link);
        
        // set state
        state = slider.getProperty('class');
        if    (state.search(/slideShow/) == '-1')
            {mySlides[i].hide();}

        // inject onClick event
         slider.addEvent('click', function(e){
            new Event(e).stop();
            mySlides[i].toggle();
            return false;
        });
     });
 });

Anschließend habe ich das Script soweit erweitert, dass eine Klasse 'activo' hinzugefügt wird, falls der Inhalt eingeblendet ist (um den entsprechenden Punkt per CSS stylen zu können). Weiß nicht, ob das so richtig ist, aber es funktioniert:

Code:

window.addEvent('domready', function(){                             
    

    var mySlides = [];
     $$(".slider").each(function(slider,i){

        // get element to slide
        link = slider.getProperty('href');
        link = link.replace('#','');
         mySlides[i] = new Fx.Slide(link, {duration: 500});
        
        // set state
        state = slider.getProperty('class');

        if    (state.search(/slideShow/) == '-1')
            {mySlides[i].hide();}

        else //wenn beim Laden der Seite Slider schon ausgeklappt: gib ihm Klasse "activo"
            {slider.className = 'slider slideShow activo';}

        // inject onClick event
         slider.addEvent('click', function(e){

        //Abfrage, ob es Klasse "activo" gibt. Falls nicht: bilde sie                                  
        if    (slider.getProperty('class').search(/activo/) == '-1')
            {slider.className = 'slider slideShow activo';}

        else //Klasse wieder wegnehmen
            {slider.className = 'slider slideShow';}
            new Event(e).stop();
            mySlides[i].toggle();
            return false;

        });        
        
     });
 });

Jetzt hätte ich es auch gerne, dass der Status gespeichert wird und beim Neuladen der Seite wieder aufgerufen wird. Allerdings weiß ich nicht wirklich, wie ich das Cookie bei meinem Code einbinden muss, damit das funktioniert. Kannst du mir da evtl. weiterhelfen? Wär super!
Liebe Grüße

**lindesbs** · 14.10.2010, 05:42

Etwas OffTopic : Aber koenntet Ihr solche Snippets auch kurz in den "Fertige Tutorials" und im Wiki publizieren ? Das ist naemlic wirklich klasse was ihr dort macht.

http://www.contao-community.de/forum...tige-Tutorials
http://de.contaowiki.org/Kategorie

ev_Snippets

**comanche** · 14.10.2010, 09:22

Danke für das hilfreiche Script. Klasse!

Grüße,
Andreas

**Andreas** · 15.10.2010, 22:10

Habt ihr da maln Link auf die Ergebnisse? Fände ich interessant das auch mal im Einsatz zu sehen.

Gruß

**stoppel** · 17.10.2010, 04:00

Ich hab noch keinen Link, da die Webseite noch nicht fertig und deshalb noch nicht online ist. Und leider hab ich bisher auch noch keine Lösung für das Cookie-Problem. Also falls mir jemand weiterhelfen kann, ich freu mich ;-)

**stoppel** · 19.10.2010, 23:05

Falls noch jemand Interesse daran haben sollte, hab es jetzt folgendermaßen gelöst:

Code:

window.addEvent('domready', function(){							 
	
var pagecookie = new Hash.Cookie('pagecookie', {duration: 0}); 

	var mySlides = [];
 	$$(".slider").each(function(slider,i){

		// get element to slide
		link = slider.getProperty('href');
		link = link.replace('#','');

		//Slider standardmäßig geschlossen
		mySlides[i] = new Fx.Slide(link, {duration: 500}).hide();

		//Slider offen, wenn Cookie vorhanden oder es sich um den 1. Slider handelt
		if(pagecookie.get(i) == true || i == 0)
		{
			mySlides[i].show();
			slider.className = 'slider activo';
		}

		// inject onClick event
 		slider.addEvent('click', function(e){

		//Abfrage, ob es Klasse "activo" gibt. Falls nicht: bilde sie								  
		if	(slider.getProperty('class').search(/activo/) == '-1')
			{
				slider.className = 'slider activo';
			 	pagecookie.set(i, true);
			 }

		else //Klasse wieder wegnehmen
			{
	  			 slider.className = 'slider';
				 pagecookie.set(i, false);
			 }
			
			new Event(e).stop();
			mySlides[i].toggle();
			return false;

		});		
 	});
 });

**teo** · 23.11.2010, 10:22

Zitat von Andreas

Habt ihr da maln Link auf die Ergebnisse? Fände ich interessant das auch mal im Einsatz zu sehen.

Gruß

Hallo. ich brauchte das für eine Backendlösung, aber wie wäre es denn, wenn man für soetwas einen Bereich einrichtet, wo man die Beispiele funktional sammeln kann? Für meinen eigenen Bastelkram habe ich soetwas schon angelegt. Müsste es nur mal aufhübschen.

Habe kürzlich eine ähnliche Sache bauen müssen, allerdings mit FX.Move statt FX.Slide, weil FX.Slide nur LtR und nicht RtL unterstützt. Ganz zufrieden bin ich mit der Lösung noch nicht, da in einigen Situationen ein leichtes Hakeln/Zucken zu bemerken ist. Hier das Beispiel (linke Seitenleiste unter der Navigation) - Der FX.Move-Code steht direkt im HTML-Source fast ganz unten. Bei der Lösung musste ich ein wenig mit CSS z-index 'herumexperimentieren' damit sich das mit #main und #left bzw. der Navi nicht beisst (überlappende Navi wegen border)

http://www.loszockos.net

**Andreas** · 23.11.2010, 11:42

Danke fürs Zeigen.

offtopic: Da schlägt der "background-position: fixed;"-Bug vom Firefox ja wieder voll zu. Ein echtes Manko von Firefox, dass die das immer noch nicht hingekommen haben. Vergleiche mal das vertikale Scrollen vom FF und von Opera. Wenn du das "fixed" rausnimmt ist es besser, würde sich bei diesem Hintergrund vielleicht auch anbieten. Gibt es eigentlich einen einfachen CSS-Hack um fixed nur für FF rauszunehmen?

Gruß

**teo** · 23.11.2010, 11:54

Hmmm... also ich habe hier auf Mac OS X keinen Unterschied beim vertikalen Scrollen. Einziges was mir auffällt ist, dass der Google Chrome eine recht unsaubere JPG-Decodierung macht und damit sicherlich einiges für seine gute Performace rausholt.

Wäre in dem Fall schön, wenn man alle CSS-Attribute mit

Code: