Fullscreen Overlay Effects

Hi Awesome work

I was wondering If is possible to have more than one button on the same page. ???

Thanks !!

I was wondering if it was possible to do without using a button, but perhaps an image as a hyper link?

I’m wanting to go to different section of in a same page from navigation option. I’ve attempt to add more button but it won’t toggle. Do you know how I can do it? This is what a currently did;

triggerBttn.addEventListener( ‘click’, toggleOverlay );
closeBttn.addEventListener( ‘click’, toggleOverlay );
portfolioBttn.addEventListener( ‘click’, toggleOverlay );
homeBttn.addEventListener( ‘click’, toggleOverlay );

the first 2 default one is working, but not the additional ones I’ve edited.Thanks very much, I love all your tutorials! 🙂

I updated this for my linkings and added the close after clicking a <a href=”” rel=”nofollow”> of the menu, and its done.

Awesome work ML, keep it up

Thanks for sharing

YO!
This is finamenalny and mega modern effect… Maintain the plug and release new updates for its ongoing work.

how play multi???
triggerBttn = document.getElementById( ‘trigger-overlay’, ‘trigger-overlay2? ),
overlay = document.querySelector( ‘div.overlay’, ‘div.overlay2? ),

dont work : |

Thanks for this, works great! Have one question/issue…

How can I use it without the classie.js file? It is conflicting with another plugin I’m using and they both won’t play nice together yet.

Thanks for the help!
Danny

Hi, anyone managed to make the overlay close on menu close? Ive tried some of the solutions but it just hasnt worked for me at all. I also tried Sean’s solution below but the function then doesnt work at all. Please help with perhaps a used and tested example. Many thanks, will pay for working solution for “close on menu click”.

Great effect. Will definitely use it!

Hi to everyone,

to make overlay close after cliking item menu, in JS:
(function() { var triggerBttn = document.getElementById( 'trigger-overlay' ), overlay = document.querySelector( 'div.overlay' ), homeBttn = overlay.querySelector( 'button.overlay-home' ); aboutBttn = overlay.querySelector( 'button.overlay-home2' ); traiteurBttn = overlay.querySelector( 'button.overlay-home3' ); snackBttn = overlay.querySelector( 'button.overlay-home4' ); contactBttn = overlay.querySelector( 'button.overlay-home5' ); closeBttn = overlay.querySelector( 'button.overlay-close' ); transEndEventNames = {.........

and at the bottom:

homeBttn.addEventListener( 'click', toggleOverlay ); aboutBttn.addEventListener( 'click', toggleOverlay ); traiteurBttn.addEventListener( 'click', toggleOverlay ); snackBttn.addEventListener( 'click', toggleOverlay ); contactBttn.addEventListener( 'click', toggleOverlay ); triggerBttn.addEventListener( 'click', toggleOverlay ); closeBttn.addEventListener( 'click', toggleOverlay );

in the HTML file the links should be like this:
<li><a href="#home"><button type="button" class="overlay-home">Home</button></a></li>

Obviously, rename the class name for each link (overlay-home2, overlay-home3…)

Redefine style as you want:
.overlay-home, .overlay-home2, .overlay-home3, .overlay-home4, .overlay-home5 { border: none; outline: none; background: none repeat scroll 0% 0% transparent; font-size: 30; font-family: Arial; }

Hope it can help.

Hi,

for Miha and those who want to disable scroll when it’s visible, here’s my way, simple but pretty efficient:
$.fn.fullpage.setKeyboardScrolling(false); $.fn.fullpage.setAllowScrolling(false); $.fn.fullpage.setMouseWheelScrolling(false);
and
$.fn.fullpage.setKeyboardScrolling(false); $.fn.fullpage.setAllowScrolling(false); $.fn.fullpage.setMouseWheelScrolling(false);

... function toggleOverlay() { if( classie.has( overlay, 'open' ) ) { $.fn.fullpage.setKeyboardScrolling(true); $.fn.fullpage.setAllowScrolling(true); $.fn.fullpage.setMouseWheelScrolling(true); classie.remove( overlay, 'open' ); ...

... else if( !classie.has( overlay, 'close' ) ) { $.fn.fullpage.setKeyboardScrolling(false); $.fn.fullpage.setAllowScrolling(false); $.fn.fullpage.setMouseWheelScrolling(false); classie.add( overlay, 'open' ); ...

I think it could help 😉

In case there still someone figure out how to make an overlay works with multiple button. Here is my code:
var triggerBttn = document.querySelectorAll( '.trigger-overlay' ); var overlay = document.querySelector( 'div.overlay' ), closeBttn = overlay.querySelector( 'a.overlay-close' ); transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], support = { transitions : Modernizr.csstransitions }; function toggleOverlay() { if( classie.has( overlay, 'open' ) ) { classie.remove( overlay, 'open' ); classie.add( overlay, 'close' ); var onEndTransitionFn = function( ev ) { if( support.transitions ) { if( ev.propertyName !== 'visibility' ) return; this.removeEventListener( transEndEventName, onEndTransitionFn ); } classie.remove( overlay, 'close' ); }; if( support.transitions ) { overlay.addEventListener( transEndEventName, onEndTransitionFn ); } else { onEndTransitionFn(); } } else if( !classie.has( overlay, 'close' ) ) { classie.add( overlay, 'open' ); } } var i; for (i = 0; i < triggerBttn.length; i++) { triggerBttn[i].addEventListener( 'click', toggleOverlay ); } closeBttn.addEventListener( 'click', toggleOverlay );

I’ve been trying to adapt this to use with my WordPress portfolio. Obviously this will require opening numerous instances of the window from different links in my grid. I’ve tried replacing the demo1.js code with the examples given above but nothing pops up at all when I do that. Help? Pretty please? I’m soooooo close!

This is really great! I’m having one problem and I haven’t seen any solutions in the comment section yet. When you hit the back arrow on Safari and Firefox browsers it returns the user to the opened overlay menu. I would like it to close once a user hits clicks their desired navigation link. On Chrome that overlay is removed and it works perfectly. Does anybody know how I might remedy this? Thanks for any help.

Hi,

Amazing plugin, but really struggling with the close on click stuff. I, like others, want the menu to close when a menu item is clicked, makes total sense really.

I’m not a massive java programmer so please in any answer place the full script and not assume i know a) where it goes, b) the main tags if different etc !

Thanks and can’t wait to roll this out.

i’m not very experienced with javascript, but here’s how i made the links close the overlay:

since the navigation is a list, i gave my navigation an id “nav” and added the following lines of code to the “demo.js” file:

add this above line 4:
list = overlay.querySelector("nav").getElementsByTagName("li"),

and this below the line closeBttn.addEventListener( ‘click’, toggleOverlay ); line:

for (i = 0, len = list.length; i < len; i++){ list[i].addEventListener( 'click', toggleOverlay ); }