low cost page transitions

Question

I'm relatively new to web development so this probably is a odd question. I want part of my site to load a new page. But significant part doen't need to change. What I do now is that I load content into a div.

$('#rightdiv').load("about.html");

The downside to this is that the address doesn't change, I believe there is a good solution but I don't know how. I have tried googleing it but I can't find anything good on it. So I would love to see both a solution and how the sollution is called (hope you know what I mean).

Thank you for your time and effort.

Well you can find your own solution, its fairly easy. It is called 'HTML5 History API'. Google that. — putvande, Jul 31 '13 at 16:21
Thank you very much I'll read this later today. (if you post is as an answer I might accept it as such). — Daan Luttik, Aug 01 '13 at 15:42

score 1 · Answer 1 · answered Jul 31 '13 at 16:22

1

The standard way is to use location.hash. So for example if you were on mysite.com/, and loaded the about.html page, you could set the hash to #about. This would not cause the page to reload, but would alter the URL (to provide for bookmark/back button support).

As an example, using the success callback to load():

$('#rightdiv').load('about.html', function() {
    location.hash = 'about';
});

HTML5 adds a new API called pushState. This allows for more complete modification of the URL without causing a page reload. Read more about that here.

answered Jul 31 '13 at 16:22

rossipedia

56,800
10
90
93

It takes more than that to support bookmark and back button. – James Montagne Jul 31 '13 at 16:24
This will get him started on the right path though. – rossipedia Jul 31 '13 at 16:25
`location.hash` was standard pre-HTML5, but `pushState` is probably preferable for new HTML5 development. See the competing answers [here](http://stackoverflow.com/questions/9340121/which-one-is-better-pushstate-or-location-hash), but take them with a grain of salt giving the dates of posting. See browser support [here](http://caniuse.com/#search=pushstate) – George Cummins Jul 31 '13 at 16:26
HTML5 isn't officially standardized yet. Soon, but not quite there. – rossipedia Jul 31 '13 at 16:27

Barney · Accepted Answer · 2013-07-31T16:49:02.563

1

Browsers supporting HTML5's pushState will let you change the path:

$('#rightdiv').load("about.html", function pushState(){
    if(history && history.pushState){
        history.pushState('','','about.html');
    }
});

edited Jul 31 '13 at 16:49

answered Jul 31 '13 at 16:26

Barney

16,181
5
62
76

score 0 · Answer 3 · answered Jul 31 '13 at 16:24

This can easily be achieved by taking advantage of HTML5 and its features.
Myspace does something similar to what you are asking. The HTML5 History API to change the browser URL without refreshing the page. Combining this with JQuery $.ajax can produce the effects shown in myspace, github and facebook. "arundavid" has a great explanation on this link at tinywall.info

score -1 · Answer 4 · answered Jul 31 '13 at 16:22

-1

That's the right way to load data into a div using AJAX. I personally prefer to use the jQuery.ajax() function though.

answered Jul 31 '13 at 16:22

Samer

973
1
6
15

low cost page transitions

4 Answers4