JavaScript [jQuery] Waypoints auf container triggern nicht

[raven16]

Hallo,

ich möchte Waypoints verwenden, um bestimmte Effekte an verschiedenen Stellen auf der Website zu triggern. Leider funktioniert der Waypoint, den ich nun als Beispiel erstellt habe, nicht wirklich richtig. Wenn ich ungefähr an der Stelle raus und rein zoome, wo der Waypoint in der Nähe ist, dann bekomme ich eine Rückmeldung. In der Konsole sind leider auch keine Syntax Fehler etc.

Die Javascript Datei für die Waypoint Funktionalität selbst binde ich nach jQuery ein

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.waypoints.min.js"></script>

Unter dem Import der .js Datei habe ich ein kleines Test Script geschrieben, welches ich später in eine eigene .js Datei auslagern werde.

<script>
	$('#leistungen').waypoint({
	  handler: function(direction) {
	   alert('leistungen');
	  }
	});
</script>

Die ID, wo ich den Waypoint drauf setze, ist ein simples DIV

<div id="leistungen"></div>

Jemand eine Idee, was ich noch nicht richtig mache? Ich habe das damals schon auf einer anderen Internetseite erfolgreich verwendet, daher nervt mich das gerade richtig ab, dass es icht funktioniert

Gruß

 

[SymA]

Wrap mal dein Skript um ein Dokument Ready. Ich tippe mal dass das Laden länger dauert. Außerdem gibt es eine Konsole unter allen gängigen Browsern, die dir im Fehlerfall entsprechende Meldungen um die Ohren haut

 

[raven16]

Wrap mal dein Skript um ein Dokument Ready. Ich tippe mal dass das Laden länger dauert. Außerdem gibt es eine Konsole unter allen gängigen Browsern, die dir im Fehlerfall entsprechende Meldungen um die Ohren haut

Habe ich jetzt gemacht

<script>
$( document ).ready(function() {
	$('#leistungen').waypoint({
	  handler: function(direction) {
	   alert('leistungen');
	  }
	});
});
</script>

Brachte aber auch keinen Erfolg :-/ Hatte schon geschrieben, das die Konsole keine Fehler anzeigt.
Im Prinzip habe ich es so gemacht wie der Typ bei Youtube

Ansonsten werde ich jetzt noch einmal einen kleinen lokalen Webserver aufsetzen und da noch einmal rumtesten.

 

[SymA]

Ich glaube du mischt da die Verwendung. Im Video hat er keine Handler Funktion angegeben. Gehst du nach der Doku, musst du Element und Handler angeben.

 

[raven16]

Ich habe den Fehler jetzt noch selbst gefunden. Mit dem Javascripts habe ich nie etwas wirklich falsch gemacht (hatte ja auch keine Fehlermeldungen in der Konsole).

Der Fehler war richtig mies, denn die Waypoints wurden aufgrund einer CSS-Einstellung nicht beim scollen, sondern nur beim raus- oder reinzoomen ausgelöst.

Ich hatte folgendes gesetzt, was zu dieses Verhalten geführt hat

body {
  overflow-x: hidden;
}

Nachdem ich diese Einstellung wieder entfernt hatte, lief alles sofort.