Floating help

Adds a small help widget that can be triggered on click.

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 maiores sit accusantium sit veniam molestiae…
  </div>
  <div class="floating-help__detail" id="floating-help-ipsum">
    <h3 class="font-chain">Help for ipsum</h3>
    Omnis quas autem odio voluptas voluptas libero et voluptatem sunt id…
  </div>
  <div class="floating-help__detail" id="floating-help-dolor">
    <h3 class="font-chain">Help for dolor</h3>
    Dolorem quaerat consequatur nam quis sed reiciendis illum…
  </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()

Need some help?

Questions from this page that you might need help with:

Need some more general help with your application?

Guide to completing your UCAS application

Help for lorem

Omnis qui aspernatur iure aliquid. dicta distinctio ducimus dicta repellendus est ab commodi eos. repellendus sint consequatur et. incidunt velit aspernatur vel non ducimus in sit enim reprehenderit vero qui aut quisquam mollitia Accusamus commodi quia est accusamus. voluptatem quasi autem beatae quibusdam. temporibus sunt placeat consequatur ea tempore sequi corporis. voluptate quo qui saepe quia placeat eum quo at quia error quidem sit. dolorem ipsam magni natus nulla quam Unde dicta pariatur non natus et quos consequatur dolorem et mollitia ipsum. laborum voluptatum enim est suscipit ipsa qui consequatur corporis porro. quisquam magnam optio quia eius fugit. similique fuga placeat est est dolores et sit. soluta praesentium consequatur inventore in dolore aut dolores. facere ratione iste autem est et. et laudantium est omnis omnis minima sapiente ut excepturi labore et voluptatem et Explicabo quidem ipsum iusto expedita ex ut. autem consequatur molestias rem qui sapiente adipisci id facilis sed vero voluptatem magnam dolorem sit. dolorem magnam quisquam quaerat dolorem est aut tenetur possimus itaque. unde perspiciatis nihil libero et voluptatem non dolor dicta sunt voluptatum non sit. et et consectetur ex dolorem et qui tempora

Help for ipsum

A quia accusamus delectus mollitia sed eos qui cumque quidem omnis est repellendus inventore. id voluptatum et molestiae beatae velit sed nam et distinctio nihil quibusdam at aut. perspiciatis similique non maxime velit sunt repudiandae delectus quis sequi. sequi non et omnis culpa et voluptatem aut saepe totam autem voluptas illo. officiis aliquid veniam sunt voluptates voluptas aut eligendi ex qui doloribus occaecati. quia repudiandae fugit esse ut aut ab sapiente doloribus placeat et. eos veniam exercitationem sapiente Ut quibusdam nihil deserunt non possimus asperiores doloribus id. aliquid ducimus tempore in velit alias est deleniti excepturi. deleniti ea omnis nobis laborum minus sunt est voluptatum debitis quisquam incidunt aut qui rerum. porro molestiae voluptatum quia laboriosam tempora placeat omnis repellendus est. consequatur ut et dolore et mollitia voluptas perspiciatis qui repellat ipsam ea Non voluptas omnis aut natus ipsa ea voluptatem expedita. in quidem qui voluptatem corporis veniam. ea expedita ut qui cupiditate dolorem. asperiores ut blanditiis repellendus In assumenda consequatur sint reiciendis modi et nulla iusto blanditiis. fugit placeat recusandae architecto debitis animi qui iure voluptatem qui eum corporis sed aut. et est et autem alias voluptatem delectus consectetur voluptatem qui quis quae atque soluta. id neque quo veritatis et autem a reiciendis consectetur est odit placeat. nihil autem iure qui similique enim officia eius nemo. maiores omnis ab rerum

Help for dolor

Corporis animi praesentium eveniet veritatis ad aspernatur error occaecati ut et et ut. ipsa eum ab nihil debitis aliquid non. omnis eum eveniet excepturi nulla laudantium aut A architecto iusto et debitis unde nisi dolor voluptatem quia illum voluptates aut. deserunt laborum possimus voluptate rerum similique recusandae. sint ratione qui consequuntur officiis quis sunt hic aut similique dolores distinctio aut. provident explicabo atque earum et enim. animi ipsam est non cumque impedit voluptas Sapiente rerum non facilis dolorem illum vero harum omnis. in illum dicta modi qui ab fugit incidunt reprehenderit doloremque inventore eos ut. sit voluptates velit non necessitatibus eos et animi sit consequuntur reiciendis et. sunt velit omnis non aut iste fugiat qui neque. veniam minima quis recusandae et qui natus facere ut nobis voluptatem in Veniam quas animi quia perferendis qui voluptates in ut fuga et velit qui. rerum autem quam voluptas dolorem quaerat et eos neque sit. alias nihil debitis voluptatem eum numquam et iure