Stacks4Stacks

FloatingContent is more advanced than the free Sticky stack, but doesn't contain as many triggering / toggle options as the full-blown Gateway stack does. It's a pleasantly simple stack for the majority of RapidWeaver users, with just enough settings to accomplish all the basics. The animated 'following' behaviour is a particularly nice feature of this stack and lends itself well towards the presentation of short messages.

Floating containers can present presentational display issues on smaller screens; where space can be at a tight premium. FloatingContent already has this sorted for you! Some quick options permit you to toggle-off the display of FloatingContent stacks on smaller screens (like smartphones). Alternatively, the new 'dismissible' options let users close FloatingContent; and it will remain hidden for a definable period of time, with the aid of a small and harmless tracking cookie.

As you can imagine, FloatingContent has loads of potential uses in many websites. It's an excellent value stack which you can use time and time again for either temporary messages or more permanent fixtures. A variety of basic stacks can be placed within FloatingContent. All positioning can be adjusted in the settings. Advanced users will be able to use CSS code to modify the appearance even further. FloatingContent requires Stacks 3 or above.

Example

You can see a basic working example of FloatingContent on this webpage. When you scroll the page up and down, you will see the FloatingContent message box follows you. If you dismiss FloatingContent and reload the page, you'll see it remembers to stay hidden! To bring it back again, click this button to clear the cookie and reload the page:

Reset FloatingContent

Setup

FloatingContent is easy to get working in most webpages. In essence you can follow these steps:

1. Once installed into Stacks and RapidWeaver, open your Stacks Library (on a Stacks page type)
2. Drag and drop a copy of FloatingContent into the webpage
3. Within the main FloatingContent container, drag and drop one or more basic stack types, like styled text. Padding or margins can be applied to the stacks you drop into FloatingContent
4. Keep the FloatingContent stack selected in edit mode to access its customisable settings. Change anything else required
5. Preview the page to see FloatingContent appear. On longer pages, it will follow you when the page is scrolled
6. Publish or export your website when done

Always carefully test your FloatingContent stacks on different screen sizes; to ensure they do not inadvertently obscure important website content underneath (like navigation links or body content). Making FloatingContent stacks dismissible (closable) can help resolve such issues.

With some care, it may be feasible to use multiple FloatingContent stacks on the same page. However you will need to carefully test to ensure they don't clash with each other. This includes positioning on different screen sizes too. If you need to include the same FloatingContent stack on multiple webpages, you can do so by setting it as a Partial in Stacks 3.

Making FloatingContent dismissible

The idea behind this feature in FloatingContent is to let end users close the FloatingContent stack when they've finished viewing. To prevent FloatingContent reappearing immediately when the page is reloaded, a small tracking cookie is created on the users computer, when the close button is pressed. When the page loads, FloatingContent can look for this tracking cookie. Based on what FloatingContent finds, it can either hide or display the content. The tracking cookie duration is determined in 'minutes'. Obviously if you want FloatingContent to be dismissible but you want it shown each time, simply set the tracking length time to '0'.

The Font Awesome icon design and button colour can be customised within the FloatingContent settings. When the close button is enabled, it will be displayed at the top right of FloatingContent, and content within FloatingContent is pushed-down by 35px to avoid interfering with the button.

Any custom button or link with a class attribute of floatingContentClose can also be used to dismiss FloatingContent stacks, while dismissible behaviour is active in the stack settings.

Tracking cookies can be deleted at any time in the browser console. To create a link or button in a webpage to cancel tracking cookies you can use a specially coded HTML button like this:

<a href="#" class="btn btn-primary resetFloatingContent">Reset FloatingContent</a>