AJAX Transitions

Note: You need to use any web-server to make AJAX transitions work. Otherwise you will get errors like this:

 "Access to XMLHttpRequest at '...' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

The template is powered by smooth AJAX transitions thanks to Barba.js plugin. Here is the correct markup for all the template pages:

<body data-barba="wrapper">
  ...
  <main data-barba="container" data-barba-namespace="dark">
    ...
  </main>
  ...
</body>

Everything outside Barba container [data-barba=”container”] will remain unchanged from page to page. This could be page header and page scripts.

There is a namespace attribute [data-barba-namespace=”dark”] where you should specify the main color of the page. This will affect header color when transitioning from page to page. It’s useful when you have mixed dark & light pages to make sure the header has enough contrast on the loaded page.

To turn off AJAX transitions, simply remove [data-barba=”wrapper”] from body tag.

<body>
  ...
</body>

3rd-party scripts AJAX compatibility

When extending the template functionality with a JavaScript plugin that’s not included to the package, you may run into an issue. Your plugin may work good after the initial site load. But when it comes to any AJAX transition it doesn’t initialize. This is an expected behavior due to the nature of AJAX technology. All the 3rd-party scripts you need to re-init manually each time an AJAX transition occurs.

You can do this by placing the initialization code of your plugin inside initComponents() function wrapper in HTML/js/components.js file:

function initComponents($scope = $document) {

  new SmoothScroll();
  lazyLoad($scope);
  new Parallax($scope);
  new Grid();
  new Form();
  new SliderImages($scope);
  new SliderTestimonials($scope);
  new AsideCounters($scope);
  new GMap($scope);
  new SectionMasthead($scope);
  new SectionContent($scope);
  new SectionIntro($scope);
  new SectionTextSlider($scope);
  new SectionHeadingsSlider($scope);
  new SectionHalfScreenSlider($scope)
  new SectionNavProjects($scope)
  new SectionComposition($scope);
  new FigurePortfolio($scope);
  $('.js-video').magnificPopup();

  // your custom plugin init here

}

initComponents() function is called each time a new page is loaded (normal or AJAX way).

AJAX-compatible scripts

Some of the popular scripts are already AJAX-compatible with Rubenz template. It means that you don’t have to write any additional functions to make them work flawlessly. Those include:

  • Google Analytics
  • Facebook Pixel
  • Yandex.Metrika

If you need to fine tune those ad tracking update functions, please take a look PJAXUpdateTrackers() function in HTML/js/components.js file.