JQuery Sticky

Carrear

Carrear

Erfahrenes Mitglied
Hi Leute,

ich habe mehrere Container Kombinationen, welche jeweils mit einem rel Attribut verbunden sind. Durch Hover von jeweils einem Element sollen alle dazugehörigen Elemente eingeblendet werden. Das funktioniert auch. Ich will allerdings, dass bei Klick auf ein Element, dieses und alle dazugehörigen durch eine Zusatzklasse 'sticky' fixiert werden. Das klappt alles auch soweit.

Mein Problem: Bei schnellem switchen zwischen den Listenpunkten, werden manchmal zwei der dazugehörigen Container angezeigt, obwohl das eigentlich nicht so einfach passieren dürfte.

Ich poste erstmal nur das JavaScript, vielleicht ergibt sich da ja ein grober Schnitzer oder ein Problem, welches durch meine Unerfahrenheit entsteht - und welches sich dementsprechend einfach lösen lässt.

Wenn mehr Code (HTML Markup, CSS) oder Screens nötig sind sagt es einfach :)

Code: 
<script type="text/javascript">
$(document).ready(function(){
	$("[rel]").mouseenter(function(){
			$('.active').each(function(){
				$(this).removeClass('active');
			});
			
			$('.map .info').each(function(){
				$(this).css('display','none');
			});
		
			var relValue = $(this).attr('rel');
			$('[rel=' + relValue + ']').each(function() {
				$(this).addClass('active');
			});
			$('[rel=' + relValue + '] .info').each(function() {
				$(this).fadeIn(300);
			});
	});	
	
	$("[rel]").mouseleave(function(){
			$('.active').not('.sticky').each(function(){
				$(this).removeClass('active');
			});
			
			$('.map .info').each(function(){
				var paRent = $(this).parent().not('.sticky');
				$(paRent).children('.info').css('display','none');
			});
		
			var relValue = $(this).attr('rel');
			
			$('[rel=' + relValue + ']').each(function() {
				$(this).not('.sticky').removeClass('active');
			});
			
			$('[rel=' + relValue + '] .info').each(function() {
				var paRent = $(this).parent().not('.sticky');
				$(paRent).children('.info').css('display','none');
			});
			
			var relValue = $('.sticky').attr('rel');
			$('[rel=' + relValue + ']').each(function() {
				$(this).addClass('active');
			});
			$('[rel=' + relValue + '] .info').each(function() {
				$(this).fadeIn(300);
			});
	});

	$('[rel]').click(function(){
		if($('.sticky').length > 0){
			$('.sticky').each(function(){
				$(this).removeClass('sticky');
			});
		};
		$('.active').each(function(){
			$(this).removeClass('active');
		});
		
		$('.map .info').each(function(){
			$(this).css('display','none');
		});			
	
		var relValue = $(this).attr('rel');
		
		$('[rel=' + relValue + ']').each(function() {
			$(this).addClass('active');
			$(this).addClass('sticky');
		});
		$('[rel=' + relValue + '] .info').each(function() {
			$(this).fadeIn(300);
		});
	});	
});
</script>

Zur Sicherheit doch das Markup:

HTML: 
<section>
	<h1>Höfe</h1>
	<div class="hofmap" style="float: left">
		<div class="map">
			<div class="pointer sticky active" style="left:130px; top:130px;" rel="hof1">
				<div class="info bottom right">
					<img src="site/img/example-hof.jpg" alt="" title="" />
					<div class="gard">
						<p class="ort">Klein-Scharrel</p>
						<p class="name">Hinner und Greta Harms</p>
					</div>
				</div>
			</div>
			<div class="pointer" style="left:267px; top:174px;" rel="hof2">
				<div class="info bottom right">
					<img src="site/img/example-hof.jpg" alt="" title="" />
					<p class="ort">Friedrichsfehn</p>
					<p class="name">Gerd und Anke Bauer</p>
				</div>				
			</div>
		</div>
	</div>		
</section>
<aside>
	<article class="top">
		<ul class="ortsschilder">
			<li rel="hof1" class="sticky active">
				<p class="ort">Klein-Scharrel</p>
				<p class="name">Hinner und Greta Harms</p>
			</li>
			<li rel="hof2">
				<p class="ort">Friedrichsfehn</p>
				<p class="name">Gerd und Anke Bauer</p>
			</li>
		</ul>
	</article>
	<article class="bottom">
		<ul class="liste">
			<li rel="hof1" class="sticky active">
				<p class="ort">Klein-Scharrel</p>
				<p class="name">Hinner und Greta Harms</p>
			</li>
			<li rel="hof2">
				<p class="ort">Friedrichsfehn</p>
				<p class="name">Gerd und Anke Bauer</p>
			</li>
		</ul>
	</article>
</aside>
 
Zuletzt bearbeitet:
Ich habe dein Skript mal strikt gekürzt und ausgebessert, so dass ich jetzt denke, dass es gehen sollte:
Javascript: 
$(function () {
  $('[rel]').on({
    'mouseenter' : function () {
      $('.active').removeClass('active');
      $('.map .info').hide();
      
      var rel = $(this).attr('rel');
      
      $('[rel=' + rel + ']').addClass('active');
      $('[rel=' + rel + '] .info').fadeIn(300);
    },
    
    'click' : function () {
      $('.active').removeClass('active');
      $('.map .info').hide();
      
      var rel = $(this).attr('rel');
      
      $('[rel=' + rel + ']').addClass('active sticky');
      $('[rel=' + rel + '] .info').fadeIn(300);
    }
  });
  
  $('[rel]:not(.sticky)').on('mouseleave', function () {
    $('.active').removeClass('active');
    $('.map .info').hide();
    
    var rel = $(this).attr('rel');
    
    $('[rel=' + rel + ']').removeClass('active');
    $('[rel=' + rel + '] .info').hide();
  });
});
 
Zuletzt bearbeitet:
Hey 'einfach nur crack' ^^

also die funktioniert leider noch eingeschränkter als vorher. Inititalzustand ist ja, dass eine Gruppe schon als active und sticky markiert ist. Leider leider wird diese Sticky markierung nicht mehr aufgehoben, wenn ich ein anderes Element (bzw. damit ja eine andere Gruppe) anklicke, um diese als sticky zu markieren.

Außerdem verschwindet das entsprechende Element aus der Liste Ortsschilder, wenn ich nicht irgendein Element Hovere, normalerweise soll ja immer eins da bleiben, nämlich jenes, welches sticky ist.

Meinst du ich kann dir grad mal eben die Zip Datei zuschicken? Diese beinhaltet nicht mehr als die HTML Datei mit dem JS und einer CSS Datei. Vielleicht kannst du ja mal drüber sehen?
 
Zuletzt bearbeitet:
Hallo Carrear, mir ist gerade aufgefallen, dass ich da was angestellt habe, was natürlich nicht funktionieren kann: die Methode .on verteilt EventListener an alle Elemente, die zur Zeit der Zuweisung existieren. Da sich aber die Eigenschaften deiner Elemente verändern, muss man natürlich auch ein Augenmerk darauf haben. Deshalb sollte folgende Version nun (hoffentlich) funktionieren:
Javascript: 
$(function () {
  $('[rel]').on({
    'mouseenter' : function () {
      $('.active').removeClass('active');
      $('.map .info').hide();
      
      var rel = $(this).attr('rel');
      
      $('[rel=' + rel + ']').addClass('active');
      $('[rel=' + rel + '] .info').fadeIn(300);
    },
    
    'click' : function () {
      $('.active').removeClass('active');
      $('.map .info').hide();
      
      var rel = $(this).attr('rel');
      
      $('[rel=' + rel + ']').addClass('active sticky');
      $('[rel=' + rel + '] .info').fadeIn(300);
    }
  });
  
  $('body').delegate('[rel]:not(.sticky)', 'mouseleave', function () {
    $('.active').removeClass('active');
    $('.map .info').hide();
    
    var rel = $(this).attr('rel');
    
    $('[rel=' + rel + ']').removeClass('active');
    $('[rel=' + rel + '] .info').hide();
  });
});

PS: Sollte es immer noch nicht funktionieren, kannst du mir natürlich deine ZIP-Datei schicken.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück