Rubenz

# AJAX Transitions

The template is powered by seamless AJAX transitions thanks to the Barba.js (opens new window) plugin.

WARNING

You need to use a web server to make AJAX transitions work. If you open the template files locally via the filesystem, you may get a browser console error like this one:

"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."

# Markup

<body data-barba="wrapper">
  ...
  <main data-barba="container" data-barba-namespace="dark">
    ...
  </main>
  ...
</body>
  • Everything outside the Barba container with the data-barba="container" attribute will remain unchanged when navigating the website. This could be a 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 the header color when transitioning from page to page. It’s useful when you have mixed dark & light pages to ensure the header has enough contrast on the loaded page.
  • To turn off AJAX transitions, remove the attribute data-barba="wrapper" from the div container. Or simply unwrap everything from this container since it doesn't create any styling in the document.

# Excluding Rules

If you don't want specific links to trigger AJAX transitions, here are the options.

Add the data-barba-prevent attribute to the link you want to act as a normal link:

<a
  href="/downloads/somefile.zip"
  data-barba-prevent="self"
>
  Download File
</a>

Add an outer wrapper with the data-barba-prevent="all" attribute for all the links you want to act as normal links:

<div data-barba-prevent="all">
  <a href="/downloads/somefile1.zip">Download File 1</a>
  <a href="/downloads/somefile2.zip">Download File 2</a>
  <a href="/downloads/somefile3.zip">Download File 3</a>
</div>
# Option 3. Add jQuery selectors to the prevent rules

This option is useful if you don't want to change the HTML markup.

<a href="#" class="my-link-class">Link 1</a>
<a href="#" id="my-link-id">Link 2</a>

# 3rd-party Scripts Compatibility

When extending the template functionality with a JavaScript plugin that’s not included in the package, you may run into an issue. Your plugin may work well after the initial site load, but when it comes to any AJAX transition, it doesn’t initialize again. This is expected behavior due to the nature of AJAX technology.

All the 3rd-party scripts need to be re-initialized manually each time an AJAX transition occurs. You can do this by placing the initialization code of your plugin inside the initComponents() function wrapper in 📄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

}

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

# Ad Trackers Compatibility

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

  • Google Analytics
  • Facebook Pixel
  • Yandex.Metrika

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

function PJAXUpdateTrackers() {

  updateGA();
  updateFBPixel();
  updateYaMetrika();

  /**
   * Google Analytics
   */
  function updateGA() {

    if (typeof gtag === 'function') {

      if (window.gaData && Object.keys(window.gaData)[0] !== 'undefined') {

        var
          trackingID = Object.keys(window.gaData)[0],
          pageRelativePath = (window.location.href).replace(location.origin, '');

        gtag('js', new Date());
        gtag('config', trackingID, {
          'page_title': document.title,
          'page_path': pageRelativePath
        });

      }

    }

  }

  /**
   * Facebook Pixel
   */
  function updateFBPixel() {

    if (typeof fbq === 'function') {
      fbq('track', 'PageView');
    }

  }

  /**
   * Yandex Metrika
   */
  function updateYaMetrika() {

    if (typeof ym === 'function') {

      var trackingID = getYmTrackingNumber();

      ym(trackingID, 'hit', window.location.href, {
        title: document.title
      });

    }

    function getYmTrackingNumber() {

      if (typeof window.Ya !== 'undefined' && typeof window.Ya.Metrika2) {
        return window.Ya.Metrika2.counters()[0].id || null;
      }

      if (typeof window.Ya !== 'undefined' && typeof window.Ya.Metrika) {
        return window.Ya.Metrika.counters()[0].id || null;
      }

      return null;

    }

  }

}

← Projects Backgrounds →