wpmilitary

If you need to load your site faster and without any page reloads, then Ajax Press is the right tool for you. Your site will appear faster and more impressively using the Ajax Press plugin.
Ajax Press uses <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX" rel="nofollow ugc">Ajax</a> (XmlHttpRequest) and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history" rel="nofollow ugc">pushState</a> deliver a fast browsing experience to your site users.
It allows you to completely transform the user experience of standard websites to make users feel like they are browsing an app, especially for those with low bandwidth connections.
No more full page reloads. No more multiple HTTP requests.
<h3>Ajax Press Features</h3>
<ul>
<li>Ajax Page Load – Loads your site using AJAX without any page refresh.</li>
<li>Ajax Search – Users can search your site without any page reload.</li>
<li>Ajax Comments – Users can post comments on your site without any page reloads.</li>
<li>Ajax Login – Users can login to your site without any page reloads.</li>
<li>Ajaxify Forms – You can make any form ajaxify on your site that has an internal action link.</li>
<li>Page Transition Animatio – Multiple page transition animation is available to add a more attractive page switching mode.</li>
<li>Preloader – Multiple preloader available to show before the ajax page is loaded.</li>
<li>Custom JavaScripts – You can execute custom JavaScripts, after every ajax page is loaded.</li>
<li>Multiple Content Selectors – You can replace multiple content parts/ selectors of your page.</li>
</ul>
<h3>Basic Usage</h3>
After activating the plugin, you have to configure the Ajax Press settings from the <code>Ajax Press > Settings</code> page.
If your theme is listed on our predefined list, then you will see an admin notice with a button to install the default settings for your theme.
If your theme is not listed on our predefined list, then you have to set the settings manually for your theme on the <code>Ajax Press > Settings</code> page. 
Generally, you have to set the main content container selectors (not header navigation) which will be replaced on every page change. You have to set the main content selector in the Main content selector input box. You can use any valid CSS selector (ID, Class) in the input box. 
Example: – <code>#content</code>, <code>#main</code> and <code>.site-content</code> etc.
<h3>Developer Tips</h3>
<ol>
<li>
The vanilla js <code>DOMContentLoaded</code> and jQuery <code>ready</code> event runs every time the ajax request is completed.
</li>
<li>
When the ajax request is start the javascript <code>pjax:send</code> event is fired. You can use this event to execute javascript at the start of the ajax request.
Example : <code>document.addEventListener('pjax:send', function(){...your codes});</code>
</li>
<li>
When the ajax request is completed the javascript <code>pjax:complete</code> event is fired. You can use this event to execute javascript when the ajax request is completed.
Example : <code>document.addEventListener('pjax:complete', function(){...your codes});</code>
</li>
<li>
Use jQuery ready event instead of the ready function to initialize your jQuery codes.
Example : <code>$(document).ready(function(){...your codes});</code>
Not: <code>$(document).ready(...your codes);</code>
</li>
</ol>

Ajax Press – Easily Enable Fast Ajax Navigation

If you need to load your site faster and without any page reloads, then Ajax Press is the right tool for you. Your site will appear faster and more im …

digitalzoomstudio

Demos – https://0.s3.envato.com/files/182575275/index.html
Setup is done in the admin page accessible from the WP Dashboard. Ajaxer Page.
If the button saying Install Default Settings for {{your_theme}}, is there , then you should click that. Those are our recommeded settings. You can change transition and preloader after.
If there is no such button, it means that your theme is not in our predefined books and require some manual adjustment. Generally, it means to primarely just set the content container and the menu selector, which we will show you how to do by explaining each setting.
Enable Ajax?
Setting this to off will disable the plugin functionality, so it’s mandatory that it’s left to ON. Use OFF only for testing purposes.
Content Selector
This is the content selector. If you have basic html knowledge, it’s easy to find out. If not, it’s no problem, we’ll explain below how to setup.
Tip! – the basic HTML / CSS selectors are . for class and # for id. 
First we need to go to our frontend and right click on a element from the content and click Inspect.
Next, the DOM tree will appear. We need to go as high as possible and look for an element that covers the content area ( in the blue area ) .
if it’s not possible to select only the content, and the header gets selected too, we can remove it from the content with the Move Menu on Top of Content option
This is the element we selected in the tree. We need to go higher.
This element looks like a good match. It covers the whole content area. In this case, we can either select it by id and input in the Content Selector field – #content . Or select it by class and input in the Content Selector field – .site-content. It will be the same outcome in this case, but in other cases only the id or only the class might be present. Generally, id is prefered.
If we go a little higher in the tree we will see that the parent element contains all of the site which is not what we want, we want only the content to load:
This should be all the setup for the Content Selector field.
Menu Selector
This is the menu selector. We follow the same steps to find it out. We inspect a item in the menu and find the highest menu parent. In this case, the twentyfifteen theme it’s #site-navigation that should be entered in this field.
Move Menu on Top of Content
If there is no way to select the container without the menu, you can use this option to place the menu on top of the content. It can work in some themes.
Transition
Choose from No Transition, Fade, Scale Down or Slide.
No Transition and Fade are direct transitions. These provide maximum compatibility.
Scale Down and Slide are more complex transitions and might not work in all themes and with all plugins.
We cannot guarentee compatibility with all 3rd party plugins. As long as the 3d party plugin is properly coded, it should work with this plugin, but otherwise it might not.
A properly coded plugin should load all their scrips via wp_enqueue functions. And it should apply functionality via a inline scripts like this format targeting a unique class :
 […] 
 jQuery(document).ready(function ($){ dzsap_init_functionality(“.ap_idx_2”,settings_ap); });
Preloader
Choose from No Preloader, Bar or Fullscreen Bars.
Extra Items to be Replaced
These selectors will be searched in the new ajax loaded content and replaced in the current page accordingly, in the same order.
Extra Items to be Added
This is similar to the .. to be Replaced setting, but the difference is that each selector will be queried in the page. If it does not exist, then the element found in the ajax content will be added to the current page. If it is found, then the contents will be replaced.
This is useful for example for a footer player outside the content, like seen in the demo.
Scripts Execute after Ajax Call ?
Select this if javascript scripts in the page should execute after the ajax call is completed. This might increase 3rd party plugins compatibility.
Scripts to Reload
these scripts will be discarded and loaded again when the new page loads
If some scripts have some special initialization inside them you can choose to have them discarded and loaded again on page load. Demo input:
scripts.min.js,owl.slider.js
These will unload and reload on page load any scripts that contain scripts.min.js or slider.js
Script Call on Page Load
javascript call on page change . – warning
Only to be modified if you know what you are doing. – might break the change. – javascript call on each page load. Example input:
jQuery(‘.carousel-wrap .carousel-items,.blog-masonry .masonry-items .blog-item’).css(‘opacity’,1);
This will unhide the elements specified in the jQuery selector.
How to Ajaxify Search Form
Ajaxer tries to ajaxify the search form by default. First try to search something, and if the search is not done ajaxified, then proceed to this simple setup.
Right click the search field, click Inspect
Then you will need to search for the form element that contains it. In this case it’s .searchform . After you found it, you can just to Ajaxer Settings and input it in the Search Form Selector field.
How to Ajaxify Comments
Ajaxer tries to ajaxify the comments form by default. First try to comment something, and if the comment is not done ajaxified, then proceed to this simple setup.
Right click the search field, click Inspect
Then you will need to search for the form element that contains it. In this case it’s .comment-form . After you found it, you can just to Ajaxer Settings and input it in the Comment Form Selector field.
Developer Tips
Note: this is for advanced users only. Changes to any topic covered here can break the portal.
Recommended Programs
You can generally use any text editing software [ like notepad ] to edit content/code but this is what I recommend:
.js, .php, .scss – phpStorm 
SASS
If you are a developer you will notice there are some .scss files included too. This is the language for a css preprocessor which makes a developer’s life easier. This is optional but if you want to try it here is the site.

DZS Ajaxer Lite – Ajaxify Your WordPress Site and Comments

nice

While this plugin is a nice attempt, I was really frustrated to see that the Javascript source code is obfuscated preventing in any way to debug it.

That's really annoying because it generates some errors after the page has been loaded and you have no way to understand what's going wrong.

More over, you're violating the GPL licence by not providing the non obfuscated source code as part of the module.

Doesn't work and source code is obfuscated

Looking to make your site links load in a better form, without page refresh ? This is the solution for you. You site will appear faster

Ajax Press – Easily Enable Fast Ajax Navigation vs DZS Ajaxer Lite – Ajaxify Your WordPress Site and Comments