5

Once a time, I read an article said that github page transition is made by pjax, I checked jquery-pjax project. I think I have close to the answer, it must be something related with event pjax:start and pjax:end, but I still can't get it works, so I try to get some help here.

$('a.pjax').pjax('#main');
$('#main').bind('pjax:start', function(){$('#main').slideUp()})
  .bind('pjax:end'), function(){$('#main').slideDown()});

But it has no effects

guilin 桂林
  • 17,050
  • 29
  • 92
  • 146
  • Are you talking about how when you dig through code the next / previous pages slide in and out? That's done with HTML5 History API and basic behavioral JS. – Calvin Froedge Nov 04 '11 at 18:05
  • @CalvinFroedge yes, I am talking about code view page, and you mean that nothing about pjax? – guilin 桂林 Nov 04 '11 at 18:14
  • 2
    Yep, the core of what makes that work is the History API: http://html5demos.com/history You'd do get requests after you swap to a new url. The effects part can be done with standard jQuery animate. – Calvin Froedge Nov 04 '11 at 18:33

3 Answers3

4

Github use HTML5 features for the page transitions. That includes the new JS History API and CSS3 transitions. No jQuery involved except for standard event listening, selectors. The blog post is here with all the relevant links https://github.com/blog/760-the-tree-slider

sciritai
  • 3,688
  • 1
  • 17
  • 22
1

Pjax : Demo , Source[Github]
It is the one that github use.. reference

Abhishek Goel
  • 18,785
  • 11
  • 87
  • 65
  • much much thanks for this i spent a week looking and finally figured github out thx to your reference link – Noitidart Feb 12 '14 at 04:48
1

I don't know if this is relevant at all. But I've been using Pjax myself and the code above has a syntax error, should be:

$('a.pjax').pjax('#main');
$('#main').bind('pjax:start', function(){$('#main').slideUp()})
.bind('pjax:end', function(){$('#main').slideDown()});

Edit: Yes, sorry for not pointing that out. Exactly as @Udo Held said: You need to remove the bracket after 'pjax:end' or else it will not follow through and execute the $('#main').slideDown() function.

Michael
  • 11
  • 2
  • You should probably point out were the error is as its difficult to tell what the difference is like: You need to remove the bracket after `.bind('pjax:end'` and then repeat the working code or something like that. – Udo Held Jan 04 '12 at 22:04