Fundraising/Banner Code Overview

This page attempts to analyze our current banner code but is not yet complete. This warning will be removed when it is ready.

Introduction

This page goes into detail about the fundraising banner code itself. For a more general overview visit Fundraising/Banner documentation.

Throughout the banner code (HTML, CSS, JS) you'll encounter the frb name. This stands for fundraising banner.

HTML Structure

The top layer structure is comprised of 5 sections. These are:

1. <div class="frb-prevent-page-jump"></div>

This probably aims to prevent the page from scrolling automatically when the banner loads. Unsure as to how it's implemented exactly. Seems to be related to the scrollFunction() function found in the banner's <script> tag. Discuss further with front-end developers.

2. <div class="frb frb-in-article" id="frb-main"></div>

Hidden by default on load. It contains the main fundraising messaging. Usually this is where copy gets updated for new tests and is contained within <p> paragraph tags.

A function named shouldShowBanner() defined in CoreJS-2018.js checks whether the banner should be shown by returning a boolean value. This value is subsequently evaluated in an if statement at the bottom of the main HTML file and is finally displayed by running frb.show():

if ( frb.shouldShowBanner() ) {
    frb.initNag();
    frb.show();
}

3. <div class="frb frb-nag"></div>

Renders as a sticky element on the bottom of the screen. It appears when the main banner is no longer within the viewport.

4. <dialog id="frb-dialog-rml" class="frb frb-dialog">

An overlay modal that's positioned in the centre of the page. It appears when the reader clicks on either:

• Mayber later CTA - Main Banner
• No, but maybe later when I have more time CTA - Nag

A small form is presented where the reader can submit his email address to sign up for the [Remind Me Later] program.

5. <dialog id="frb-dialog-iad" class="frb frb-dialog">

An overlay modal that's positioned in the centre of the page. It appears when the reader clicks on the I already donated CTA (Main Banner). It gives the reader a choice to hide banners for a week or return back to the banner. Hiding the banners happens via setting a cookie on the reader's browser:

frb.HIDE_DURATION_CLOSE = 3600; // 1 hour
frb.HIDE_DURATION_RML = 604800; // 1 week
frb.HIDE_DURATION_ALREADYDONATED = 604800; // 1 week

...

frb.altSetHideCookie( 'donate close', frb.HIDE_DURATION_ALREADYDONATED );

In-file JavaScript

Everything related to the banner is handled by an object named frb. It is defined as var frb = frb || {};. An object with the same name is declared in CoreJS-2018.js (which is included usually in the banner), therefore its properties are inherited in the main HTML file.

General methods

frb.show()

Targets the <frb-in-article> sections and makes it visible.

frb.hide()

Targets any element with a class of frb and hides it.

frb.toggleMonthly()

Alters the form to switch from one-time to monthly giving. A small copy-pitch is changed and it affects the form submission.