jQuery Plugin For Ajaxifying Your Website - Ajaxify

Ajaxify is a jQuery Ajax plugin which has the ability to ajaxify the whole website, by dynamically replacing any elements (e.g. header, sidebar, footer, etc) with Ajax contents across pages.

1. Include the main JavaScript file ajaxify.min.js after loading jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="ajaxify.min.js"></script>

2. Ajaxify your web site. This will dynamically replace the divs with the ID #content and #navacross pages.

jQuery('#content, #nav').ajaxify();

3. Default options to config the plugin.

{
  // Selector for elements to ajaxify - without being swapped - e.g. a selection of links
  selector : "a:not(.no-ajaxy)",  
  // Default main content is last element of selection, specify a value like "#content" to override
  maincontent : false, 
  // jQuery selection for ajaxifying forms - set to "false" to disable
  forms : "form:not(.no-ajaxy)", 
  // Fetch current URL from "canonical" link if given, updating the History API.  In case of a re-direct...
  canonical : true, 
  // Refresh the page if clicked link target current page
  refresh : false, 
  // in msec - Delay of Pronto request
  requestDelay : 0, 
  // in msec - must be set for animations to work
  aniTime : 0,
  // Animation parameters - see below.  Default = off
  aniParams : false, 
  // Plugin previews prefetched pages - set to "false" to enable or provide a jQuery selection to selectively disable
  previewoff : true, 
  // Smart scroll, true = always scroll to top of page, false = no scroll
  scrolltop : "s", 
  // Copy body classes from target page, set to "true" to enable
  bodyClasses : false, 
  // in msec - master switch for slideshow / carousel - default "off"
  idleTime: 0, 
  // in msec - time between slides
  slideTime: 0, 
  // For toggling sliding - see below.  Default = off
  toggleSlide: false 
  // Selector for links in the menu
  menu: false, 
  // Class that gets added dynamically to the highlighted element in the slideshow
  addclass: "jqhover", 
  // true = deltas loaded, false = all scripts loaded
  deltas : true, 
  // default async value for dynamically inserted external scripts, false = synchronous / true = asynchronous
  asyncdef : false 
  // true = all inline scripts loaded, false = only specific inline scripts are loaded
  inline : true, 
  // strings - separated by ", " - if matched in any inline scripts - only these are executed - set "inline" to false beforehand
  inlinehints : false, 
  // strings - separated by ", " - if matched in any inline scripts - these are NOT are executed - set "inline" to true beforehand 
  inlineskip : "adsbygoogle", 
  // append scripts to the main content div, instead of "eval"-ing them
  inlineappend : true, 
  // true = all style tags in the head loaded, false = style tags on target page ignored
  style : true, 
  // Plugin pre-fetches pages on hoverIntent
  prefetch : true, 
  // Debugging level to console: default off.  Can be set to 10 and higher (in case of logging enabled) 
  verbosity : 0,  
  // strings - separated by ", " - if matched in any URLs - only these are NOT executed - set to "true" to disable memory completely
  memoryoff : false, 
  // callback handler on completion of each Ajax request
  cb : null, 
  // Plugin set "on" or "off" (==false) manually
  pluginon : true 
  
}

4. Animation parameters (aniParams):

{
  // no fade, set to 0 for maximum fade
  opacity: 1, 
  // in percent -  "100%" means no change
  width: "100%", 
  // in percent -  "100%" means no change
  height: "100%" 
  
}

5. Toggling sliding parameters (toggleSlide):

{ 
  // parent element, where the above images will be prepended 
  parentEl: '#content', 
  // graphic for indicating sliding is on
  imgOn: 'http://4nf.org/images/pinOn.gif', 
  // graphic for indicating sliding is off
  imgOff: 'http://4nf.org/images/pinOff.gif', 
  // title tag when on
  titleOn: 'Turn slideshow off', 
  // title tag when off
  titleOff: 'Turn slideshow on', 
  // image props
  imgProps: { marginLeft: '85%', marginTop: '20px' }
}

This awesome jQuery plugin is developed by /arvgta. For more Advanced Usages, please check the demo page or visit the official website.