Can I change the URL without updating the page?

Question

This may seem like a dumb question. But I have no idea if it can be done. So before I start the process of making a portfolio site, I would like some pointers. Otherwise, I will just go with another design.

My question:

When using the ascencor.js plugin, everything on my site is in one file. I will therefor never go to a new url, like /contact or /about.

But then I wondered, what about google?

All of my content would be put inside different different classes, but in the same file:

<div class="floor floor-1">
    <span class="text">Floor 1</span>
</div>
<div class="floor floor-2">
    <span class="text">Floor 2</span>
</div>

Check the example here: http://rplambech.dk/ascencor/

So yeah, with this method, I will never change the url, so I can therefor only index one page.

Is there a way that I can change the URL without updating the site? And will I be able to go to http://rplambech.dk/ascencor/floor5 for example?

In case it's not possible, can I then at least overwrite the title of the page, each time I click to a new "page". With some PhP for example.

Or should I just go with a completely different approach? :)

Answer 1

From the context of your question, and its comments, you're looking for the term single-page-application.

There are many ways of doing this, some of them make use of the history object in order to support the browser's "back" and "forward" buttons.

I'd recommend you to do a search of the term "single page application" and in the meantime examine some (or all) of the following frameworks (they will ease your development and make your life easier instead of dealing with # and nasty low-level ajax calls:

1. backbone.js
2. angularJS
3. ember.js

Answer 2

It can be done using hash links, originally designed to jump to a certain div on the page are now often used to load dynamic pages on a single page

so you could link to http://rplambech.dk/ascencor/index.html#floor5 for example

and then have some javascript like

var loc = location.hash.split("#")[1];

then

     if(loc == 'floor5'){
         //execute goto floor 5 code
      }

Answer 3

Using history.pushState with HTML5 as stated here.

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

URL:

<a href="#" id='click'>Click to change url to bar.html</a>

Answer 4

No you can't change the URL without going to the server.

JQuery does however have a cool page loader that will load a page. How to put a whole html page in a div using jquery?

Answer 5

You cannot change the url "/ascencor" to "/ascensor/floor5" without refreshing the page.

But you can change to "/ascensor/#floor5" (added hash sign). I suggest you try out angularjs for more information.