3 ms·

I love how the music player in the bottom right corner of like.fm stays open as you navigate between different pages. Does anyone know how they did this? Edit

by akamaka 16y ago

I love how the music player in the bottom right corner of like.fm stays open as you navigate between different pages. Does anyone know how they did this? Edit: To clarify my question, this is probably done with AJAX, but like.fm also updates the browser URL bar, without using a hash anchor fragment like gmail. Any idea how that's done?

bmelton 16y ago
Without looking, one easy way to do it would be to AJAX the entire site, such that when you click on a link, it loads the entire content panel dynamically, while keeping the player div active. Basically, reload everything on the page except the player, but never actually take the user to another page.
- akamaka 16y ago
  Right. The next step is to change the URL bar in the browser with each new page, so that history, bookmarking, and link-sharing work properly. I've seen this done using anchor fragments (in other words, only changing the part of the URL after the hash symbol). That's how gmail does it (gmail.com/foo#inbox). This site seems to have some other method that doesn't require the hash. I've never seen this on any website, so I would really love to know how its done!!
  - bmelton 16y ago
    (Sorry to respond to such an old item, but I just got the chance to look) I don't know what browser you're using, or if they're doing something to mask the URL that they're using, but in IE7, the url IS updated on anchor fragments. The links themselves point to something canonical looking (e.g., like.fm/user/home), but when you actually click on it, the url you end up at is clearly implemented using anchor fragments (i.e., like.fm/#/user/home). For what it's worth, there's a bug in it on IE7, such that if I keep clicking the same link (even after I get there), it malforms, and keeps malforming with each click (though the pages still seem to work) -- like.fm/user/home#r//user//user//user//user/home
chrischen 16y ago
You're either using Chrome, Safari, or the Firefox 4 beta. This is the HTML5 history management API doing it's magic. If you want my uncompressed javascript to take a look let me know chris@like.fm (it's kinda messy). If you use an older browser that doesn't support HTML5 history management then it goes back to the hash thingy.

by akamaka 16y ago

bmelton 16y ago

Without looking, one easy way to do it would be to AJAX the entire site, such that when you click on a link, it loads the entire content panel dynamically, while keeping the player div active. Basically, reload everything on the page except the player, but never actually take the user to another page.

akamaka 16y ago
Right. The next step is to change the URL bar in the browser with each new page, so that history, bookmarking, and link-sharing work properly. I've seen this done using anchor fragments (in other words, only changing the part of the URL after the hash symbol). That's how gmail does it (gmail.com/foo#inbox). This site seems to have some other method that doesn't require the hash. I've never seen this on any website, so I would really love to know how its done!!
- bmelton 16y ago
  (Sorry to respond to such an old item, but I just got the chance to look) I don't know what browser you're using, or if they're doing something to mask the URL that they're using, but in IE7, the url IS updated on anchor fragments. The links themselves point to something canonical looking (e.g., like.fm/user/home), but when you actually click on it, the url you end up at is clearly implemented using anchor fragments (i.e., like.fm/#/user/home). For what it's worth, there's a bug in it on IE7, such that if I keep clicking the same link (even after I get there), it malforms, and keeps malforming with each click (though the pages still seem to work) -- like.fm/user/home#r//user//user//user//user/home

chrischen 16y ago

You're either using Chrome, Safari, or the Firefox 4 beta. This is the HTML5 history management API doing it's magic. If you want my uncompressed javascript to take a look let me know chris@like.fm (it's kinda messy). If you use an older browser that doesn't support HTML5 history management then it goes back to the hash thingy.