Active Link Markierung wieder entfernen

[h0nk]

Da ich neu bin hier im Forum grüße ich die Community mal ganz herzlich.

Ich habe schon oft hier nützliches nachlesen können und musset daher nie direkte Hilfe in Anspruch nehmen. Doch nun ist es soweit, dass ich nicht mehr weiter weiß.

Ich habe leider ziemlich wenig Erfahrung was das Coden von JS angeht, also bitte etwas Nachsicht wenn ich etwas nicht gleich verstehe.

Ich habe eine einseitige Website gebaut (Kundenwunsch) die zu den Themen über Anker springt. Smoothes Scrollen war sehr erwünscht und auch eine Markierung bei welchem Themengebiet man sich befindet. So weit so gut. Die kleinen Scripte waren ganz easy im Netz zu finden und mit meiner Mikroerfahrung und etwas Geduld konnte ich die nun auch so anpassen, dass diese Funktionen mal laufen, aber...

...es gibt eine "Startseite"(ein ganzseitiges Bild) das über das Logo der fixierten Navigation wieder angesteuert werden kann. Mein Problem ist, dass hier aber die Linkmarkierung am obersten Anker (Themenbereich) bleibt, auch wenn der gar nicht mehr im Bild ist. Für einen erfahrenen Scripter ist das wahrcheinlich kein Problem, aber ich steh hier total am Schlauch.

Hier mal das verwendete Script:

<script type="text/javascript">
		$(document).ready(function() {
			$('a.inview,div.inview').bind('inview', function (event, visible) {
				var ueberwachteElemente = $('a.inview,div.inview');
				ueberwachteElemente.each(function() {
					vis = $(this).data('inview') || false;
					if(vis) {
						activeId = $(this).attr("name");
						activeMenuItem = $('a[href$="'+activeId+'"]');
					}
				});
				activeMenuItem.parents('li').siblings('li:has(.active)').find('a').removeClass('active').end().end().end().addClass('active');
			});
		});
	</script>

Ich denke, dass man hier in der function etwas mit else einfügen müsste, aber da häng ich irgendwie.

Vielleicht kann jemand so nett sein und mir hier zumindest nen Lösungsansatz oder enkanstoß geben.

Danke für eure Mühe!!

 

[miniA4kuser]

Was meinst du mir Linkmarkierung? Hast du nicht mal einen Testlink, wo man sich das mal anschauen kann?

 

[h0nk]

Sry, ich dödl vergesse natürlich das wichtigste, den Link

CSIT - Computersupport und Informationstechnik

es geht dabei um die rahmen die ich per css über den navilinks definiere und über das script einblende.

 

[miniA4kuser]

Woohooo... Der HTML-Code ist ja mal verschachtelt hoch zehn... Aber das ist nicht das schlimmste. Das HTML is nicht valide! Wie nädig vom Browser, dass das dennoch soweit funktioniert. Eine unsortierte Liste darf nicht innerhalb eines Paragraphen (Absatzes) vorkommen, siehe auch selfhtml...ul-Element. Dann benutzt du verschiedene ID's (ID steht für dokumentweite eindeutiger Identifier) mehrfach, was tötlich enden kann.

$(document).ready(function() {...});-Blöcke bitte zusammenfassen. Das ist übersichtlicher und wartbarer.

Dein JavaScript-Code überwacht ja nur die 'inview'-Elemente und reagiert über einen eigens definierten Event, welches das Plugin 'erzeugt' und da ist deine Grafik nicht dabei. Im wesentlichen aber auch uninteressant, da das Script die Position der Seite als Bezug nimmt. Lange Rede kurzer Sinn: Wenn keines der registrierten Elemente im Viewbereich sind wird das erste bzw. letzte Navigationselement markiert. Für deinen Fall kann evtl. diese Erweiterung helfen (ungetestet):

if (vis) {
	activeId = $(this).attr("name");
	activeMenuItem = $('a[href$="'+activeId+'"]');
} else {
	$('li.m').removeClass('active');
}

ABER was noch wichtiger ist: Räum deinen HTML-Code auf!

 

[j-l-n]

Wie der Name schon sagt, ist eine ID eine eindeutige Bezeichnung. Das heißt, alle Elemente müssen eine unterschiedliche ID haben, es darf keine mit der selben geben.
Damit wären schon mal einige Fehler schnell behoben. Ansonsten arbeitest du dich am besten durch diese Liste ([Invalid] Markup Validation of http://www.csit.at/neu/- W3C Markup Validator) und eliminierst Schritt für Schritt jeden Fehler im HTML. Die Beschreibungen sind eigentlich klar, solltest du aber eine Meldung nicht verstehen, kannst du gerne hier fragen.

PS: noch ein kleiner "Schönheitsfehler" an der Webseite an sich: "Was Sie von uns haben können" hört sich irgendwie komisch an. Ich täte da stattdessen einfach so etwas wie "Was wir bieten" schreiben. Ist jetzt zumindest meine Meinung.

 

[miniA4kuser]

Ich mag diesen W3C Markup Validator nicht so sonderlich, da dieser manchmal Fehlermeldungen präsentiert, die gerade für Anfänger missverständlich sein können. So zum Beispiel (angelehnt an den Link in Post #5) diese Fehlermeldung hier:

Error Line 106, Column 8: No p element in scope but a p end tag seen.

</p>

Und dann der passende Codeausschnitt:

099  <p>Was Sie von uns haben können:
100    <ul>
101      <li>Quicksupport bei technischen Problemen</li>
102      <li>Maßgeschneiderte Komplettangebote</li>
103      <li>Übersiedelungen Ihrer EDV-Anlage</li>
104      <li>Individuelle Soft- und Hardwarelösungen</li>
105    </ul>
106  </p>

Wie zu sehen, ist sehr wohl ein öffnendes p-Element in Zeile 099 notiert. Wieso sagt der Validator nicht einfach, dass das ul-Element und dessen Folgeelemente nicht innerhalb eines p-Elements erlaubt ist? So wie ich es schon in meinem ersten Post erwähnt habe! Das wäre vor allem für Anfänger verständlicher finde ich.

 

[h0nk]

Danke erst mal für die schnelle Hilfe und den Wink mit dem Zaunpfahl. Muss ehrlich gestehen, dass ich gerade bei den beiden ID#s die doppelt waren gar nicht darüber nachgedacht habe, dass ich das auch anders lösen könnte. Grauslich, dass man mir das sagen muss, hab das natürlich sofort in Klassen geändert. Das mit der ul muss ich zu meiner Schande gestehen, wusste ich nicht mal; auch geändert.

Ich habe mir auch die Fehler, die der Validator ausgeworfen hat vorgenommen und die Error Meldungen ausgemerzt.

Das Problem ist, dass die Änderung der aktiven Bereiche -durch das entfernen des name Attributs aus dem div - natürlich jetzt nur gemacht werden, wenn das a element mit dem name Attribut auftaucht, aber nicht mehr wenn ich von unten in den Bereich scrolle. Auch der Lösungsansatz zum entfernen der Klasse hat leider nicht funktioniert.

Kann ich im script selbst hier:

if(vis) {
						activeId = $(this).attr("name");
						activeMenuItem = $('a[href$="'+activeId+'"]');
					}

mehrere attribute durch ein komma getrennt eintragen??

 

[miniA4kuser]

Okay, aber auch das name-Attribut ist dort fehl am Platz, siehe hier

Ich verstehe aber nicht wirklich, warum du für solch eine einfache, im Sinne vom Layout, Seite eine so komplizierte HTML-Struktur verwendest!?

 

[h0nk]

hmm, dazu eine erklärung zu finden würde wohl jedem schwer fallen, beim coden wars iwie logisch das so zu machen. Aber gut, ich denke bevor ich mich da mit dem script auseinandersetzen kann wirds wohl vernünftiger sein, die struktur der seite nochmal zu überarbeiten.

Also werde ich das thema wohl später wieder aufgreifen, trotzdem danke für die mühe, und auch für einige denkanstöße.

 

[kkapsner]

Wie zu sehen, ist sehr wohl ein öffnendes p-Element in Zeile 099 notiert. Wieso sagt der Validator nicht einfach, dass das ul-Element und dessen Folgeelemente nicht innerhalb eines p-Elements erlaubt ist?

Das HTML ist exakt bis zum </p> valide, da ein <p> automatisch geschlossen wird, wenn ein Element, das nicht darin enthalten sein darf, kommt. HTML ist an manchen Ecken wirklich fies spezifiziert.

@h0nk: du musst auf dem <a name="start"> auch ein "inview"-Event registrieren, das dir dann die ganzen Markierungen wieder entfernt.

PS:

activeMenuItem.parents('li').siblings('li:has(.active)').find('a').removeClass('active').end().end().end().addClass('active');

Das geht mit gescheitem HTML auch einfacher...
PPS: Ich bin mir sicher, dass du im "inview"-Event auch nicht immer durch alle Elemente durchiterieren musst...

 

[miniA4kuser]

Das HTML ist exakt bis zum </p> valide, da ein <p> automatisch geschlossen wird, wenn ein Element, das nicht darin enthalten sein darf, kommt. HTML ist an manchen Ecken wirklich fies spezifiziert.

Das habe ich ja auch nicht bestritten. Mir ging es mehr um die Art der Fehlerpräsentierung, das dies wie gesagt für Anfänger verwirrend sein kann. Dieser würde erst anfangen alle <p>...</p>-Paare zu prüfen und dann sagen: Aber da passt doch alles. Erst das eigene Wissen, dass der Fehler ausgegeben wird, weil innerhalb nicht erlaubte HTML-Elemente notiert sind gibt den Weg zur Lösung frei.

 

[Dormilich]

Das habe ich ja auch nicht bestritten. Mir ging es mehr um die Art der Fehlerpräsentierung, das dies wie gesagt für Anfänger verwirrend sein kann. Dieser würde erst anfangen alle <p>...</p>-Paare zu prüfen und dann sagen: Aber da passt doch alles. Erst das eigene Wissen, dass der Fehler ausgegeben wird, weil innerhalb nicht erlaubte HTML-Elemente notiert sind gibt den Weg zur Lösung frei.

Naja, aber woher soll denn der HTML-Parser wissen, daß das </p> zu dem <p> vor dem <ul> gehören sollte? Das schließende </p> Tag ist ja nunmal optional und die Kombination <p>(optionaler Text)<ul>… kann ja durchaus gewollt sein.

 

[kkapsner]

Das ist einer der Gründe, warum ich <p> gar nicht mehr verwende.

Wenn ich einen Absatz machen will, verwende ich meistens sowas wie <div class="paragraph">...

Aber der Parser könnte theoretisch. schon erkennen, ob da vorher ein <p> auf der richtigen Ebene automatisch geschlossen wurde und dann die Fehlermeldung dementsprechend umformulieren.

 

[Dormilich]

Aber der Parser könnte theoretisch. schon erkennen, ob da vorher ein <p> auf der richtigen Ebene automatisch geschlossen wurde und dann die Fehlermeldung dementsprechend umformulieren.

Nur daß das automatische Schließen kein Fehler ist. Dazu müßte das schließende </p> Tag notwendig (required) sein, es ist aber optional (genauso wie z.B. <body>).

 

[miniA4kuser]

Naja, aber woher soll denn der HTML-Parser wissen, daß das </p> zu dem <p> vor dem <ul> gehören sollte?

Keine Ahnung ob du gerade auf dem falschen Pfad bist, aber ich rede jetzt nicht von dem normalen HTML-Parser im Browser sondern von einem HTML-Validator, welcher ja den HTML-Code für die spätere Benutzung mit einem HTML-Parser mittels Browser, prüfen soll. Ein Debugger arbeitet z.B. auch anders wie ein Compiler. (Ich möchte aber dieses Thema nicht auf solche Programme ausweiten, sondern bei HTML-Parser und HTML-Validator bleiben).

Das schließende </p> Tag ist ja nunmal optional und die Kombination <p>(optionaler Text)<ul>… kann ja durchaus gewollt sein.

Das habe ich zu keinem Zeitpunkt bestritten. Wie aber aus der Diskussion und dem ursprünglichen HTML-Code zu sehen ist, war die Kombination <p>(optionaler Text)<ul>… eben nicht gewollt, sondern es wurde durch Unwissenheit ein nicht erlaubtes HTML-Element innerhalb eines Paragrapen verwendet.

Aber der Parser könnte theoretisch. schon erkennen, ob da vorher ein <p> auf der richtigen Ebene automatisch geschlossen wurde und dann die Fehlermeldung dementsprechend umformulieren.

Genau das meine ich, auch wenn ich es vielleicht etwas undeutlich bzw. umständlich beschrieben habe. Aber die dementsprechende Fehlermeldung könnte trotzdem so abgeleitet werden:

Wieso sagt der Validator nicht einfach, dass das ul-Element und dessen Folgeelemente nicht innerhalb eines p-Elements erlaubt ist?

Nur daß das automatische Schließen kein Fehler ist. Dazu müßte das schließende </p> Tag notwendig (required) sein, es ist aber optional (genauso wie z.B. <body>).

Und trotzdem bleibt die Art der Fehlermeldung des W3C-HTML-Validators für Anfänger verwirren, denn eben diese Anfänger wissen nicht, dass das schließende </p>[/I]-Tag optionalist, oder (wie in diesem Fall) ein [INLINE]ul-Element an der gewählten Stelle erlaubt ist. Ein Anfänger sieht nur <p>..irgenwelcher..weiterer..Code..</p> und fragt sicht: Was will der Validator von mir? Ich mach das doch richtig auf und wieder zu!?

 

[Dormilich]

Ein Anfänger sieht nur <p>..irgenwelcher..weiterer..Code..</p> und fragt sicht: Was will der Validator von mir? Ich mach das doch richtig auf und wieder zu!?

tja … Mensch vs. Maschine. Spendier dem HTML-Validator eine kleine KI, dann kann der das irgendwann.

 

[h0nk]

@h0nk: du musst auf dem <a name="start"> auch ein "inview"-Event registrieren, das dir dann die ganzen Markierungen wieder entfernt.

danke für deine hilfe, werde mir das mal zu gemüte führen.

PS:
Das geht mit gescheitem HTML auch einfacher...

jopp, bin dabei das aufzuarbeiten, wie schon gesagt, während meiner coderei, wars iwie logisch das so zu bauen, nach einigen Denkanstößen nicht mehr

PPS: Ich bin mir sicher, dass du im "inview"-Event auch nicht immer durch alle Elemente durchiterieren musst...

Da fehlt mir halt die erfahrung mit js. Es ist so wie mit allem anderen --> wenn man es selber macht, dann kennt man sich auch aus damit. Dieses script hab ich im netz gefunden und würde es die funktionen abdecken die ich brauche, aber eben nur bis zu einem gewissen grad.


meine to-do list ist also ganz einfach,

1. HTML aufräumen und dann
2. mit der funktionalität rumspielen.

Danke nochmals für die Hilfe.

 

[miniA4kuser]

tja … Mensch vs. Maschine. Spendier dem HTML-Validator eine kleine KI, dann kann der das irgendwann.

Würde ich dem Entwicklerteam zugehören, dann hätte dieser das schon bzw. ich würde massiv darauf drängen, dass dieser das bekommt.

Aber mal im Ernst, wenn der HTML-Validator auf notwendige (required) Tags prüfen kann, dann sollte eine Prüfung auf optionale Tags auch nicht viel Arbeit sein.

 

[kkapsner]

danke für deine hilfe, werde mir das mal zu gemüte führen.

Bitte - gern geschehen. Wenn du noch Fragen hast, kannst du sie ja gerne stellen.

jopp, bin dabei das aufzuarbeiten, wie schon gesagt, während meiner coderei, wars iwie logisch das so zu bauen, nach einigen Denkanstößen nicht mehr

Ist mir auch schon öfters so gegangen, dass es ungemein geholfen hat, zweiten Kopf, der noch nicht so tief im Problem drin ist, zu haben. Man wird einfach manchmal "Betriebsblind

Da fehlt mir halt die erfahrung mit js.

Ist ja kein Problem. Die kommt mit der Zeit.

meine to-do list ist also ganz einfach,

1. HTML aufräumen und dann
2. mit der funktionalität rumspielen.

Klingt nach einem extrem guten Plan.

Würde ich dem Entwicklerteam zugehören, dann hätte dieser das schon bzw. ich würde massiv darauf drängen, dass dieser das bekommt.

Eine KI bräuchte man gar nicht. Der Validator müsste sich nur merken, welche schließenden Tags er automatisch auf der Ebene eingefügt hat und die dann mit dem gefundenen, nicht passenden, schließenden Tag vergleichen. Wenn da ein Treffer ist, kann er die Fehlermeldung entsprechend ändern.