AJAX page load for Wordpress - javascript

Recently, I came across this website. There, when you click on a portfolio item, you see is a loading text which has covered the item you clicked and the page loads below the header. It doesn't even leave the page to go to the other page.
How can this be achieved. My WordPress site here, I've the look but only the ajax is left. Please help me out if you can, I really have no idea where to go from here :(
I've used the same image from this website. Just for working, will upload mine once done.

There are various plugins available on WordPress plugins repository which will ajaxify your website.
Advanced AJAX Page Loader
Ajaxify WordPress Site
Only thing you need to do is configure the plugin setting properly by specifying the ID of main page content and rest will be taken care by plugin itself.
There is also a jquery plugin available i.e PJAX which you can use and implement as per your requirements.
Hope it helps you.

Related

Swup.js + Oxygen (wp) - Not loading correct site?

I'm trying to implement Swup.js into a site in Oxygen for Wordpress. For some reason, the correct version of the site is not loaded when I use Swup.
For some reason, the correct version of the site is not loaded when I click the links. It seems to load a responsive version of the site instead. Here is the link to the page: https://testswup.kastanjeskolan.nu/ If you go to Our Services, you get one version of the page. But if you update/reload, you get the correct version. Here is a video to show what I mean.
Does anyone have any idea why this is happening?
Thanks for any help.
Swup JS only loads what's in the Swup element/Swup body. It keeps the same header or of the page for all the pages.
Oxygen builder generates CSS files for each page created. If you check page source of the Proucts page on your site, you'll see the CSS file for products page generated by Oxygen. (pointed in the image below).
Now when you move from Products page to Services page, this CSS file remains as is because it is in the section of site. And the CSS file for Services page is also not loaded because the is not refreshed, because that's how Swup works.
Solutions
Solution for this is having a single CSS file which contains all the CSS for all the pages. But not sure if that would be output by Oxygen builder.
Use the Head Plugin provided by Swup. Although not sure if it will work correctly with Oxygen Builder.

Force Hard Page Refresh on Internal Navigation Menu Items

I’ve embedded a job board from Lever on my WordPress site using the following tool:
https://andreasmb.github.io/lever-jobs-embed/
The page on which it is embedded is here:
http://1pd.aab.myftpupload.com/careers-test-3/
If you visit the link directly, it loads fine. However if you navigate to any other page on the site, then access it via the main navigation bar (Careers > Careers Test 3) the content does not load. You must refresh the page in order to see the content.
This is the embed code:
window.leverJobsOptions = {accountName: ‘geltor’, includeCss: true};https://andreasmb.github.io/lever-jobs-embed/index.js
Any help identifying the conflict and diagnosing the issue would be much appreciated. I’ve tried disabling all my plugins but to no avail.
As a quick fix, is there a way to force a hard refresh when any nav link is clicked?
Thank you!
disabled all plugins, to no avail. except the core theme plugins which are needed to run the site.
For a quick fix, did you try this?
document.location.reload(true)

Is it possible to apply countdown on my facebook page using my own JQuery code and images?

I would like post a image in the background and running timer on my facebook business page.
Is it possible to do by my own code?. Because i visit there are some website links, they are providing those kind of things example below link
https://www.powr.io/plugins/countdown-timer/standalone?id=17270232&platform=facebook
The only way i can think of is by using a Page App/Tab that´s connected to your Page. That way, you can use any code you want in the Page App iframe. Anywhere else, there can be no custom JavaScript.
More information: https://developers.facebook.com/docs/pages/tabs/
One other way would be Facebook Live Video, all the information you need can be found in the docs: https://developers.facebook.com/docs/videos/live-video/

WordPress custom theme live preview and customization is not saving current preview

I am developing a website with Wordpress. I am using gt3themes' corp theme. I have managed to customize layout of my site, but when it comes to partners and/or featured posts sections, theme's javascript is not working as expected. You can see the preview of the site. I have tried to deactivate the all of my active plugins, but it still not working. However, when i live preview my theme, it is showing the layout as expected, but when i save and publish it, it is becoming as before.
Before activation
After activation
As you can see here, in the first image, it is a live preview and, for example, Our partners section is showing only 5 partners and the rest of them are hidden. Whereas, in the second image, all partners in this section is visible, just overflow made hidden.
The same problem with Latest News and Announcements section.
I have reviewed javascript files, and cannot differentiate from theme's live demo which you can find here.
Any suggessions that can solve my problem would be highly appreciated.
Thanks.
I´m actually not really sure how we would be able to really help you without the files of the theme. Altough i just had a quick overlook between your website and the theme preview at http://www.gt3themes.com/wordpress-themes/corp/, and it seems to me you have a problem with the carousel control, that is on the right side of the partner section in the preview.
also you have more js loaded than their preview.
Looks like a typical failure of some javascript not loaded right or not loaded at all.
Also you are loading two times the jquery library in different versions, one in the header, one in the footer. Try to solve this issues.

Facebook Like And Twitter Tweet Load Slow

I have put a facebook like, facebook send, and twitter tweet button 10 times on my web page (1 for each article in my thread), but yet the page loads very slowly. Right now the site is just running on my local XAMPP stack but when I comment out those widgets, the page loads instantaneously. Otherwise it takes like 10 seconds to load.
It would be helpful to see the code to make sure you are applying it correctly, but I've experienced similar symptoms before. The way I would render it is by having the associated external Javascript files just before your </body> tag and not in your head. If the connection to the external host is slow, it can cause parallisation issues so you want to load it last.
This is happening all over the web lately. I'll see a slow-loading page and sure enough at the bottom there's a note that facebook or twitter is still loading.
The solution I found was an extension that shows the FB, Twitter buttons but doesn't actually load them unless you click the button. That way your page loads quickly and if FB or Twitter is slow that's their problem.
I use Sharrre for social sharing buttons. I activate it on mouseover so nothing is loaded until the user actually needs it. Hard to get it faster than this. It also supports a few other networks.
I don't load social sharing buttons directly anymore and only do it when there is no other option. Those things are horrible for loading times specially if used multiple times on the same page.

Categories