swapContainer - Funktion

Carrear · 21. Februar 2012

Naja, dass der Container das tut was ich will: alle 5 Sekunden die Attributwerte verändern. Bitte nicht lachen, ich zeig euch jetzt mal wie ich die manuelle Steuerung gemacht habe. Das ist die Steuerung via Pfeilsymbol:

Code:

$(document).ready(function(){
		$('.left').click(function(){ 
			if (this.id == '1') {
    				$('#first').css('display', 'block');
				$('#second').css('display', 'none');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'none');
			} else if (this.id == '2') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'block');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'none');
			} else if (this.id == '3') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'none');
				$('#third').css('display', 'block');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'none');
			} else if (this.id == '4') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'none');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'block');
				$('#fivth').css('display', 'none');
			} else if (this.id == '5') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'none');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'block');
			} else { }

			});	
		$('.right').click(function(){ 
			if (this.id == '1') {
				$('#first').css('display', 'block');
				$('#second').css('display', 'none');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'none');
			} else if (this.id == '2') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'block');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'none');
			} else if (this.id == '3') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'none');
				$('#third').css('display', 'block');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'none');
			} else if (this.id == '4') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'none');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'block');
				$('#fivth').css('display', 'none');
			} else if (this.id == '5') {
				$('#first').css('display', 'none');
				$('#second').css('display', 'none');
				$('#third').css('display', 'none');
				$('#fourth').css('display', 'none');
				$('#fivth').css('display', 'block');
			} else { }

			});	
});

und hier im folgenden die Steuerung via Seitenzahl:

Code:

$(document).ready(function(){
                $('.slide_nav_screen_1').click(function(){
                        $('#first').css('display', 'block');
                        $('#second').css('display', 'none');
                        $('#third').css('display', 'none');
                        $('#fourth').css('display', 'none');
                        $('#fivth').css('display', 'none');
		});
                $('.slide_nav_screen_2').click(function(){
                        $('#first').css('display', 'none');
                        $('#second').css('display', 'block');
                        $('#third').css('display', 'none');
                        $('#fourth').css('display', 'none');
                        $('#fivth').css('display', 'none');
		});
                $('.slide_nav_screen_3').click(function(){
                        $('#first').css('display', 'none');
                        $('#second').css('display', 'none');
                        $('#third').css('display', 'block');
                        $('#fourth').css('display', 'none');
                        $('#fivth').css('display', 'none');
		});
                $('.slide_nav_screen_4').click(function(){
                        $('#first').css('display', 'none');
                        $('#second').css('display', 'none');
                        $('#third').css('display', 'none');
                        $('#fourth').css('display', 'block');
                        $('#fivth').css('display', 'none');
		});
                $('.slide_nav_screen_5').click(function(){
                        $('#first').css('display', 'none');
                        $('#second').css('display', 'none');
                        $('#third').css('display', 'none');
                        $('#fourth').css('display', 'none');
                        $('#fivth').css('display', 'block');
		});
});

Füge ich jetzt im Head Bereich den JS Code ein der hier vorgeschlagen wurde:

Code:

<script type="text/javascript" >
function swapContainer() {
  var elements = [
    $('#first'),
    $('#second'),
    $('#third'),
    $('#fourth'),
    $('#fivth')
  ];
  
  for(var pos = 0; pos < elements.length; ++pos) {
    if((elements[pos].css('display') == 'block') || ((pos == 0) && (elements[pos].css('display') == 'inline'))) {
      break;
    }
  }
  
  for(var i = 0; i < elements.length; ++i) {
    elements[i].css('display', 'none');
  }
  
  elements[pos].css('display', 'block');
}
$(document).ready(function(){
      setInterval('swapContainer()', 5000);
});
</script>

Dann tut sich rein gar nichts. Die manuelle Steuerung funktioniert, aber die Veränderung der Attributwerte sozusagen "zeitgesteuert" ist nicht sichtbar.

Parantatatam · 21. Februar 2012

Naja, du sagst ja auch, dass er dem Element die Eigenschaft "display" auf "block" zu setzen, die bereits auf "block" gesetzt wurde. Da ändert sich logischerweise auch nichts.

Carrear · 21. Februar 2012

OMG -.- siehst du, das kommt dabei raus. Ich sitze hier seit .. naja.. ich will mal behaupten seit geschlagenen 3 Stunden, starre darauf und checke nicht, dass ich einfach den falschen Elementen den Wert zugewiesen habe :/

dann will ich das mal ändern und schauen obs klappt ^^

Carrear · 23. Februar 2012

Also die funktion funktioniert nun und ich habe es auch hinbekommen, dass er nach dem 5. Container wieder zum 1. springt:

Code:

function swapContainer() {
	var elements = [
		$('#first'),
		$('#second'),
		$('#third'),
		$('#fourth'),
		$('#fivth')
		];
  
	for(var pos = 0; pos < 5; ++pos) {
		if((elements[pos].css('display') == 'block') || ((pos == 0) && (elements[pos].css('display') == 'inline'))) {
			break;
			}
		}
  
	for(var i = 0; i < 5; ++i) {
		elements[i].css('display', 'none');
		}
	if(pos >= 4) {
		elements[0].fadeIn().css('display', 'block');
		var pos = 0;
		} else {
		elements[pos].next().fadeIn().css('display', 'block');
		}
	}

Allerdings ist mir eine seltsame Tatsache aufgefallen. Wenn ich das Fenster nicht im Vordergrund habe (und NUR dann) und es dann nach einer gewissen Zeit wieder öffne, dass werden alle Container auf einmal, untereinander dargestellt. Sprich - dann sind alle auf display: block. Und das seltsamerweise obwohl ich den umgebenden Container (also der, der alle Slidecontainer beinhaltet genau Dimensioniert habe und ihm ein overflow: hidden verpasst habe. Kannst du dir vorstellen woher das rührt?

CPoly · 23. Februar 2012

Welche jQuery Version verwendest du? Version 1.5 und teilweise 1.6 verwendeten für Animationen (fadeIn) die requestAnimationFrame-Api. Der Browser bedient aber nur das Fenster/den Tab, der gerade im Fokus ist und hält alle anderen zurück. Deshalb kam es zu Darstellungsproblemen bei Animationen und es wurde wieder durch setTimeout/setIntervall ersetzt. Es werden also alle fadeIn Aufrufe erst ausgeführt, wenn du wieder zu dem Fenster wechselst.

Das ist aber nicht nur die Schuld von jQuery. Korrekterweise müsstest du deinen Code anders strukturieren.

Versuch es mal mit Version 1.6.3 oder größer.

Carrear · 23. Februar 2012

Ja ich bin halt nunmal nicht so ein Genie

Ich bin froh, dass ich diesen Code nachvollziehen kann. Aber ich denke das mit der Version ist ein guter Hinweis. Ich hatte Version 1.6.2 implementiert und jetzt auf 1.7.1 umgestellt. Ich werde es mal beobachten und schauen ob das noch öfter vorkommt - Ich berichte

Carrear · 23. Februar 2012

Also nach mehrstündiger Beobachtung sieht es so aus, als ob das Versionupdate das jquery fadeOut Problem gelöst hat

Danke

swapContainer - Funktion

Carrear

Erfahrenes Mitglied

Parantatatam

mag Cookies & Kekse

Carrear

Erfahrenes Mitglied

Carrear

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

Carrear

Erfahrenes Mitglied

Carrear

Erfahrenes Mitglied

Neue Beiträge