HartleySan Posted April 28, 2012 Share Posted April 28, 2012 What just looking at the following page: https://github.com/miksago/node-websocket-server And I noticed that when you click on a folder, it shows a JS-ish sliding effect, but yet the URL fully changes. How do you all think they did this? It's cool. I was thinking of a couple of possibilities: 1) When a link is clicked, the page transition is delayed until the animation plays. After that, the link is followed as normal and the page transition, while not Ajax, is so fast, you hardly notice it. 2) They're making an Ajax transition, and somehow, they're modifying the URL without making the page actually transition the non-Ajax way (although I don't know how this would be possible). Link to comment Share on other sites More sharing options...
Antonio Conte Posted April 28, 2012 Share Posted April 28, 2012 Looked at the page code now. They are definitely using a JS slider here. You can see they have a wrapper div starting down to the "file / comits / branches" navigation. That wrapper div probably has a large site-width at least double, I would guess three times, the normal page width, but content is hidden with overflow: hidden. Inside that wrapper, they have similar looking divs left aligned to the width of the site. They just then have to make sure the active page is the one aligned correctly inside the wrapper. The divs are probably always laying there empty before a link is clicked. That's why you'll see a nice transition even before the content should be loaded. I would also guess they cache some of the content you have already seen. Just my guess here. This is a pretty common way of doing sliders, but I must agree Github just takes it to the next level! 1 Link to comment Share on other sites More sharing options...
HartleySan Posted April 29, 2012 Author Share Posted April 29, 2012 Yeah, I can imagine all that. You see similar things these days with just about any JS slider. Also, it wouldn't be too hard for them to grab the entire substructure of a folder and load that into a JS object for caching purposes so that no matter what folder is clicked on, that folder's substructure is already known by JS and can be instantly transitioned to. With all that said though, I don't know how they get the URL to look the way it does. With JS/Ajax, you can change the fragment identifier part without forcing a normal (non-Ajax) page transition, but beyond that, you can't change the URL without the page jumping. Maybe (and I don't know if this is even possible), they use mod_rewrite to change the URL as follows: 1) Let's imagine that you're at the following URL at the moment: https://www.github.com/folder1/ 2) Within that folder, you click on folder2. 3) Ajax changes the URL to the following, which won't cause a page jump: https://www.github.c...lder1/#folder2/ 4) Through methods I somewhat mentioned in another post recently, you can use hidden iframes, etc. to make that fragment ID cause an actual page transition without the user noticing, which then makes the back button actually work with Ajax. 5) At the same time, mod_rewrite erases the number sign from the URL, leaving the user with the following: https://www.github.c...older1/folder2/ Again, I don't even know if that's possible, but I'm still stumped. I hope Larry can offer some input on the matter. Thanks, Antonio, as always. You have any luck with your timer code yet? Link to comment Share on other sites More sharing options...
Antonio Conte Posted April 29, 2012 Share Posted April 29, 2012 Yeah, it works like a charm! Thanks for your help. You are right, though. I didn't think about the URL change. You are right when you say it's often the ID that changes, but I didn't think about that when I answered the first time around. I wouldn't know how to pull this off, but I think you may be right about the iframe. The div is actually called "frame" if you look at the html. Actually sent an email to github asking how they did it. Hope we get our answer. Link to comment Share on other sites More sharing options...
HartleySan Posted April 29, 2012 Author Share Posted April 29, 2012 Well, I solved the riddle. The answer is the new History API in HTML5. See here: https://developer.mo...history_entries You can use the pushState method to manipulate the URL without making the jump. Unfortunately, every browser is all over the place on the implementation, so libraries like History.js seem to come very highly recommended. I was able to put together a quick test that does in fact work right. It properly changes the URL in Chrome without making the actual jump. Now, I'm trying to get some sort of animation to play before making the history jump, but having some issues with that at the moment. Link to comment Share on other sites More sharing options...
Antonio Conte Posted May 2, 2012 Share Posted May 2, 2012 That's what github said too. It's pushState 1 Link to comment Share on other sites More sharing options...
HartleySan Posted May 3, 2012 Author Share Posted May 3, 2012 Thanks for checking on that, Antonio. As a random heads-up to anyone that's interested, you have to play the animation after you use the pushState method to change the URL. 2 Link to comment Share on other sites More sharing options...
Edward Posted October 12, 2012 Share Posted October 12, 2012 I remember this old topic and today i am reading on PG.331 of how to do this stuff using window.location.hash. Its a way that tabs can be referenced via the URL. Link to comment Share on other sites More sharing options...
HartleySan Posted October 12, 2012 Author Share Posted October 12, 2012 Yes, the location.hash property is the standard way of creating bookmarks for JS/Ajax-heavy sites. The problem is that the hash doesn't allow for use of the back button. All the same, interesting. Link to comment Share on other sites More sharing options...
Edward Posted October 12, 2012 Share Posted October 12, 2012 Well its a state not really a page so the browser is correct in what it is doing. It's however useful if the user bookmarks that link, they can get directly to that page state without clicking around. Yes i do like that myself its an interesting feature. Link to comment Share on other sites More sharing options...
Recommended Posts