Fragment linking doesn't work

[VSharapov]

Currently going to a fragment, e.g. https://vsharapov.github.io/INDEXmd/#links will result in the fragment being cleared, and no scroll down to the "Links" section.

I'm guessing this has something to do with the settings being loaded and the window.location being changed.

[SwagatikaBehera]

Hello! I would like to help with ur isssue. I am still Learning, but i want to try if i could resolve our issues. So could you tell me what fragment you had mentioned? and about no scroll down you mean like making heading a link so whenever user click it will directly land to that link?

[VSharapov]

Hello! I would like to help with ur isssue. I am still Learning, but i want to try if i could resolve our issues.

My first volunteer! 🎉️ Welcome @SwagatikaBehera !

what fragment you had mentioned? and about no scroll down you mean like making heading a link so whenever user click it will directly land to that link?

I think you got it - https://vsharapov.github.io/INDEXmd/#links should take you down to the heading

I remember fragment linking didn't work at the beginning - the browser tries it once after the page is loaded, but doesn't wait for the XHR request to finish and for showdown.js to render the markdown into HTML. I think I made it work before but just noticed it's not working (at least on Firefox) and the fragment actually gets cleared. I'm guessing it's right here where location gets set that I messed up.

[SwagatikaBehera]

Thank you! So in browser no content which you shown in https://vsharapov.github.io/INDEXmd/#links is being rendered ?

[VSharapov]

Thank you! So in browser no content which you shown in https://vsharapov.github.io/INDEXmd/#links is being rendered ?

The content is being rendered, no problem there, but the browser viewport does not get taken to the "Links" section, which is the expected behavior.

I tried re-adding #links to the address bar after everything is loaded and rendered - that seems to be functional.

I'm still pretty sure the issue is right here where location gets set.

[SwagatikaBehera]

Okay I am looking into it.

[SwagatikaBehera]

Sorry for missing few days. See you have provide an id ="links" to the link section. So in order to reach their , there should be anchor tag where we had to provide that href with same id linking both. But i can't find any.

[VSharapov]

there should be anchor tag

That was the case in older HTML versions @SwagatikaBehera . Current recommendation is to use the global id attribute instead. Anchor names still work but you can test that id works by navigating your browser to https://vsharapov.github.io/INDEXmd/#links and once the page is finished loading, navigate to https://vsharapov.github.io/INDEXmd/#links again - the viewport will move to the element with the links value in its id attribute. Just checked in latest Firefox and Chrome.

[SwagatikaBehera]

Okay tell me how will i reach to link section without directly writing anything in URL? One method is just scrolling and another method is clicking on some link which will navigate you to link section, but what is that link?

Their are 3 links- Demo, https://vsharapov.github.io/INDEXmd/?text-width=readable, this .html file , & this are not which will navigate to link section.

https://vsharapov.github.io/INDEXmd/#links is actually https://vsharapov.github.io/INDEXmd/?font-family=monospace#links. Or I am understanding wrong?

[VSharapov]

Hey @SwagatikaBehera , I had a hard time understanding your last comment, so I created a fix on branch fix-setting-location. My estimation in this comment was correct - that code would take the old location, something like https://vsharapov.github.io/INDEXmd/?font-family=serif#horizontalrules and, having determined the settings from localStorage which are not reflected as GET parameters, would insert them, creating a new location from location.pathname + newGetParameters or something like "/INDEXmd/" + "?text-width=readable" but omitting several parts:

• location.protocol: "https:" - this is carried over if your new location is relative (e.g. /something)
• "//" - this is carried over if your new location is relative
• host: "vsharapov.github.io" or hostname: "vsharapov.github.io" - this is carried over if your new location is relative
• port: "" - this is carried over if your new location is relative
• search: "?font-family=serif" - this will actually be omitted, but then replaced from newGetParameters
• hash: "#horizontalrules" - this is what the bug fix patches

However, I just realized that GET parameters which do not appear in menuOptions will still be stripped, so even with my fix, a URL such as https://vsharapov.github.io/INDEXmd/?newParameter=newValue#horizontalrules will lose the GET parameters. Since this project is meant to serve as a boilerplate for others, it's expected that GET parameters will be used, and should not be omitted. Thus I am opening a new issue to address this, feel free to try your hand at it if you think you understand the concepts and terminology after this example.