Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
David Burnett
34 PointsHow to close jquery overlay with a click on any link
Hello - first time posting a question here. I am trying to use a jQuery overlay effect for a mobile-only navigation effect. I can get it to open, but I need to have it close when any link is clicked, not just by clicking the X close button.
Here's a code pen: http://codepen.io/anon/pen/sljEc
To see the link for the overlay, you'll have to shrink your window to a small size and the mobile menu scheme will appear.
This is the original source of the overlay effect: http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/
There is a suggested solution in the comments there:
** Above ” triggerBttn.addEventListener( ‘click’, toggleOverlay ); ” at the bottom of the .js file I added: $(“#home, #work, #about, #staff, #contact”).click(function(){ toggleOverlay(); }) —– Add the id to your links: a href=”#home” id=”home” a href=”#work” id=”work” **
But when I add any variation of that to the overlay.js file it breaks the whole function and the overlay won't occur at all.
Thank you for the help in advance.
2 Answers
David Burnett
34 PointsOK forget the code pen, here's a live dev link: http://daveburnettmusic.com/dev/
Thanks for the help in advance!
Jason Anello
Courses Plus Student 94,610 PointsI'm getting a database connection error message when viewing this link.
David Burnett
34 PointsHey Jason thanks for replying. I think the code pen works now http://codepen.io/anon/pen/sljEc
Basically here's the html
<div class="cbp-af-header">
<div class="cbp-af-inner">
<div class="head_logo"></div>
<nav>
<class id="trigger-overlay"><a href="#" id="open">Menu</a></div>
</nav>
</div>
</div>
<!-- open/close -->
<div class="overlay overlay-hugeinc">
<nav>
<ul id="small" class="filters">
<button type="button" class="overlay-close">Close</button>
<li><a href="#" data-filter="*">Everything</a></li>
<li><a href='#' data-filter='.blog'>Blog</a></li>
<li><a href='#' data-filter='.commercial'>Commercial</a></li>
<li><a href='#' data-filter='.film'>Film</a></li>
<li><a href='#' data-filter='.music'>Music</a></li>
<li><a href='#' data-filter='.photos'>Photos</a></li>
<li><a href='#' data-filter='.uncategorized'>Uncategorized</a></li>
<li><a href='#' data-filter='.video'>Video</a></li>
</ul>
</nav>
</div>
and here's the javascript
(function() {
var triggerBttn = document.getElementById( 'trigger-overlay' ),
overlay = document.querySelector( 'div.overlay' ),
closeBttn = overlay.querySelector( 'button.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' );
}
}
triggerBttn.addEventListener( 'click', toggleOverlay );
closeBttn.addEventListener( 'click', toggleOverlay );
})();
When I try to do the recommended fix, it breaks the function and the menu doesn't pop up at all. The fix is apparently this:
If anyone wants to know how to implement ‘closing the overlay on clicking any navigation menu item’ please do the following: Simply use toggleOverlay() function. For example, by adding the following code in JS:
$('.your_selector').click(function(){
toggleOverlay();
})
Obviously, ‘.your_selector’ should be a selector (class) targeting the navigation menu link (anchor tag) on which user clicks to hide overlay. Simple and sweet!
Jason Anello
Courses Plus Student 94,610 PointsHi David,
The codepen demo still isn't working for me.
I noticed a few html problems that you have.
<class id="trigger-overlay"><a href="#" id="open">Menu</a></div>
class should be div
<ul id="small" class="filters">
<button type="button" class="overlay-close">Close</button>
A <button> element can't be a direct child of a <ul>. This would be invalid html that wouldn't pass the w3c validator. i would move the button outside the nav since it's really part of the UI for the overlay and not part of the navigation.
The links that are in that nav, "Everything, Blog, commercial, etc.." Are these the links that when clicked should do the same thing as the close button?
If I understand it correctly, you're using isotope to filter some items and when clicking one of those filter links you want the overlay to close and then the isotope filtering will take place?
Can you show me what code you've tried to use that is based on the recommended fix that you posted?
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsIn your codepen demo I don't think I'm seeing the mobile menu. Are you supposed to be able to click "menu" and a menu comes up?
Perhaps post what you've been trying that breaks the function.