Is it possible to make one column scrollable and another fixed.

Viola

Hi community! Could you please help me with the following:

I need to display 2 columns within a raw: one left column will display the map with the hotspot properties, and on the right column - i have to display the images of properties and description. Because I have about 20 properties, I need to scroll it to make it nice. But I want the map on the left column to stay. Here is the example:

https://evertonhomes.com/our-homes/ - This is the exact example i am trying to achieve with duda. What do you think? Is it possible? How can I do it? Please please help!!!!

THANKS A LOT!!!!

visioncraft

Hi there, @Viola!

This is indeed possible, but not with the widgets that Duda has 'out-of-the-box'. If you want to reproduce exactly what you see in the link you posted, you will need use some clever Javascript — for example, by detecting when the map reaches the top of the viewport, and then changing its position to 'fixed'. Then, when the scroll of the property list reaches the bottom, you'll change the position of the map to 'absolute' with a bottom: 0. Detecting scroll events and setting triggers relative to an element's scroll position within the viewport can be a bit tricky, but there are several Javascript libraries that can help you implement this kind of functionality quite quickly and easily (Google is your friend there).

Alternatively, if you don't have to follow the design from your link exactly, there could be other solutions that you could try. If you could use a different Design solution, you could, for example:

• present all locations on a single map, letting the visitor click on the location they want, and then showing them the info on a popup. CommonNinja has a very fancy Google Maps widget that allows you to add multiple locations and has lots of customisation. This is a good solution if the Design focus should be on the location of each listing relative to each other.
• present all locations on a list or gallery — 20 is not that many — and then display the map optionally, on a popup, when a location is clicked. This leaves more space on-screen to properly display the list entries, with more information and larger images. This is a good solution if the focus should be on each listing individual characteristics and appearance.

I hope these suggestions might help a little!

Aj_Cre8

I would use a Duda widet before an embedded script! TheCamel.co has a HotSpot widget that can display a map and popup info! If you want to achieve the results from your link, you can reach out to a Duda Expert to get some assistance on building that.