Forum Academy Marketplace Showcase Pricing Features

How to make a dynamic sticky footer

Ever tried to make a sticky footer that’s dynamic (responsive to the browser height and width), and can be easily used so that it’s either visible all the time or only on an event (like a button click)?

Here’s how!
This explanation assumes that you know how to expose the elementID input in Bubble, and a basic understanding of JS

First - you’ll need to install the Toolbox plugin
This plugin let’s you run JS during a workflow. (spoiler - this does require a bit of JS understanding)

Once you’ve installed that you’ll want to make a decision:

  1. Do you want the footer to show all the time?
  2. Are you going to use this multiple times in your app?
  3. Do you want the footer to show only when something happens?

If you want the footer to show all the time, and it’s a one-off thing
This is pretty easy.

  1. Add a floating group that will be the wrapper for your sticky footer
  2. Give that floating group an ID. In my example the id is “saveFg”
  3. Make sure the floating group is visible on page load (it is by default)
  4. Go into “workflows”
  5. Choose the “Page is loaded” option for the workflow

  1. search for “javascript”. You’ll see “Run javascript” option come up

  1. Choose that, and then we’re going to add the following code (I’ll explain what the code is doing later).

    var ph = document.documentElement.clientHeight; var pw = document.documentElement.clientWidth; var offsetHeight = ph-100; var saveGroup = document.getElementById("saveFg"); saveGroup.style.position = "fixed"; saveGroup.style.top = offsetHeight + "px"; saveGroup.style.width = pw + 'px';

That’s it! Now you’ll have a sticky footer that is responsive to your page width and height. In my case the footer is 100px tall.

If you want the footer to only sometimes
This is also pretty easy. Instead of having the JS run on page load, have it run in the action workflow (like on a button click). This way you can easily add native bubble animations, etc.

So what is the code doing? Let’s take a look…

var ph = document.documentElement.clientHeight;
var pw = document.documentElement.clientWidth;
var offsetHeight = ph-100;
var saveGroup = document.getElementById("saveFg");
saveGroup.style.position = "fixed";

saveGroup.style.top = offsetHeight + "px";
saveGroup.style.width = pw + 'px';

First line - get the height of the browser window.
var ph = document.documentElement.clientHeight;

Second line - get the width of the browser window.
var pw = document.documentElement.clientWidth;

Third line - We know that our footer (in this case) is 100px tall, so we want to subtract that from the browser window height. We already made a variable called “ph” that has the browser window height in it, so we’re just going to subtract 100 from that.
var offsetHeight = ph-100;

Fourth line - get the floating group by it’s ID. In this case the element’s ID is “saveFg”, so that’s what w’re grabbing with this line of code.
var saveGroup = document.getElementById("saveFg");

Fifth line - define how we want this positioned. There are three options usually - “fixed”, “absolute”, and “relative”. In this case we want it “fixed”.
saveGroup.style.position = "fixed";

Sixth line - tell the browser that we want this to be positioned so that the top of the sticky footer is at a location that allows the footer to be visible. We know that our footer (in this case) is 100px tall We already made a variable called “offsetHeight” that has the browser window height in it, so we’re just going to tell it to position the footer so that the top of it is at that location, and add the “px” to tell it that this number is a # of pixels.
saveGroup.style.top = offsetHeight + "px";

Seventh line - dynamically calculate the width of the sticky footer. We’ve defined a variable to get the width of the browser window (“pw”). Same thing as the line above, we’re just going to make sure the browser knows that this value is in pixels.

That’s it! Now you have a dynamic sticky footer!

2 Likes

Thanks Brian. I’ve been trying to figure out how to do this for weeks :slight_smile: Good timing!