Floating help

How to implement

Add a div with the classes floating-help-container wrapper between the main element and the footer element. This can remain on the page at all times without affecting the rest of the layout.

Add the help text using the markup shown below (basically a master div with any number of detail divs).

Call UCASDesignFramework.floatingHelp.init() or UCASDesignFramework.bus.publish('df.floatingHelp.init') to initialise and UCASDesignFramework.floatingHelp.destroy() or UCASDesignFramework.bus.publish('df.floatingHelp.destroy') to clean up after removing your help.

Updating existing elements with new content

The most straight-forward way is to remove the .floating-help element, call UCASDesignFramework.floatingHelp.destroy(), add the new .floating-help element and call UCASDesignFramework.floatingHelp.init().

Alternatively, you can call UCASDesignFramework.floatingHelp.closeAndReset(), update the relevant content, and then call UCASDesignFramework.floatingHelp.refresh().

<!-- START floating help component -->
<!-- NOTE TO DEVELOPERS -->
<!-- The buttons don't need to exist: they will be added by the Design Framework on init of the floatingHelp component. -->
<!-- The buttons will have events added by the Design Framework on init of the floatingHelp component. -->
<div class="floating-help" data-floating-help-trigger-label="Help" data-floating-help-back-label="Back">
  <div class="floating-help__master">
    <h2 class="font-chain">Need some help?</h2>
    <div class="content-section content-section--snug">
      <h3 class="font-foot">Questions from this page that you might need help with:</h3>
      <ul>
        <li><a href="#floating-help-lorem" class="floating-help__anchor">Help for lorem</a></li>
        <li><a href="#floating-help-ipsum" class="floating-help__anchor">Help for ipsum</a></li>
        <li><a href="#floating-help-dolor" class="floating-help__anchor">Help for dolor</a></li>
      </ul>
    </div>
    <div class="content-section content-section--snug">
      <h3 class="font-foot">Need some more general help with your application?</h3>
      <p><a href="https://www.ucas.com/undergraduate/applying-university/filling-your-ucas-undergraduate-application" target="_blank" class="ext">Guide to completing your UCAS application</a></p>
    </div>
  </div>
  <div class="floating-help__detail" id="floating-help-lorem">
    <h3 class="font-chain">Help for lorem</h3>
    Aut enim architecto voluptatem accusamus libero enim sed ut iure…
  </div>
  <div class="floating-help__detail" id="floating-help-ipsum">
    <h3 class="font-chain">Help for ipsum</h3>
    Quia quasi magni dolores quaerat quo illum et…
  </div>
  <div class="floating-help__detail" id="floating-help-dolor">
    <h3 class="font-chain">Help for dolor</h3>
    Quis et ipsam nemo officiis vel temporibus…
  </div>
</div>
<!-- END floating help component -->

Example code to test the init and destroy functions

Run the following code in the console to test.

// The following lines will remove the example help and run the destroy function.
var floatingHelp = document.querySelector('.floating-help')
floatingHelp.parentElement.removeChild(floatingHelp)
UCASDesignFramework.floatingHelp.destroy()
// These lines add the help back and run the init function.
document.querySelector('.floating-help-container').appendChild(floatingHelp)
UCASDesignFramework.floatingHelp.init()