dynamically load part of a website - change url

Question

my question is about this website - http://www.bits-apogee.org/2011/

whenever you click on the link in the side navigation bar, the middle part of the website is dynamically loaded. Also, the url also changes, everything else remains unchanged. how is this done?

is this some query plugin?

I don't know, but that site has cool bones under a bad design. — JakeParis, May 08 '12 at 20:20
you are all missing the question. He's asking about the URI update with seemingly no refresh. — rlemon, May 08 '12 at 20:23

score 1 · Answer 1 · answered May 08 '12 at 20:22

The site is using Hashes (#) in the URL to denote the new content being loaded.

This is useful for people bookmarking dynamically loaded content (normally hashes load to specific areas on a page, named anchors or ID's for new browsers), because they don't trigger the page to refresh...

http://www.highrankings.com/urls-with-hashtags-307 there are drawback (SEO) concerns to this... however you will notice more and more sites doing it so i would assume the SEO robots will get better.

For Google, add an ! sign right after your hash tag ;). See also here: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started . — Styxxy, May 08 '12 at 20:27

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

I totally agree with @JMCCreative. It looks like it's an actual refresh. You should look at the following post on StackOverflow.

Modify the URL without reloading the page

edited May 23 '17 at 11:44

Community

1
1

answered May 08 '12 at 20:23

Yosep Kim

2,931
22
23

look at the URI of a subpage `http://www.bits-apogee.org/2011/#Automation/Circuit_Design_Challenge/` everything after the hash is converted into a variable then that relative path is loaded via XHR – rlemon May 08 '12 at 20:24

score 1 · Answer 3 · edited May 23 '17 at 12:14

1

There are 2 possibilities:

You can use the HTML5 capabilities to change the url (history pushState), however this feature isn't available in all browsers yet. For more information, look at this SO post: Is there a way to change the browser's address bar without refreshing the page? .
You can use a hashtag (#) part as fall back for browsers who don't have above feature yet.

If you use jQuery, you can use the handy plug-in jQuery Address. This will take care of both above cases.

edited May 23 '17 at 12:14

Community

1
1

answered May 08 '12 at 20:24

Styxxy

7,462
3
40
45

1

ahh... good point.. I never remember about the new history api – rlemon May 08 '12 at 20:25

score 0 · Answer 4 · answered Apr 20 '13 at 01:52

They're not using a plugin. They're doing an ajax request to a URL like this: http://www.bits-apogee.org/2011/getcontent/?even=Rachel+Armstrong and dumping the overview in the container.

The circle of this type of process is usually like this:

listen for link clicks
on click, prevent default on event.
user window.history.pushState to update url
some other code - hears new history
generates a url to get the content.
ajax load the url
dump the data into a container

2 Libraries I have used, both are easier than the above, as they rely on loading a regular html page via AJAX instead the example site you point to, which used a JSON format to get the data.

Pjax - update peices of the page, by pulling that HTML node from a different URL.
Ajaxify - easiest solution, you could do that effect on an HTML site in 10 minutes.

dynamically load part of a website - change url

4 Answers4