Slider in Pop-Modal not 'sliding'

Community resources Bugs
1

@bartekkustra @thesergie @cyberdave @PixelGeek

Hi Guys sorry to bother you, Please help me to see if this problem is a bug within the slider in the DIV within the MODAL, as it works when I have the display setting as ‘BLOCK’ .When I put the ‘NONE’ on this image appears.

1440×900 456 KB

I used the code from @bartekkustra for the MODAL (THANKS)

public link - look at the page MODAL

Thanks so much, loving webflow more and more!!

2

hi @garethknott, I cannot seem to locate this modal you have setup… I tried looking for the Assets page you have in your example, but cannot find. Can you let me know exactly what page, and what is the element you have the modal trigger set to open the modal box? Thanks !

Dave

3

Hi Dave thanks for that super fast reply.

PAGE NAME (Nav Bar) = MODAL

http://sustainance.webflow.com/modal

I have left it as DISPLAY SETTINGS = BLOCK but for it to work as a pop up hidden modal It would be DISPLAY SETTINGS = NONE

Thanks @cyberdave

4

@cyberdave As you see it now it works perfectly, but as soon as you put the DSIPLAY MODE = NONE then the slider doesn’t work.

5

Hi @garethknott, I been looking at your site, the slider is not sliding, because there is a javascript error on the page, and when the javascript error occurs, then it breaks the slider script too… I am investigating this, be back to you soon.

Cheers, Dave

6

Wow thats great service, thanks @cyberdave

7

Hi @cyberdave any luck getting the code sorted out?

Thanks

Gareth

8

@bartekkustra @thesergie @cyberdave @PixelGeek

Any advice on my MODAL slider dilemma ?

Thanks so much

9

Hi @garethknott, as I mentioned to you in our support request, there was an issue with the the script, this is happening because the modal is set to display: none when the page loads, and the Slider is unable to update its layout when it is hidden.

You can fix this by adding this code just after your call to fadeIn():

Webflow.require('slider').redraw();

And it should redraw the slider before it comes into view.

I also had suggested some of the other fixes as mentioned earlier in this thread, that you had not yet implemented, so now it should be working good, please let us know. Cheers, Dave

1 Like
10

Thanks @cyberdave it works great!!

1 Like
11

Apparently, this is still an issue… (this post started 9/2014)

I have a modal window - that displays a slider.

The window / slider appears when I select a link.

However… the slider does not change images automatically

  • and you cannot manually change to the next / previous image.

As suggested… I added this:
Webflow.require(‘slider’).redraw();

Does not work :frowning:

Any update on this. I have an active project that uses this.

If I cannot get this to work… I have to seek a different solution.

12

Ok… here’s the the problem - and the fix I came up with.

The problem is… if the SLIDER’s display property is set to NONE…

  • the SLIDER cannot update the element (itself).

Because of this… the SLIDER cannot load / add additional images to the SLIDER…

  • it only loads the first image “onLoad()” (when the form loads).

    Webflow.require(‘slider’).redraw();

is suppose to force the element (SLIDER) to redraw itself

  • but I could not get it to work. Not sure why.

So what I did…

  1. Create the modal DIV
  2. Add the SLIDER into the DIV
  3. Add whatever images / set whatever properties you need for the SLIDER
  4. Class the DIV (ie: div_Modal-Images)

---- FIX STARTS HERE
5) Create an INTERACTION for the DIV (div_Modal-Images)

The only thing the INTERACTION will do is

  • change the opacity to ZERO (0) onLoad() (when the form Loads) of the DIV (div_Modal-Images).

You can do this directly in JQuery instead…

  • but then I have to explain more about jquery
  • and I’m trying to make this fix short and easy to understand.

  1. Set Properties for DIV (div_Modal-Images) - Position: FIXED FULL WINDOW, z-Index: -10

235×920 60 KB

z-index

You don’t want the SLIDER to be on top of everything…

  • if it is… it will make it difficult for you to work on your project
  • because the SLIDER will block / cover everything under it

So make z-index of the DIV (div_Modal-Images)

  • negative 10 (-10)… and it will push the DIV (div_Modal-Images) under everything else

This will make it difficult to see the forms background…

  • but at least you can see the form.

Add this code to your CUSTOM CODE - FOOTER

<script type="text/javascript">

    $(document).ready(function() {
      $('.div_Modal-Images').click(function() {
        $('.div_Modal-Images').fadeIn();

        $('.div_Modal-Images').css('z-index', 10000);        
        $('.div_Modal-Images').css({ opacity: 1 });
        
      });
    });

</script>

This line will target the SLIDERs parent DIV (div_Modal-Images)

  • and change it’s z-index from -10 to 10000

  • which will place the element “at the top” of the form.

          $('.div_Modal-Images').css('z-index', 10000);

This line will target the SLIDERs parent DIV (div_Modal-Images)

  • and change it’s opacity from 0 to 1

  • which will make it visible.

          $('.div_Modal-Images').css({ opacity: 1 });

NOTE: To make it “simpler” and less “talk”

  • I did not include a close button in the code.

You will be able to see the open the SLIDER and see images

  • you just can’t close it. Just add a link in the SLIDER and have JQUERY hide the SLIDER.
1 Like
13

I found an issue with Safari and Opacity.

Use this Custom Code instead.

And - remove the Interaction… do not use the interaction.

  <script type="text/javascript">
    $(document).ready(function() {
          $('.lnk_modal-open-photos').click(function() {
            $('.div_modal-bg-photos').css('z-index', 10000);
            $('.div_modal-bg-photos').css({ opacity: 1 });
            $('.div_modal-bg-photos').fadeIn();
          });
        $('.lnk_modal-close-photos').click(function() {
            $('.div_modal-bg-photos').css('z-index', -10);
            $('.div_modal-bg-photos').fadeOut();
        });    
    });
  </script>