Jump to content
Larry Ullman's Book Forums

How'D They Do That?


Recommended Posts

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

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!

  • Upvote 1
Link to comment
Share on other sites

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

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

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

  • 5 months later...

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

 Share

×
×
  • Create New...