Verweis mit Variabeln und Anker wird fehlinterpretiert

Ich habe jetzt eine ganze Weile nach einer schon vorhandenen Lösung für mein Problem gesucht, sie jedoch nicht gefunden (ich hoffe, das ich sie nicht überlesen habe.) Dem entsprechend schildere ich hier nun mein Problem:

Auf der Seite example.net/neu/?section=Kontakt befindet sich folgender Verweis:

<a href="?section=Impressum#Datenschutz">Datenschutz</a>

auf der Seite example.net/neu/?section=Impressum ist der Anker wie folgt definiert:

<h3><a name="Datenschutz"></a>Datenschutz</h3>

Wenn ich in der Adresszeile #Datenschutz an die URL des Impressums dranhänge, springt der Browser wie gewollt nach unten zum Anker.

Wenn ich auf der Kontakt-Seite (siehe oben) mit der Maus über den wie oben definierten Link fahre, wird mir die Ziel-URL in den Element-Eigenschaften als auch in der Info-Zeile am unteren Ende des Browserfensters (Firefox 3.5.5) korrekt mit example.net/neu/?section=Impressum#Datenschutz angezeigt.

Sobald ich jedoch darauf klicke passiert folgendes:

statt die korrekte URL aufzurufen, wird

example.net/neu/?section=Kontakt#?section=Impressum#Datenschutz aufgerufen.

Ergo wird nicht die Seite mit dem Impressum aufgerufen, sondern ein nicht vorhandener Anker mit dem Namen ?section=Impressum#Datenschutz angesteuert.

Bisher versuchte Ansätze:

# mit & # 35 ; kodieren -> macht keinen Unterschied (was zu erwarten war, aber ein Versuch war es dennoch wert )

Verweis absolut statt relativ definieren -> kein Unterschied (außer das dann der fehlinterpretierte Anker die komplette URL statt der kürzeren relativen Angabe als Name erhält)

Hinweis:

Sämtliche Seiten werden nach dem Template-System aus dem Quake.net-Tutorial (Quakenet/#php Tutorial - de - Templatesystem) über die index.php Datei aufgerufen.

Danke schonmal im Vorraus für die kommenden Antworten!

MfG

Kaytir

Hallo,

machst du in den Verweisen irgendwas mit JavaScript? Passiert das auch noch, wenn du JS temporär deaktivierst?

Gruß,

Amica

Hi Amica!

Ja, wenn ich das JavaScript deaktiviere gehts ...

folgendes verwende ich auf manchen Seiten:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">  google.load("jquery", "1.3.2");</script>

und folgende 2 Dateien, die ich einbinde:

Datei 1:

$(document).ready(function() {
    $('a[href*=#]').bind("click", function(event) {
        event.preventDefault();
        var ziel = $(this).attr("href");

        $('html,body').animate({
            scrollTop: $(ziel).offset().top
        }, 1000 , function (){location.hash = ziel;});
});
return false;
});

Datei 2:

$(function()
    {
        $('.eintrag').hide();
        $('.post>.titel').click(function()
        {
            $(this).next('.eintrag').slideToggle().parent().siblings('div').
            find('.eintrag:visible').slideUp();
        });
    });

Vermutlich liegt das Kind in der ersten Datei begraben?

EDIT: Wo ist mein Code denn 11 Zeichen zu lang? ....

Es liegt an

location.hash = ziel;

Die hash-Eigenschaft des location-Objekts legt nur den Verweisanker fest. Nimm stattdessen

location.href = ziel;

Edit: die ganze Datei1 erscheint mir sinnlos, da sie genau das zu machen versucht, was der Browser ohnehin macht. Kann das sein?

Super, ich danke dir für die schnelle Hilfe!

EDIT: Die Datei ist für einen Scroll-Effekt verantwortlich, denn durch den Code wird statt zum anker zu springen weich dorthin gescrollt

Dein Code ist nirgends zu lang. Wenn das Bild immer noch angezeigt wird, lade mal bitte die Seite mit Strg+F5 neu. Wenn es dann immer noch da ist, wäre ich dankbar für eine Rückmeldung mit Browserinfos (Name, Version, Betriebssystem).

Edit: Achso, dann musst du die Variable Ziel aber erstmal aufdröseln und erst zur entspr. Seite springen (alles vor dem #) und danach dein Smooth Scrolling nur mit dem Verweisanker (alles ab dem #) aufrufen. Geht aber nur innerhalb eines Frames, sonst ist das Script ja bereits weg. Oder du machst das nur, wenn du auf der aktuellen Seite bleibst (ziel muss mit # beginnen).

Datei 1 soll vermutlich das anspringen eines Ankers (auf der aktuellen Seite) etwas "smoother" machen. Da wird nicht mehr gesprungen sondern sanft gescrollt.
Wenn aber nun bei $().animate(options, duration, callback) im Callback location.href neu belegt wird, wird der Browser die Verweis mit Variabeln und Anker wird fehlinterpretiert. Das hat er vorher nicht gemacht und es macht das Scrolling auch überflüssig.

Es liegt nun nahe, location.href nicht neu zu belegen um keinen Reload auszulösen. Würde ja genügen, location.hash und location.search zu verändern.
Aber das bekommt vielleicht die Browserhistory nicht mit ... so kastriert man die Vor- und Zurück-Buttons.
Es wäre besser, wenn der onClick-Handler nur an solche Links gebunden wird, die garantiert auf der aktuellen Seite springen. Das wären die, die nur aus "#Ankername" bestehen oder aus "<aktuelleURI>#Ankername".

Das Bild ist nicht mehr zu sehen

Ich habe meinen Post zwar anschließend nochmal editiert, aber nicht innerhalb von Code-Tags ...

Danach war die Grafik nimmer zu sehen.

EDIT: Ist denn irgendein Fehler in dem JavaScript, denn die gewünschte Funktion wird jetzt nach der oben von Amica angeregten Veränderung noch immer tadellos ausgeführt und auch mein Problem ist damit gelöst ...

Zitat von Kaytir

Das Bild ist nicht mehr zu sehen

Danke für die Rückmeldung, dann war es nur der übliche kleine Browser-Cache-Hänger.

@onemorenerd:

Also muss ich den Selektor

'a[href*=#]'

in dem Script ändern? Wie kann ich denn allgemein gültig definieren, das nur dann Anker-Verweise akzeptiert / berücksichtigt werden, wenn sie auf Ziele im selben (variablen!) Dokument verweisen?

Ich habe diesen Code-Schnipsel selbst nur übernommen ( Animiertes Scrollen mit jQuery | jQuery, Links, Maus | Dr. Web Magazin ), da ich von JavaScript sogut wie keine Ahnung habe ...

a[href*=#]
passt auf alle, die ein # enthalten. Wenn du
a[href^=#]
benutzt, nimmt er nur die, die mit # anfangen, also seiteninterne.

damit wäre das dann auch geklärt, danke!

Eventuell musst du auch solche Hrefs matchen, die mit de aktuellen URI beginnen und mit einem Anker enden.

Beispiele: Auf der Seite http://example.com/path/to/foo.php?arg=value befinden sich folgende Links:
href="http://example.com/path/to/foo.php?arg=value#anchor"
href="example.com/path/to/foo.php?arg=value#anchor"
href="/path/to/foo.php?arg=value#anchor"
href="../to/foo.php?arg=value#anchor"
href="../../path/to/foo.php?arg=value#anchor"
href="./foo.php?arg=value#anchor"
href="?arg=value#anchor"
... (Aufzählung unvollständig! Wenn die Datei index.php heißt ...)

Die erwischst du mit a[href^=#] alle nicht.

Es ist auch gar nicht so einfach, alle Möglichkeiten abzudecken. Aber wenn du alle URLs/Links per Code erzeugst, sie also nicht manuell eingibst, kannst du bestimmt sicherstellen, dass bestimmte Fälle nie auftreten. Wenn es z.B. nur vollständige absolute und vollständige relative URLs gibt, kannst du das ins Matching einbauen. Anderenfalls würde ich eher den umgekehrten Weg gehen und die Hrefs nicht matchen, die nicht mit # beginnen. So matchst du zwar u.U. zu wenige, aber das ist immer noch besser als zu viele.

Also alle generierten Links auf den Seiten, bei denen dieses soft-scrolling zum Einsatz kommen werden ähnlich (nur komprimiert, da alle anderen Daten aus dem array für dieses Thema irrelevant sind) diesem Beispiel erstellt und verweisen niemals auf andere Seiten:

PHP-Code:

foreach ($foo['id'] as $i -> $v) {
    echo '<a href="#'.$foo['ankername'][$i].'">'.$foo['titel'][$i].'</a>';
} 


Sämtliche sonst von mir gesetzten oder generierten Links folgen strikt dem Schema:

Zitat von onemorenerd

href="?arg=value#anchor"

wobei bis auf eine Ausnahme, die mich zu meinem Problem geführt hat, alle ohne Anker auskommen.

Somit ist a[href^=#] in meinem Falle, denke ich, völlig ausreichend.

Sollte ich dann doch irgendwann an Grenzen stoßen, werde ich deinen Hinweis ganz bestimmt beachten und bei nicht selbst lösbaren Problemen nochmal auf dich zukommen!

Deshalb danke für deine Info's!

Grüße

Kaytir