Embarrassing dev q..
- Started
- Last post
- 14 Responses
- mikotondria3
OK, this is embarrassing:
Beatport, (love 'em) recently 'updated' their famous interface from pure Flash, to a new slick HTML model, with an awesome Trackplayer that stays at the top of the page as you navigate through the site.
It maintains itself despite the page url and content changing - this made sense as a reason to make the site in Flash, a few years ago, as it was a single self-contained movie, whose content changed but that remained on a single page.
Without trying to back engineer the site, anyone got any ideas on how the current set up works ? Is there like a command to change the url in the browser, whilst ajaxing content in ? This way of course, the player can continue playing, persistently, and the content change. And of course the linked-to url would make sense and the appropriate content retrieved.
It's an excellent solution to the persistent-player problem, that I had solved for various music projects by ajaxing in content into the body of the page, but I never did arrive at a unique-page url solution. Anyone ?
- ukit20
Good question. I hadn't looked at the new Beatport site much. It does appear to be loading everything via AJAX while updating the URL.
According to this they are using the HTML5 History API to update the URL:
http://stackoverflow.com/questio…
More info here:
- Mishga0
floating menu?
http://www.innovativephp.com/blo…- or this:
http://manos.malihu.…Mishga - Not really what he was asking aboutukit2
- or this:
- jadrian_uk0
you can achieve same thing as html5 history with jquery address plugin , on no html5 browser the hash symbol will be visible on html5 compliant browser url will look like an absolute url
- ukit20
^
And if you look at the Beatport site on IE9, they do seem to be falling back on a hash symbol approach.
- vaxorcist0
you can do this with AJAX and jquery in specific. I've done it...
NOTE that you're increasing your debugging and browser-testing and browser-tweeking time may result, so the "when will it be done" question becomes harder to answer once you go down this road.
It's also likely to cause more testing and rewriting for use on mobile devices, iPhone and android can do this, but the UI on a smaller screen may be weird...also getting sound to play nicely on a mobile device, while maintaining a nice UI is hard.... some mobile devices you have to go back to a default device sound player UI...
- Totally. I honestly bet it was a nightmare and 1000s of hours total to get it working as smoothly as it does-its excellentmikotondria3
- mikotondria30
Awesome - thanks guys, yes, that seems to be the bones of it.
Looking though the sources, the anchors' hrefs appear to be regularly formed, though - eg:
href="/release/always-on-the-run...
How does the site 'catch' the click event and subvert that into an ajax request above the browser-level command to go to another page ?
When I hacked a solution together I wrote script that rewrote the hrefs as "javascript: AJAXgoToURL( ..etc etc " so that it didn't go directly to another page, but triggered the ajax functionality. Does that makes sense ?- hmmm..... checking now... argh, this is an odd one...vaxorcist
- even if you write and target an onClick event, it still goes to another page, doesn't it usually ?mikotondria3
- vaxorcist0
the hash tag approach is much easier....
var myClicked = this.href.split("#");
Does anyone know clearly the SEO benefits of "real url" vs hash tag?
- vaxorcist0
this may be useful:
http://marcelsite.heroku.com/pos…
- vaxorcist0
http://www.whatwg.org/specs/web-…
http://people.opera.com/miket/20…
is a nicely clean example of URL persistence....
try a page reload and see what happens... you may have to add in some server-side URL parsing for reloads and links via htaccess URl parsing?
- vaxorcist0
- AH very good, thanks for your assistance with this, Vax, nice to learn up on some edgier general stuff. Good show, sir.mikotondria3
- Hombre_Lobo0
There are no embarrassing questions, only embara...wo, wait a minute...ahaha! you should know this, BE ASHAMED!!!!
- ernexbcn0
Must be loading everything with ajax calls and history/state , I used this: https://github.com/balupton/Hist… on this site: http://clauaskee.com you open a work the URL changes and even the back/forward browser buttons work as expected, you'll need to do some JS programming though.
- jadrian_uk0
"And if you look at the Beatport site on IE9, they do seem to be falling back on a hash symbol approach. "
yes because i told them to do so.