CODEWITHSUNDEEP
javascriptjqueryhtml
Combustion007
Combustion007

Reputation: 474

HTML5 Loading the external content into a div and using pushState()?

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.

Upvotes: 1

Views: 2593

Answers (2)

Combustion007
Combustion007

Reputation: 474

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.

Upvotes: 1

FrameDev
FrameDev

Reputation: 61

This code will achieve what you need to do and support the users with javascript disabled.

$('a').click(function() {
  window.location.hash = $(this).attr('src');
  return false;
}

Your urls will look something like http://www.yoursite.com/#about.html if you click on the about link and they work when you refresh. If you want to learn more about making ajax sites I recommend you visit this blog Css-Tricks.com

Upvotes: 0

Related Questions