is it possible to change change the url in address

Question

you all have used pinterest, you can see that when you click on any pin, a div is added and lightbox is shown on the same page but the url is changed to that of actual pin page. i have the same lightbox to show data, is it possible to change the url like that?..

one thing i want to tell is that, i have link which has onclick event which calls view() method, in which i am calling another page with ajax request, which shows the content of that page on my page, i want to change url when this link is clicked and back to previous url when closed..here is my code

function view(){
   $.get('mypage.jsp', function(html) {
   $(html).hide().appendTo('body').fadeIn(500);
   }, 'html');
};

Answer 1

Yes, with HTML5's new history API. Where the lightbox is triggered, add something like this:

var hist = window.history;
hist.pushState({ image: [IMAGE URL] }, 'lightbox', [URL]);

This will change the current URL without reloading the page, and will create an entry in the browser history, so users can use their browser back button to return to the previous state (in this case, before they opened the lightbox).

Answer 2

I haven't checked Pintrest's solution. But is hash what you're looking for?

window.location.hash="Whatever-you-want-to-add-to-the-URL"

This will change http://stackoverflow.com/posts/11968693/ to http://stackoverflow.com/posts/11968693/#Whatever-you-want-to-add-to-the-URL

Answer 3

This feature is known as HTML5 Push State. Here's a related StackOverflow question which may provide more insight. Good tutorial for using HTML5 History API (Pushstate?)

Answer 4

You can change the url (not only the hash) by using the pushState or replaceState functions on the history object. More details: http://diveintohtml5.info/history.html