0

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? :)

  • What is that you want to archive? Do you want to load the content of other pages in to your `DIV` or do you want to redirect from your page to another page or do you want to tweak the URL (browser history) of your site? – Beauvais Mar 21 '14 at 16:12
  • I want to load the content of my pages in my DIV, and tweak the URL. No redirections. –  Mar 21 '14 at 16:14
  • 1
    You can try to add anchor data. Say your url is "example.com/foo.html" you could change it to "example.com/foo.html#foo5" and it will not trigger a page load. And you could check the url on load and show the contents for "foo5" in your site. – Prusse Mar 21 '14 at 16:20
  • 1
    You can go with all of the nice suggesions people have made here (using # and lots of if statements). But before you re-invent the wheel, search for the term "single page application" and look at some js libraries who will make your life easier – Shay Elkayam Mar 21 '14 at 16:28

5 Answers5

1

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
      }
andrew
  • 8,614
  • 7
  • 25
  • 56
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
Shay Elkayam
  • 3,898
  • 1
  • 18
  • 17
0

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>
Community
  • 1
  • 1
sunshinejr
  • 4,718
  • 2
  • 20
  • 32
0

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?

Community
  • 1
  • 1
danny117
  • 5,377
  • 1
  • 24
  • 34
0

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.

Nam Le
  • 1,086
  • 7
  • 7