In this website, you can test this jQuery plugin and see how does it work.
DownloadIn this website, you can test this jQuery plugin and see how does it work.
DownloadJust use link on the top (Home, Example 1 and Example 2)
First, add jQuery and the plugin in all pages of the site.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="path/to/ajax-navigator.js"></script>
Next, add this script just after including the plugin, and change #ajax-content
by the selector of your container of the ajax navigation.
<script type="text/javascript"> jQuery(document).ready(function($) { $.ajax_navigator({ 'page_container': '#ajax-content' }); }); </script>
The plugin allow you to use a callback function, which will be launch after each ajax call.
The callback function give you access to the element which called the new page by using $(this)
.
<script type="text/javascript"> jQuery(document).ready(function($) { $.ajax_navigator({ 'page_container': '#ajax-content' }, function() { // Do your stuff }); }); </script>
You can custom some options of the plugin, like the container for the request.
page_container (default: '.container')
The selector of the content which gonna be load by ajax. This selector need to exist on all loaded pages.
fadeOut (default: true)
Choose to active or not a fadeOut effect on page change.
fadeOutDuration (default: 1000)
Set the duration in milliseconds of the fade out effect.
fadeIn (default: true)
Choose to active or not a fadeIn effect on page change.
fadeInDuration (default: 1000)
Set the duration in milliseconds of the fade in effect.