I would like a fixed flexbox and a scrolable flexbox

Problem:

I have a big problem with the layout and I don’t understand how to solve it with Flexboxes (which I know quite well with Figma and Elementor).

My layout is as follows:

First of all, a left column of 310 pixels width and 100% height. In this column are several elements such as navigation hyperlinks (in the slides and to the internet), logos, a copyright line, etc.

This navigation column must always be visible on the screen.

Then, there is the document page that occupies the remaining space of the slide, whose layout is complex and very long in height (between 2000 and 4000 pixels high).

So, when the user uses the scroll bar to view the information on the document page, the left-hand column must remain fixed, and must not disappear towards the top.

Is it possible to achieve this?
Can I send you my design so that you can try to modify it?

Thank you for your help.

ActivePresenter version: 9.0.7

OS: MacOS Catalina 10.15.7

Notes:

Hi Gillo,

Please take a look at the sample below and see if it meets your needs:
sample.approj (592 KB)
Here are steps to create this sample:
Responsive project:
Container Layout of slide: Direction - Horizontal
Add two Flexboxes:
Add Flexbox_1: several elements such as navigation hyperlinks (in the slides and to the internet), logos, a copyright line
Add a shape (Width: 310px)
Add Flexbox_2: the document page
Width: the remaining space of the slide
Over Flow: Auto
Add content(text caption) as FlexChild
Text Caption: Width, Height: Auto
Vertical Align: Top.

If the example does not satisfy your needs, kindly send your file to support@atomisystems.com so we can take a look and assist you better.

Regards,

I just integrated your example, and it works perfectly!
Thanks a lot.

Hello,
I’m coming back to ask you a question about this subject.
I have placed an image A in the layout I created inside this flexbox. This image appears when you use the scroll bar. So far, everything is normal, everything is OK.
Now, if it is possible, I would like to use an automatic fade-in effect, so that this image A lets appear an image B of the same size, then image A reappears, and so on.
Can Active Presenter do this?
Thanks for your help.

Hi @Gilloo,

It will be helpful if you can explain more so we can understand your idea better.
When do you want that effect to happen? Will it work when scrolling to the image?
And please correct me if I understand wrongly how the effect works. If image A disappears, image B replaces image A, so image A reappears to replace image B?

Regards,
Thuy

Basically yes. But if I may make a comparison, it’s as if I had an animated gif image, and therefore, an image that gradually proposes the appearance of another image in its place and vice versa. But as the image is large, making an animated GIF of this size would be very heavy. That’s why I was wondering if it would be possible to use the features of Active Presenter to realize this kind of effect, like using a timeline.
Did I make myself clear?

Ok, we got it, Gilloo.
Here is a sample for you:
animated image.approj (908 KB)

To create this automatic effect, we add the Execute JavaScript action to the slide On Load event.

image

Please open the project to see the entire script.
Then you can add more images or modify the effect duration by changing the information in two lines of code:

var duration = 1000; // ms
var images = ['Image_3', 'Image_4'];

Happy weekend.
Thuy