Streaming live at 10am (PST)

Custom JS w/ $.hide() - webflow initialization needs timeout?


#1

Hi,

I've exported code from Webflow that has some nice sliders. The structure of my page is very simple, it's a series of

  • header
  • slider
  • header
  • slider
  • etc...

Each header-slider pair is in a separate container. I want to add some javascript such that on opening the page, the sliders are collapsed, and they can be displayed by clicking a header. This is my code:

var Webflow = Webflow || [];  
Webflow.push(function () { 
    // handler for clicking a header
    $('h1').on('click', function() {
        if ( $(this).parent().find('.slider').is(':visible') ) {
            $('.slider').slideUp();
        } else {
            $('.slider').hide();
            $(this).parent().find('.slider').slideDown();
            $('html, body').animate({
                scrollTop: ($(this).offset().top)
            },500);
        }
    });
    // initialize display: hide all sliders
    setTimeout(function() {
        $('.slider').hide()
    }, 1000);
});

Problem is in the last line: $('.slider').hide(). If I do this without timeout, the slider is screwed up: it has three bullets i.o. two, and when moving the slider, the slides end up misaligned.

So it looks like I must wait for Webflow to finish some initializations, but I assumed that the Webflow.push() would take care of this?

Thanks for sharing your ideas on how to proceed...

Vic


#2

Hi @vicmortelmans,

Since you're not using any Webflow API features, you might want to simply use a jQuery ready function. Here's a working example of your code on JSBin:

http://jsbin.com/ExucOgA/1/edit
Is this effect you're trying to achieve?

There shouldn't be a need for a timeout. If this is still giving you trouble, please provide us with a preview link to your site (either here or a direct message if you prefer).

Thanks!
-Dan


#3

Hi,

thanks for looking into this.

Here you can see the problem happening (no timeout):
http://vicmortelmans.github.io/gedenk/

And here is the timeout activated, so that's how it should be working:
https://c9.io/vicmortelmans/gedenk/workspace/index.html

Note: you have to narrow the browser window to mobile phone size!
Note: in IE10 I seem to have less chance of reproducing the problem, but I did see it. In Chrome it's consistent.

Best regards,
Vic


#4