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

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.

Related

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)

AJAX page load for Wordpress

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.

Unable to access Front page of a customized Wordpress Theme

I need help. I'm a designer not a developer. I've been asked to update the front page of a WordPress site that has a customized theme. The only problem is that I can't access the page. The developer who wrote the theme is incognito - no one can find him. The theme was built using jquery, ajax and php. I can grab the source code located on the Front page at cchwb.org through Mozilla, but the code is locked and I can't make changes. Also, I can't find the page in the Hostgagtor cPanel that reflects the code that I was able to capture. The page identified as Static in the Customize area indicates Home, but when I open it in the Dashboard it's blank. When I view it in the browser it looks like the default page rather than the Front page. Any advice?

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.

Dynamically loading html and clearing DOM

So I'm working with a few multipage Jquery Mobile documents that I want to be able to navigate between but not leave the WebView created by the mobile web app and still have the transitions. I've come across Todd Thomson's subpage widget and basically couldn't understand how to set everything up (visual learner and there are no template or demos on his github, no worries Todd if your out there).
So my question is, when you navigate from index.html to a multipage Jquery mobile document,page1.html via ajax is it possible to clear out what remains from the index.html and load the rest of the page1.html after the transition?
When you link from index.html to page1.html which is a mutli page document you need to add the attribute rel="external" to the link. This clears out the dom for you to allow linking between the multiple pages in the document via the # anchors.

Categories