Links to id's don't work unless id is on index

[lydenyardley]

When trying to link to sections with an id="", it does nothing but sit there.

This works if linking to an ID on the index page but not on any others!

Example:

LINK ON INDEX PAGE
<a href="about#foobar">Foobar Section</a>

SECTION ON ABOUT PAGE
<section id="foobar">

Does nothing when the anchor is clicked.

[NeoBlack]

This is not a bug of Phile, because an url hash is not transported to the server. the jump to an anchor name or id is only a browser specific behavior.

Also a working example is my personal website, which runs the latest master (next release 1.3.0): http://naegler.hamburg/referenzen#nav-collapse-01

Open the link above will jump to the navigation.

[STOWouters]

To make it work in most browsers, you can add a base_url to force to jump to another section elsewhere outside the index page.

<a href="{{ base_url }}/about#foobar">Foobar Section</a>

But, as @NeoBlack mentioned, this is still browser dependent and it's not a Phile bug either.

[lydenyardley]

Thanks for the quick response @NeoBlack. And thanks @Stijn-Flipper. That works. One more scenario though...

LINK ON ABOUT PAGE
<a href="#menu">Menu</a>

SECTION ON ABOUT PAGE
<div id="menu">

Rather than jump to the menu section on the About page, it jumps to the home page (to the same #menu that's in the header on that page.

Is this because I'm not on the latest version? Or do I need to include some sort of

{{ currentPage_url }}#menu?

And if so, does that mean it's going to have to reload the about page, even though the user is on it?

[STOWouters]

Are you sure the href attribute is #menu and not /#menu or even {{ base_url }}#menu? Perhaps you can show us a snippet of your HTML code, because your code should work.

I'm pretty sure this still has nothing to do with Phile, it's rather something wrong with the HTML code. You can try to clear the Phile cache to ensure that the rendered HTML is a fresh one (remove lib/cache/cache.storage.* directories).

And yes, you can use

{{ base_url }}/{{ current_page.url }}#menu

to make it work, but that's a bit overkill (it will indeed reloads the about page and jumps to the menu div), #menu should be enough, unless you're using some exotic browser with some weird behavior.

[lydenyardley]

I know, it doesn't make sense, but here's the link to the test domain... http://test.lydenyardley.com

If you open dev tools, and click on the menu, you'll see what happens. OK on home page but loads index from any other page?

This is essentially what's in the header include (copied and pasted (excluding detail)):

<header>
    <div id="menu">...</div>
    ...
    <a class="navicon overlay-open" href="#menu">
</header>

Forcing the page to reload isn't an option performance and experience wise. I just can't believe this isn't working!?

[STOWouters]

I see, usually, that should work.

I'm a JavaScript n00b (I even don't like JavaScript either), but I see a onclick="document.location" attribute on the div. I'm not sure if clicking on the link will also trigger that. Remove it or rename the value to blog#menu or so and see what happens.

Also, I've just read that document.location is read-only. Perhaps try to use window.location instead. I see some interesting examples here (check out example 3) .

[lydenyardley]

Snap re: Javascript.

I tried removing it just in case, but it made no difference. That is just so that the menu div closes if the user clicks anywhere that isn't the 'x' or a link.

Had a look at the mozilla page, and it seems interesting, but it's not where the problem lies I don't think. I will bookmark this though, because it may be that I need to use something like this when closing the menu div.

If you hover over the menu icon, you'll see (bottom left of window on Chrome) that the link it's going to open is http://test.lydenyardley.com/#menu, whereas if on blog page for example, it should be showing http://test.lydenyardley.com/blog#menu.

If I navigate to the blog page and then just append #menu, it works as you would expect...!

[Schlaefer]

change/remove the <base> tag, it messes up relative links in the subpages

[lydenyardley]

Sorry, what do you mean by the tag?

[STOWouters]

Try:

<a class="navicon overlay-open" href="{{ current_page.url }}#menu">

On the blog page, this should result in:

<a class="navicon overlay-open" href="blog#menu">

I tried it, and it won't cause to reload the whole page again.

[lydenyardley]

OK now we're rocking!

Well almost...

That works perfectly on any page other than the home page, because the homepage is test.lydenyardley.com but the link becomes test.lydenyardley.com/index#menu rather than just #menu. Any suggestions?

[STOWouters]

:+1:

The URL's test.lydenyardley.com and test.lydenyardley.com/index are referring to the same page, so it's fine. Otherwise, you can use an if-else structure:

{% if 'index' == current_page.url %}
<a class="navicon overlay-open" href="#menu">
{% else %}
<a class="navicon overlay-open" href="{{ current_page.url }}#menu">
{% endif %}

One liner:

<a class="navicon overlay-open" href="{% if 'index' != current_page.url %}{{ current_page.url }}{% endif %}#menu">

[lydenyardley]

Genius. Thank you so much. I now have some nice, fast menu opening! Really appreciate your help!

[lydenyardley]

And I've uploaded the changes - now to figuring out the close #menu part... :-)

[lydenyardley]

FYI, I've done it. added the following to the #menu div:

onclick="window.location.href = window.location.href.replace(/#.*$/, '#');