jQuery Plugin For Ajaxifying Your Website - Ajaxify
File Size: | 16.7 KB |
---|---|
Views Total: | 9107 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.
Basic usage:
1. Include the main JavaScript file ajaxify.min.js
after loading jQuery JavaScript library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="ajaxify.min.js"></script>
2. Ajaxify your web site. This will dynamically replace the divs with the ID #content
and #nav
across 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)", // 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, // strings, - separated by ", " - if matched in any external script URL - these are always loaded on every page load alwayshints: 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 - true = set off completely // strings - separated by ", " - hints to select out prefetchoff : false, // 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' } }
Changelog:
2020-11-30
- v7.7.1: hoverIntent workaround & bugfix: internal deep links
2020-11-17
- v7.7.0: Going ES6 - decoupled from pO() completely
2020-06-24
- v7.6.4: Fix GA timing / form default action
2020-06-01
- v7.6.3: Bugfix - tagName handling
2020-03-27
- v7.6.2: hoverIntent fix; body swap only option
2020-03-23
- v7.6.1: update
2020-03-19
- v7.6.0: update
2020-03-09
- v7.5.6: Using arrow functions
2020-02-20
- v7.5.5: Start using arrow functions
2020-01-21
- v7.5.4: Logging error in minified pO function fixed
2019-12-05
- v7.5.3: Update
2019-11-17
- v7.5.2: Update
2019-11-10
- v7.5.1: Downsizing. No functional change
2019-10-29
- v7.5.0: Prefetch on touchstart re-enabled
2019-10-28
- v7.4.6: Semaphore tweaked
2019-10-25
- v7.4.5: Semaphore tweaked
2019-10-19
- v7.4.4: Semaphore re-employed
2019-10-11
- v7.4.2: "link" in click handler changed to "lnk"
2019-09-02
- v7.4.1: Bugfix: Prefetch on dynamically inserted links
2019-08-29
- v7.4.0: "Hints" applied to prefetchoff, previewoff
2019-08-05
- v7.3.9: XHR made accessible asap in case of pronto.error
2019-06-15
- v7.3.8: _copyAttributes() re-applied, jQuery selection validation
2019-05-08
- v7.3.7: _copyAttributes() no longer applied to content elements
2019-04-24
- v7.3.6: fixed deceptive error
2019-03-08
- v7.3.5: Slideshow debugged and now usable
2019-01-30
- v7.3.3: Default value for canonical set to false
2019-01-19
- v7.3.2: _searchHints() applied to "memoryoff" handling
2018-12-21
- v7.3.1: _copyAttributes() reused for content div(s)
2018-10-26
- v7.2.6: Script handling made transparent
2018-09-27
- v7.2.5: Update
2018-06-09
- v7.2.1: bodyClasses set to "false" by default
2018-03-02
- v7.2.0: Delta loading simplified, new parameter "alwayshints"
2018-02-27
- Fixed typo
2018-01-29
- Bug when fetching "body" fixed
2018-01-14
- Support "defer" attribute of external JS scripts
2018-01-06
- Options updated
This awesome jQuery plugin is developed by arvgta. For more Advanced Usages, please check the demo page or visit the official website.