Best way to implement overlay with pjax

Question

I am currently using pjax to load a snippet and overlay the main page of my site page. Then I change the body class using jquery to make a few style changes. This is normal, but the browser back button does not work properly because the body class change is triggered when the pjax trigger is clicked, and therefore the body supports the overlay class.

The effect I'm looking for is very similar to this site when you click on a project.

http://www.watsonnyc.com/

Obviously this does not work, so there should be a better way to do this.

Here is an example of my code:

$('.back').pjax('.info_overlay', { fragment: '.info_overlay',}).live('click', function(){ $('body').removeClass("info").addClass("work"); $('.info_overlay') .bind('pjax:start', function() { $(this).fadeOut(duration); }) .bind('pjax:end', function() { $(this).hide(); }); }) 

Answer 1

Try making a simple PJAX request with beforeSend and complete attributes.

The beforeSend attribute will be executed before the HTTP request is issued . I often use it when creating a loader for a specific AJAX / PJAX event. Whenever the user fires an event (i.e. presses a button), the function assigned beforeSend hides the contents of the div that I am updating and places the gif loader there, which gives a nice user interface.

The complete attribute will be executed after loading the specified page. If I use the example that I gave with the loader, you can make the function assigned to the attribute complete , hide the image of the loader and update the div with the loaded content from the requested page.

Here is an example with a bootloader image:

 $.pjax({ url: 'requested_page.php', container: '#updated_div', beforeSend: function(){ $('#loader_place').fadeIn('normal'); // This will fade in a hidden div with fixed centered position }, complete: function(){ $('#loader_place').fadeOut('normal'); // This will fade out the div and make it invisible again } }); 

If you want to do something more complex, I suggest you read the PJAX Documentation .