Forum Documentation Showcase Pricing Learn more

JS to get page height onLoad or resize


#1

Has anyone written some JS that’ll grab the viewport height and publish that back to Bubble?

I’d find it really useful if there were a standard snippet of code I could use that would grab viewport height on load and change that number if/when a user resizes their screen.


#3

Scott, use ccstools, you get page dimensions and also available dimensions


#4

Thanks @Bubbleboy. We use CSSTools in a lot of places in our app. Super useful plugin, for sure.

That said, we’re looking to manage a bunch of more challenging element height scenarios and using CSS Tools alone doesn’t seem to address certain aspects of them. I’m curious how other people are solving for the following types of challenges:

  • Creating 2 column pages where both columns have sub-groups that collapse height and RGs that increase height, and both columns need to be the same total height when displayed to the end user.
  • Setting groups to be full height and spacing content within it appropriately (e.g., sometimes in proportion to the height, sometimes adding scroll bars to specific sections so users can quickly scroll to find additional content, etc.)
  • Adapting the height of content, etc. to the height of the user’s viewport when it increases/decreases after page-load.

So far, I’ve been trying to cobble together some custom JS to trigger when a page resizes, along with custom calculations for the height of different elements depending on page height and what’s currently visible to the user, and CSS Tools to move and resize various elements on the page. Haven’t gotten far into it yet and it’s feeling like this approach is going to be super messy to set-up, a bit off for the end user at times, and perhaps a somewhat brittle so future changes become more time consuming.

I’m sure there’s a smarter way.


#5

Scott…i assumed you’d already been using ccstools so was kinda stating the obvious. Not dissimilar to you i have a somewhat challenging need to resize stuff.

It is convoluted but simply put I set states on page load and then run condition of the page changes referencing those states… this then kicks off actions to change stuff.

Im using this to capture X & Y coordinates as percentages in a drag and drop group… which is a ‘day mare’ to manage when the page size changes …

The other option which I also use…is actually not use bubble as my frontend…I use a .php and then use the API to pull in data…to the user its seamless. But it was the only way to meet the resizing requirements


#6

I’ve encountered the issue of making a left menu the fixed height of the window and have vertical scrolling when the page is not tall enough to display the navigation elements (this currently happens in all available admin templates on the marketplace). So I built my own admin template and solved that issue with the following code using the toolbox plugin on a page load workflow:

function resize() {
    var h = window.innerHeight;
    var navHeight = h + 'px';
    $('#left-nav').css({'height':navHeight, 'overflow-y':'auto'});
}

resize();

$(window).resize(function() {
    resize();
});

I hope that is of use to you Scott or maybe others with this issue.


#7

Thanks so much for this snippet - have finally managed to solve hours of trying to achieve this result!!!


#8

@viably.co Benito quick question…thanks for sharing the js resize function…ive tested and the RG resizing works like a charm but! for some reason it will not load all the RG things…i’ve test and re-tested …started from scratch on a new page etc. Dragging the RG scroll bar does not load all the things. Strangley if i add a condiction to scroll to the last item in that RG’s things on page load they all load just dandy. just interested if you’d found that same. Is the “admin template” you mention for sale?


#9

Hi thanks for the question, I haven’t tried it with repeating groups, I’m sure so don’t go crazy testing as I’m sure you’re right that it has issues. I currently have no time to look into it further but as soon as I can I’ll post a solution.

I initially though of selling templates and plugins however my company is based in Estonia, where stripe doesn’t work so I can’t sell anything on bubbles marketplace as of yet… watch this space :slight_smile: