Anker mit JS und HTML nutzen

Computer: Software & Programmierung HTML & CSS
#1

Hallo liebe Forengemeinde,

ich bin gerade dabei eine Homepage aufzubauen.
Diese realisieren ich komplett mit AJAX.
Um dem Besucher die Möglichkeit zu geben, auf meiner Seite an bestimmte Stellen zu gelangen und diesen Zustand zu „speichern“, wird jeweils ein Anker erstellt, der beim erneuten Aufruf geparst wird und die Seite dann entsprechend erstellt.
So weit so gut. Nun bin ich aber auf ein Problem gestoßen:
Wenn ich dem Nutzer ermöglichen möchte, auf einer Seite an eine bestimmte Stelle zu springen, dann würde man dazu in „normalem“ HTML eben diesen Anker benutzen, den ich aber anderweitig benötige.

Was habt ihr mir für Vorschläge, wie ich dieses Dilemma lösen kann?

Vielen lieben Dank im Voraus,
TBP

#2

Hallo TheBlackPanther,

vielleicht bin ich jetzt etwas zu kurzsichtig - aber ich
erkenne das Problem nicht.

Das Lesezeichen-Ankerchen bekommt die ID aktuell_NutzerID
und die „normalen“ Anker innerhalb der Seite haben doch
ihre eigenen IDs etc. oder seh’ ich das jetzt zu einfach?

Gruß ghostdog21

#3

Moment!
„Lesezeiche-Ankerchen“ und „normaler Anker“???
Das ist immer ein und der selbe Anker.

Bsp:
Die Adresse der Seite lautet http://localhost (Apache :wink: ).
Dann lautet die „Adresse“ für Home http://localhost#a=0, die für den 2. Menüpunkt http://localhost#a=1, usw.
Die „Adresse“ für die Seite Kontakt lautet demzufolge (bei mir) http://localhost#a=6.
Dann geht ein Untermenü auf, in dem der Benutzer die Wahl zwischen Gästebuch (b=0), Kontakt (b=1) und Impressum (b=2) hat.
Die „Adresse“ zum Impressum lautet also http://localhost#a=6&b=2. Dies ist das Ziel, welches der Link im Footer zum Impressum trägt.

Nun zum Problem:
Wenn ich nun im Gästebuch einen Verweis auf den Datenschutzparagraphen auf der Impressum-Seite setzen will und möchte, dass der Browser direkt zum entsprechenden Paragraphen scrollt, so muss ich die Überschrift dieses Paragraphen in einen Link ohne Ziel mit Name (grummelgrummel) verwandeln. Auf die Weise könnte ich jetzt - wenn mein Anker nicht anderweitig belegt wäre - dem Browser durch http://localhost/verzeichnis/impressum.php#blabla mitteilen, dass er direkt dorthin scrollen soll.
Da der Anker aber (aus guten Gründen) bei mir eine andere Aufgabe übernimmt, kann ich das so nicht machen!

Und meine Frage war nun: Was dann?

TBP

#4

du kannst über javascript das offsetTop der einzelnen html elemente abfragen. und dann mit window.scrollTo()
den browser zum scrollen auffordern.

gruss chris

#5

Klasse, danke!

Da gibt es noch scrollIntoView().
Welches würdest du bevorzugen?
Anscheinend wird scrollIntoView() von manchen Browsern nicht unterstützt???

TBP

#6

Hi TBP.

AH! Jetzt ist mir klar, wieso der Hase im Senfglas
liegt! :wink:

Nun Ziele innerhalb der Datei einfach via ? an die URL
anhängen und von einem Javascript mit Get auswerten
lassen.

Also URL?menue=wert1&aktuellestelle=wert2&lesezeichen=w3
usw.

Findet man aber hier ausführlicher beschrieben:
http://aktuell.de.selfhtml.org/artikel/javascript/we…
welche Methoden es so alles gibt.
Nicht alle, aber einige…

Sollte da nix passen, dann müsste ich mich doch nochmal
genauer damit auseinander setzen. Also nur keine Scheu
und fragen … ^^

Gruß ghostdog21

#7

Hallo,

tut mir Leid, aber ich kann da ger nicht helfen, da ich selbst noch Anfänger bin.

Gruß
Erhard

#8

scrollIntoView(), ist warscheinlich die einfacerer methode da man hier nur sagen kann das das element entsprechend positioniert wird. mit scrollTo() kannst du halt genauer steuern wohin im bildschirm das element soll. z.b ob du das element mittig haben möchtes. oder 20 px vom oberen rand… etc. (muss man natürlich alles ausrechen) ist also eine frage wie viel aufwand man sich machen will.

funktionieren sollte beides.

gruss chris

#9

Hallo TheBlackPanther,

ich verstehe die Problematik nicht ganz. Einen Anker im HTML-Quelltext kannst du doch ohne weiteres für beide Zwecke verwenden.

Gruß, Björn

#10

dazu kann ich dir leider nichts raten. Hört sich sehr merkwürdig an wie du die Anker verwendest. Evtl. würde ich das Konzept nochmal überdenken.

Mit frohem Mute,
eisberg

#11

Äääääääääääähmmmm …
AJAX sagt dir was???
Facebook auch schonmal gehört!??? Schau dir da mal die URL an, wie die ge-/missbraucht wird! :wink:

Mit froherem Mute,
TBP

#12

Ööööööööhm … du hast schon verstanden, was ich machen will???

TBP

#13

Ich hoffe, dir ist bekannt, dass der Browser beim search-Anhang die Resource (in dem Fall die ganze Datei) neu anfordert, da sich ja die Adresse geändert hat.
Der hash-Anhang hingegen gehört streng genommen eigentlich nicht zur Adresse und eine Änderung wird vom Browser somit auch nicht mit Neuladen quittiert.
Ergo: Der Hash wird lediglich „lokal“ vom JS ausgewertet und dieses fordert demzufolge auch nur Teile vom Server an.

Alle Klarheiten beseitigt?? :smiley:

TBP

#14

Das ist mir soweit schon klar, aber AJAX bedeutet ja
nicht: Verhindere um jeden Preis und aufopferungsvoller
Hingabe über den Entwicklerhirntod hinaus das Neuladen,
sondern lediglich: Hey es geht schneller und schonender,
wenn man nicht wegen jedem Kleinscheiß neu lädt.

Von daher darf man manchmal ruhig auf etwas altherge-
brachten Kompfort zurückgreifen…
Es sei denn ein Neuladen ist in diesem Fall absolut un-
vertretbar. Was dann aber eher dafür sprechen muss das
Menü per show/hidden via Javascript-Variablen aktuell
„berechnen“ zu lassen, als dafür den/die Anker zu miss-
brauchen.

Oder sehe ich das falsch?

g21

#15

Hallo,
ich sehe den Unterschied nicht zwischen

  1. an bestimmte Stellen zu gelangen
  2. an eine bestimmte Stelle zu springen
    Wenn 1. funktioniert, wieso 2. nicht?
    Aber egal, du kannst jedenfalls den Mechanismus der benannten Anker mit javascript nachbauen. Die HTML-Elemente, die angesprungen werden sollen, benötigen sinnvollerweise ids. Diese benötigst du, um dort, wo der Sprung ausgelöst wird, eine kleine eigene Funktion aufzurufen, die anhand der übergebenen id die Koordinaten des Elements ermittelt und dann mit window.scrollTo(…) arbeitet.
    Wenn der Sprungauslöser z.B. ein Link ist, statt
    href=„zielanker“
    etwa folgendes:
    onclick=„scrollToTarget(‚id_des_zielelements‘)“
    … wobei scrollToTarget() die o.g. selbst zu schreibende Funktion ist.
    Vorteile dieses Verfahrens: der Sprungauslöser kann alles mögliche sein, nicht nur , onclick geht praktisch überall. Und die Sprungziele müssen keine benannten Anchor sein, die zusätzlich im markup stehen, sondern sind genau die eigentlichen Inhalts-Container (div, p etc).
    Nachteil: Koordinaten ermitteln ist etwas haarig. Du musst offsetTop/Left des Elements ermitteln, dazu alle offsetParent durchiterieren und deren offsetTop/Left dazuaddieren, dann die gegenwärtige scroll-Position des Fensters wieder abziehen. Das Ganze noch browser-übergreifend… etwas einfacher geht’s mit jQuery.
    Gruß
    Thomas