Setting a group to be % of viewport height dynamically

“release” the scroll

Blockquote

Remove this
; $(“.main-page”).css(“height”,“100vh”)

you could say css(“height”,“auto”) as well.

4 Likes

Hi guys,

I’m not able to find this JavaScript Toolkit Plugin, is it still online somewhere?

Is this solution still the best solution for dynamic sizing?

Seems to work for me @lorenzo. Plugins “Toolbox” or “Plug Bubble” both worked to the same effect.

I tried this with a popup (reusable element) but couldn’t make it work. Anything I need to consider? What I want to achieve is a full screen slide show.

Is there a way to vertically center the content in that full-height group?

FYI, I found a way, but it is a dirty one. I would be glad if someone can share a more elegant manner to do this (especially, one that would allow having a fixed height for the vertically centered element).

In the editor, I set up everything at the top like this:

The white group was the group I wanted #vertically-extended and the red element was a button I wanted to get #vertically-centered (I just wanted a text but I used a button because it keeps the text inside vertically centered when it is dynamically resized, unlike a text element).

I directly exposed the IDs of all elements in the app Settings so I didn’t have to add any HTML element in the groups I wanted to modify but simply to specify the relevant ID at the bottom of the contextual element menu of each element.

Here is the JS run upon loading:

$(document).ready(function(){
$(“.main-page”).css(“height”,“100vh”);
$(“#vertically-extended”).css(“height”,“100vh”);
$(“#vertically-centered”).css(“height”,“10vh”);
$(“#vertically-centered”).css(“margin-top”,“45vh”);
});

I defined a relative height (10vh) for the red element and a corresponding top margin (45vh) to get everything perfectly centered. I could not find a way to define the margin in a manner that would work with a fixed height for the red element (“auto”, “middle”, “50%”, etc. did not work). I guess this is an easy one for the JS experts out there :slight_smile:

The result:

Here is the link to the editor:

Edit: finally found the way to have a fixed-height element vertically centered (need to position the element 50% down from the top of the viewport and then move it back up by 50% of its own height):

$(document).ready(function(){
$(“.main-page”).css(“height”,“100vh”);
$(“#vertically-extended”).css(“height”,“100vh”);
$(“#vertically-centered”).css(“top”,“50vh”);
$(“#vertically-centered”).css(“transform”,“translateY(-50%)”);
});

5 Likes

@Lucien @brian1

Dear Both,

Would there be a way to have a Bubble group (or element) anchored to the bottom on the page while not to allow this group to go up beyond other groups above?

This would be useful in case (like mine) where a page is not tall enough for a fixed footer while if I use floating group then it will look good on a PC while floating group will go over the content on mobile devises.

Perhaps, there is a way to capture screen hight? Then we will be able to show and hide groups and floating groups as necessary depending of screen height?

Thanks in advance.

Alex

Hi, @funwtp.

Here is a way to obtain the viewport’s height:

1 Like

Thank you very much!

All works perfectly well - I now can show/hide fixed and floating groups depending on screen height.

Thanks for sharing this!

I’m having the same trouble @AliFarahat mentioned… I’d like to use this as a way to showcase a few divs down a page. Anyway to make them stack rather than overlap?

How do I allow the page to scroll when using that?

Thanks to all that have helped with this very useful thread!

How would you go about doing something like this:
Three groups stacked on top of one another.
Group 1 height is 100vh
Group 2 y position starts where Group 1 ends
Group 2’s height is also 100vh
Group 3 y starts where group 2 ends
Group 3’s height is also 100vh

Much thanks!

And I assume you’ll need to release the scroll as mentioned above.

1 Like

I have a very similar problem. How would you solve this?

@khabazkameel + @jason1 + @hi1, here is a method that does the trick.

The setup:

JS on page load:

$(document).ready(function(){ 
$("#white-1").css("height","100vh"); 
$("#yellow-2").css("transform","translateY(100vh)");
$("#yellow-2").css("height","100vh");
$("#main-page").css("height","200vh");
});

JS on page resize:

<script> $(window).resize(function(){ $(".main-page").css("height","200vh"); }); </script>

Page:

https://testingenvironment.bubbleapps.io/version-test/full-height-sections?debug_mode=true

Editor:

4 Likes

Many thanks to all of you. @Lucien, you helped me get over a hurdle that I couldn’t figure out by myself!

Okay, I’ve made a simple demo of a three-group page. Each group is 100vh.
https://forum_app.bubbleapps.io/version-test/100vh

I had a floating group on the bottom with three buttons: Scroll To A, Scroll To B, Scroll To C. On the desktop browser it worked beautifully, scrolling the user to each group as needed with the press of a button. On my iPhone, however, it didn’t work the same. If anybody has a solution for adding a simple navigation floating group on top or bottom, that’d be very appreciated!

1 Like

Something I hadn’t tested is that when you resize the width of the page it’s breaking the whole thing :confused:

I tried to handle the vw (viewport width) but without success so far. Any knowledgeable JS Bubbler who could help us out?

Thank you!

Try running the javascript on a timer like “Do every 1 seconds” instead of on page load. Seems to do the trick, but i don’t know if running the script over and over is hurting performance.

Hey Bubblers,
for those who want an easier solution to this plus the option to change not only the height but also the width of any Bubble element dynamically we have published a plugin.
Check it out here Dynamic Height and Width of Bubble Elements - New Plugin from Zeroqode

Thanks,
Levon Terteryan
Founder @ Zeroqode & Bubblewits

zeroqode-for-web-160x120

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

2 Likes

@levon Can your plugin only dynamically change the height or will it always change the width as well?