Slider on mobile not working when loaded with display:none

Hello there!

Can please anyone help on adding some custom code to make the slider work?

The slider doesn’t work on mobile since it’s loaded with display:none property - it’s later displayed with display:block with interactions. However with this setup, will not let the slider to work.

Now I’ve received some suggestion from great Webflow support that this requires some custom code to redraw the slider. But I guess I’m not that fluent with Javascript.

Can anyone please help on this one?

Here’s a link to my project: https://preview.webflow.com/preview/moxly?utm_source=moxly&preview=b9537d87e6de8ec61c9c9fef2f2d7e0f

Here’s a link to site preview: moxly.webflow.io

[ I have a pricing table biult with sliders. Two pricing tables for two locations. At the bottom there’s a dropdown toggle to switch the location. So one of the sliders is hidden when page loads - the display is set to none. Loaded this way, it not working even when You switch to see it with display:none

Here is an image preview :

https://bit.ly/2JcjXSr
]

Thank You in advance

Is there a valid reason why you can’t have the slider displayed by default, and use the display:none property as an initial state in your interaction?

HTML needs to know about the dimensions of an element PRIOR to be able to take it into account for the dimensions of a parent. I haven’t checked your site yet but if your IX relies on changing the dimensions of the parent of the slider to an “Auto” value, that can’t work if the slider is display:none when the page loads.

If the reason why the initial state isnt used here if because the element will “flash” at load, then use another interaction to delay the apparition of the element of 100ms using Opacity.

Hi @vieckowski, thanks for the post. Those are good suggestions by @vincent, I went to look at the preview image you posted but the link is broken.

Could you take another screenshot of the Slider and location on the home page in the navigator?

1 Like

Thanks for reply @vincent and @cyberdave

Yes, i got to have the slider loaded with display:none , to be precise, this is how Geotargetly works, an app to control the content based on gealocalization. It provides Javascript to the website and requires the content it works with to be display:none than depend on geolocalization it changes one of the divs to display:block

The only interactions/javascript things going on here are changes in display property, no scaling, size interactions.

@cyberdave once again thanks for Your great support at thi one. There is only one section with sliders. I’ll attach image. It’s pricing table for two cities. Geotargetly controls to display only one depending on localization. You choose a car size snd a service plan with the sliders. Below the pricing there is a dropdown toggle to switch the city - change the display property of elements.

If I got You right earlier today, it looks like I’d need to control the toogle switching between two cities with custom Javascript and not Webflow interactions, cause a REWRITE function will be needed.

Hope this is all clear.

Can you please point us to the page, the section name, the name of the display none element and where it is, and where is the IX defined or attached?

Your site is huge :slight_smile: I didn’t find where your slider and IX were.

Hi @vincent , thank You for looking at this.

This is pricing table on Home page.

There are two pricing tables, for different localization. Each table contains two sliders - one to change cars, one to change plans.

For every pricing table there is a parent div. Geotargetly requires them both to be display:none in css, and then it chooses which one to change to block with javascript, depending on localization. The divs classes are:

geotargetlygeocontent1556608983155_default
geotargetlygeocontent1556608983155_content_1

You can find those here:

Below the sliders there is a dropdown, as a fallback, to change the visibility manually. In the dropdown there’s a trigger for interaction. You can see it here:

As the trigger is clicked, it fires the interaction which hides one div and shows another. The interactions are called show_warsaw_pricing and show_wroclaw_pricing - depending which one to show. You can see it below:

Please let me know if I can clear out anything else. I hope this is what You asked for.

Kind regards,
Simon