• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Cannot read property 'top' of undefined

M

Mantrayana

New member
Hallo liebe jswelt.de Mitglieder,

ich bin noch ganz am Anfang was JS angeht, allerdings muss ich nun schon ein Script reparieren, weiß aber nicht genau wo der Fehler liegt.

Code: 
jQuery(document).ready(function($) {						
									$(".show-full-icon").hide();
									$(".show-block").click(function(){
										$(".show-full-icon").toggle();
									  });
									$('a[href^="#"]').on('click',function (e) {
										e.preventDefault();

										var target = this.hash;
										var $target = $(target);

										$('html, body').stop().animate({
											'scrollTop': $target.offset().top
										}, 900, 'swing', function () {
											window.location.hash = target;
										});
									});
								});

Laut Google Chrome gibt es in Zeile 13 folgenden Fehler:

tooltip.js:13 Uncaught TypeError: Cannot read property 'top' of undefined
Zum Vergrößern anklicken....

Das heißt die Variable ist leer? Hoffe jemand kann helfen.

Mit freundlichen Grüßen
 
Schau' dir in der Console doch mal das alles an:
Code: 
console.log(target);
console.log($target);
console.log($target.offset());

Ich denke, dass dein Link einfach nicht auf eine Node mit Id zeigt, sondern z.B. auf einen Link mit einem Namen. Dann funktioniert dein Ansatz nicht:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
.space{
height: 3000px;width: 100%;
}</style>
</head>
<body>
<a name="start" href="#ende">start</a>
<div class="space"></div>
<a name="ende" href="#start">ende</a>
</body>
</html>
Für eine nähere Untersuchung müssten wir aber auch einen minimalen HTML-Code, mit dem sich das Problem reproduzieren lässt, sehen.
 
Der HTML Code sieht folgendermaßen aus:

HTML: 
<a class="contact-popup toggle-bar-btn fade-toggle hidden-phone" href="#" onclick="toggle_visibility('toggle-bar-wrap');"><span class="ts-infobar infobar-up"></span></a>
		<div class=" toggle-bar-fade hidden-xs" id="toggle-bar-wrap">
			<div class=" container" id="toggle-bar">
				<div class="container">
<div class="custom"  >
	<div class="col-sm-12">
<!-- TOOLTIP POPUP CODE -->
</div>

Es soll halt, wie du vielleicht schon bemerkt hast, ein kleines Popup durch eine Schaltfläche geöffnet werden. Das funktioniert auch soweit, allerdings schaltet der Button nicht in den richtigen Status, d.h. der Button verändert seine Darstellung nachdem man ihn betätigt hat.
 
Naja... "#" ist hald einfach kein Valider CSS-Selektor... und sinnfrei ist es auch noch... lass' das href doch einfach komplett weg.
 
Was steht in this.hash? Ich gehe davon aus, dass der String von "target" nicht geeignet ist, um als Selektor zu dienen. Denn: this.hash schnappt sich das href-Tag und die darin befindliche URL mit Hash (!). Das sieht dann so aus:

Code: 
<a href="blabla.php#hashMe">gnarf</a>

In this.hash steht demnach "#hashMe".

Schaue ich mir den Anchor des TO oben an, steht dort nur "#" drin - demnach hat this.hash doch nur "#" enthalten und ist damit kein gültiger Selektor. Bei Dir müsste der zur Laufzeit so aussehen: $('#').offeset() - und das kann nicht klappen.
 
kkapsner schrieb:
Naja... "#" ist hald einfach kein Valider CSS-Selektor... und sinnfrei ist es auch noch... lass' das href doch einfach komplett weg.
Zum Vergrößern anklicken....

Das ist natürlich richtig, aber da es sich um ein Popup innerhalb der Seite handelt, wird ja auch kein neues Fenster und somit auch keine neue URL besucht. Und wenn ich den Tag weglasse weiß das Script ja nicht mehr worauf es zugreifen soll.

@SteelWheel

Verstehe deine Antwort leider nur zur Hälfte. Welche Informationen fehlen dir noch?
 
Folgende Zeile musste verändert werden:

Code: 
var $target = $(target);

Dort einfach die HTML-Klasse einfügen und schon funktionierts. Allerdings hat die Klasse Leerzeichen im Namen, was dem Interpreter nicht so gefällt. Gibt es eine Möglichkeit Werte mit Leerzeichen zuzuweisen oder muss ich dies im HTML/PHP Code anpassen?
 
Wenn du diese Zeile anpasst, veränderst du aber komplett den Sinn dieses Scripts...
Mantrayana schrieb:
Allerdings hat die Klasse Leerzeichen im Namen, was dem Interpreter nicht so gefällt.
Zum Vergrößern anklicken....
Leerzeichen sind da völlig OK und auch gut. In .className steht hald einfach kein valider CSS-Selektor drin.

Wenn du dein sinnfreies HTML nicht anpassen willst, würde ich an deiner Stelle einfach in das problematische Script einen Check einbauen, ob der Selektor auch irgendwas gefunden hat:
Code: 
if ($target.length){...}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben