santafe
February 18, 2015, 7:42pm
1
I have no business mucking about with this js file, but thought I would try anyway.
I have added .secondary-nav to my page and discovered that it was not showing up because its appearance was controlled by a js file. That snippet is shown next in the folowing pen - http://codepen.io/anon/pen/EaEXyK
The result is that my .secondary-nav is now showing up and the .primary-nav is not. I would think that && would include both nav’s but that turned out not to be the case. What I would like to see is that both .primary-nav and .secondary-nav menus appear.
Any help will be greatly appreciated.
Thanks!
santafe
February 18, 2015, 8:17pm
2
This may be a better way to see the js.
if( $(('.primary-nav') && ('.secondary-nav')) .hasClass('is-visible') ) {
$(('.primary-nav') && ('.secondary-nav')) .removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
$('body').removeClass('overflow-hidden');
});
} else {
$(('.primary-nav') && ('.secondary-nav')) .addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
$('body').addClass('overflow-hidden');
});
}
});
I added the .secondary-nav part but that is preventing the .primary-nav from showing up.
Thanks.
PaulOB
February 18, 2015, 9:38pm
3
I think you need something like this.
if ( $('.primary-nav').hasClass('is-visible') && $('.secondary-nav').hasClass('is-visible') ) {
$('.primary-nav,.secondary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
$('body').removeClass('overflow-hidden');
});
} else {
$('.primary-nav,.secondary-nav').addClass('is-visible')
}
A working example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.primary-nav, .secondary-nav {
height:30px;
transition:all 5s ease;
}
.is-visible {
background:red;
margin:0 0 20px;
height:100px;
}
</style>
</head>
<body class="overflow-hidden">
<div class="primary-nav is-visible">Primary</div>
<div class="secondary-nav is-visible">Secondary</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
if ( $('.primary-nav').hasClass('is-visible') && $('.secondary-nav').hasClass('is-visible') ) {
$('.primary-nav,.secondary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
$('body').removeClass('overflow-hidden');
});
} else {
$('.primary-nav,.secondary-nav').addClass('is-visible')
}
</script>
</body>
</html>
santafe
February 18, 2015, 10:04pm
4
@PaulOB
Thank you so much. That was exactly what I needed.
I sincerely appreciate your help.
system
Closed
May 21, 2015, 5:09am
5
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.