Question

I have a main page “index.html”. This main page is the enterance to the site which is done in HTML5. There are other pages for the site:

“about.html”, “work.html”, “portfolio.html”, “contact.html”

So all of these pages have a div called “contentDiv” which has the copy/text accordingly. User enters the site via “index.html” and if user clicks on one of following the nav links:

About | Work | Portfolio | Contact

“index.html” page loads the content of clicked page’s “contentDiv” using JQuery’s load() call and then slides in the loaded div using animation.

Site is backward compatible so if Javascript is disabled then user is taken to the clicked page instead of having the “index.html” to load the content via load() call.

By the way, the nav link(s) are coded like this:

<a href="about.html" title='About'>About</a>

Once the “index.html” loads the requested content, By using pushState(), the URL is updated. So if user clicks on “about” link then pushState() updates the URL to:

“http://www.abc.com/about.html”

The reason I have not inserted any hash into the href tags, because I want the site to have a fallback just in case if the Javascript is disabled. This way, user can be directed to the requested page (‘about.html’) instead of “index.html”.

So far all works well as expected however here is the issue. When user is on “index.html” and clicks on anyone of the sections for example “about.html”, content is loaded and URL is updated via pushState(). So now the URL is “http://www.abc.com/about.html”. Now if user refreshes the page(“index.html”), “about.html” is loaded instead of “index.html” doing the load() calls.

Lets say if I code the nav href tags like this:

<a href="#about" title="about">About</a>

then the URL ends up having a hash in it. And if I copy and email the link “http://www.abc.com/#about” to a user, and if user tries to open the link via browser with javascript disabled then user will not be able to get to “about.html” because link only has ‘#about’ instead of “about.html”.

What I am trying to do is indeed doable I just don’t know how to approach it. If anyone can help me on this that would be wonderful.

Forgive me, for such a long description.

Thank you.

Answer 1

I ended up setting all the nav hrefs to “”. and then setting the hrefs values on document.ready() function.

$('a[rel=nav]').attr('href', '');

Thanks.