Verweis mit Variabeln und Anker wird fehlinterpretiert

**AmicaNoctis** · 09.12.2009, 14:56

Hallo,

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

Gruß,

Amica

**Kaytir** · 09.12.2009, 15:01

Hi Amica!

Ja, wenn ich das JavaScript deaktiviere gehts ...

folgendes verwende ich auf manchen Seiten:

HTML-Code:

<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:

HTML-Code:

$(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:

HTML-Code:

$(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? ....

**AmicaNoctis** · 09.12.2009, 15:06

Es liegt an

Code:

location.hash = ziel;

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

Code:

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?

**Kaytir** · 09.12.2009, 15:09

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

**AmicaNoctis** · 09.12.2009, 15:11

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).

**onemorenerd** · 09.12.2009, 15:14

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 Seite neu laden. 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".

**Kaytir** · 09.12.2009, 15:15

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 ...

**AmicaNoctis** · 09.12.2009, 15:18

Zitat von Kaytir Beitrag anzeigen

Das Bild ist nicht mehr zu sehen

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

**Kaytir** · 09.12.2009, 15:42

@onemorenerd:

Also muss ich den Selektor

Code:

'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 ...

**AmicaNoctis** · 09.12.2009, 15:44

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

**Kaytir** · 09.12.2009, 15:46

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

**onemorenerd** · 09.12.2009, 16:49

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.

**Kaytir** · 09.12.2009, 17:33

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 Beitrag anzeigen

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

Verweis mit Variabeln und Anker wird fehlinterpretiert