I finally got pjax working, but I have another question.. How do I add some jquery animation like fadeout/slideup old content and fadein/slidedown new content?
By default pjax just changes the content without any good looking effects..
Any help would be much appreciated.
Best Regards
Basically, you have a bunch of events to latch on to and do as you like. Here's a basic fadeIn
and fadeOut
version using the pjax:start
and pjax:end
as triggers.
$(document)
.on('pjax:start', function() { $('#main').fadeOut(200); })
.on('pjax:end', function() { $('#main').fadeIn(200); })
Obviously you would swap #main
for the container element you're swapping content in and out of.
Let's say you want to create a directory browser, just like GitHub.
Let's start with Twitter Bootstrap's carousel and create a view with markup to use it (hope you don't mind haml):
Here's the container:
%div#uber-glider.glider.carousel.span12
%div.carousel-inner
= yield
%div#uber-glider-stage.glider-stage(style="display:none")
And here's a sample partial to render the pjaxed content within it:
%div.glider-group.item
%div.glider-heading(data-title="#{@super_department.name} Super Department" data-resource="#{super_department_path @super_department.id}")
%ul.breadcrumb
%li
%a.glider-link(href="#{divisions_path}")= "Divisions"
%span.divider= "/"
%li.active
%a.glider-link(href="#{division_path @division.id}")= @division.name
%span.divider= "/"
%li.active
= @super_department.name
%div.glider-body
- @super_department.departments.each_with_index do |department, i|
%div.glider-listing
%a.glider-link(data-glide="descend" data-target="#uber-glider" href="#{department_path department.id}")
= department.name
Now let's create some Javascript with pjax:
(function($){
"use strict";
$(function() {
$('#uber-glider-stage').on('pjax:success', function(e){
var $incoming_group = $('#uber-glider-stage .glider-group')
, $incoming_heading = $('#uber-glider-stage .glider-heading')
, incoming_resource = $incoming_heading.data('resource')
, $existing_groups = $('#uber-glider .glider-group')
, $existing_headings = $('#uber-glider .glider-heading')
, existing_last_idx = $existing_groups.length - 1
, matching_idx = -1;
$existing_headings.each(function(idx) {
if ($(this).data('resource') === incoming_resource) {
matching_idx = idx;
}
});
if (matching_idx > -1) {
// pop
$incoming_group.remove();
$('#uber-glider').one('slid', function() {
for (; existing_last_idx > matching_idx; existing_last_idx--) {
$('#uber-glider .glider-group').last().remove();
}
});
$('#uber-glider').carousel(matching_idx);
}
else {
// push
debug.debug("pushing 1 level");
$incoming_group.detach();
var $container = $('#uber-glider > .carousel-inner');
$container.append($incoming_group);
$('#uber-glider').carousel('next');
}
});
$('.glider-link').pjax('#uber-glider-stage', { 'timeout' : '3000' }).on('click', function(){
debug.debug(".glider-link click");
});
});
$('#uber-glider .carousel-inner .item').addClass('active');
$('#uber-glider').carousel('pause');
})(window.jQuery);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With