How to trigger Overlay on page load

Try wrapping the call to the overlay in this

$(document).ready(function(){(
  // Call to overlay here without the CLICK event
)};

This should call the overlay to load as soon as the document is ready

Hey thanks I'll give it a shot.

Ok I'm finally getting around to this and I'm unable to get it to work.

The original code uses this to trigger the overlay on click:

    triggerBttn.addEventListener( 'click', toggleOverlay );
    closeBttn.addEventListener( 'click', toggleOverlay );

Now i've tried a bunch of variations to get the overlay to trigger on loading including:

$(document).ready(toggleOverlay(){(
)};

and

$(document).ready(function(){(
toggleOverlay();
)};

Clearly I'm missing something.

The reason why it doesn't work is probably because the overlay example code is wrapped inside an anonymous function and you are trying to execute the toggleOverlay from inside the $(document).ready function. The variables/functions that are declared inside the anonymous functions is only available inside that function (scope). So you would either have to add toggleOverlay(); at the the bottom of that anonymous function or you could move all the code inside the document ready function.

Hope it helps! //Jonas

Example:

(function() {

    function toggleOverlay() {
        // do stuff
    }

    triggerBttn.addEventListener( 'click', toggleOverlay );
    closeBttn.addEventListener( 'click', toggleOverlay );

    toggleOverlay();

})();

Hey thanks for you reply.

I gave it a shot and I'm still not able to get it to work but I feel like I'm one step closer now.

Appreciate the help.

No problem at all :)

Are you getting any errors in the console? Are you using the supplied demos when testing this or is it your implementation of the code? If you are not using the provided demo/sample code, are you loading the js at the bottom of the page with that anonymous function that was provided in the examples? Does the click event work? I did a quick test using the first of the demos (index.html and demo1.js) and executing the function works fine with the supplied demos/samples.

Best regards Jonas

I've added the code/demo to codepen, feel free to have a look: http://codepen.io/anon/pen/Glbpg

Ah thanks I was just about to send my code pen

http://cdpn.io/LgJpz

Is there an international symbol for face palm?

Thanks! Really appreciate it!

Hehe, we all make misstakes :)

No problem at all!