0

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');
};
user1531746
  • 105
  • 1
  • 2
  • 6

4 Answers4

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

Community
  • 1
  • 1
JonnyReeves
  • 5,919
  • 1
  • 23
  • 28
1

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

ColBeseder
  • 3,309
  • 3
  • 25
  • 45
  • 1
    i added this code window.location.hash="Whatever-you-want-to-add-to-the-URL" in onclick event of my link, it working but its showing url with # at starting. like this mysite.com/test.jsp/#next – user1531746 Aug 15 '12 at 13:09
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).

Purag
  • 16,273
  • 4
  • 48
  • 70
  • here lightbox is nothing like you are thinking of...actually i am adding new divs to the current page which looks like a lightbox...and when the lightbox is closed those added divs are removed.. – user1531746 Aug 15 '12 at 13:15
0

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

matthias.p
  • 1,444
  • 8
  • 11