This is the JavaScript that I have for the main navigation on my website. When the user clicks a link the content under all Id's besides the link they choose is hidden by setting the opacity to 0. However I soon realised that links are still clickable. What edit can I make to this JavaScript to keep the opacity animation but after the animation is complete hide the content completely so links included are not visible?
JavaScript Code:
jQuery(document).ready(function() {
/* How to Handle Hashtags */
jQuery(window).hashchange(function(){
var hash = location.hash;
jQuery('a[href='+hash+']').trigger('click');
});
/* Main Navigation Clicks */
jQuery('.main-nav ul li a').click(function() {
var link = jQuery(this).attr('href').substr(1);
if ( !jQuery('section.content.show, section#' + link).is(':animated') ) {
jQuery('.main-nav ul li a').removeClass('active'); //remove active
jQuery('section.content.show').addClass('show').animate({'opacity' : 0}, {queue: false, duration: 1000,
complete: function() {
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
}
});
}
});
});
Related
Here is my code http://jsfiddle.net/sh8tmba6/1/
There is a navigation bar with years in the ul>li list. Each li has <a> tag with attribute data-menuanchor. When a user clicks on these links based on data-menuanchor the respective div must scroll to the top.
Note: Here the navigation bar must be fixed even when scrolled up or down
Here is the jquery code which I tried, but it is not working as per the requirement
('.timeline-nav li a').on('click', function (e) {
var yearID = '#' + $(this).data('menuanchor') ;
$('.historyWrapper').animate({
scrollTop: $(yearID).offset().top - $(yearID).parent().offset().top + $(yearID).parent().scrollTop()
}, {
duration: 1000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
}
});
});
Can anyone please help. Thanks in advance
I think I've been overthinking this all day long. It shouldn't be this hard...
I have a div with the main menu it's child with the submenu. My initial problem was wanting to show the submenu horizontal instead of vertial with absolute positioning on the screen so I could put it where I want it. Now I have this mess, and I think overthinking the situation has lost me on it.
I just want to separate the submenu from the parent after hovering over parent, then keep it up as long as you're on the parent or submenu, and fade it out when you leave either, putting the submenu appended back to the parent. The logo gets faded out when hovering over a parent that has a submenu, and faded back in when the submenu fades out. What its doing now is fading back in the logo pretty much no matter what, and its really buggy when hovering on submenu, along with it just plain not staying when hovering over it sometimes.
If there's a better way to position this so I don't have to go through this mess, or just a better way overall, please point it out.
<script type="text/javascript">
jQuery(document).ready(function($){
var inEle = false;
var hideTimer;
$('.sub-menu li a').css('display', 'inline-block');
// do hover on main menu
$('.uk-navbar-nav li a').hover(
function() {
// reset everything on new hover
clearTimeout(hideTimer);
// fade in the spire logo
$('.logoimgcontainer img').stop(true, true).fadeIn(2000);
inEle = true;
// save the id if there is one to hide
var subID = $('body').children('ul[class*="sub-menu"]').attr('id');
// find the ul submenu and put it back on the div in the main menu, remove the placeholder id
$('body').children('ul[class*="sub-menu"]').appendTo($(this).parent().parent().find('div[id*="'+subID+'"]')).removeAttr('id');
// fade out the ul submenu
$(this).parent().parent().find('div[id*="'+subID+'"]').find('ul').fadeOut(100);
// find the div holding the ul submenu and take out its placeholder id
$(this).parent().parent().find('div[id*="'+subID+'"]').removeAttr('id');
//show submenu
if ($(this).parent().find('div').hasClass('uk-dropdown')) {
$('.logoimgcontainer img').stop(true, true).fadeOut(150);
$(this).parent().find('div').find('ul').appendTo('body').css({
'display' : 'inline-block',
'position' : 'absolute',
'left' : '0',
'right' : '0',
'top' : '90px',
'margin' : 'auto',
'width' : '300px',
'text-align' : 'center',
'z-index' : '150'
}).attr('id', $(this).text());
$(this).parent().find('div').attr('id', $(this).text());
$(this).parent().find('div').find('ul').fadeIn(1000);
}
}, function() {
// do nothing here mkay
}
);
// do hover out on main menu
$('.uk-navbar-nav li').hover(
function() {
// do nothing here k
},function() {
// check if this item has a submenu
if ($(this).find('div').hasClass('uk-dropdown')) {
// clear out the timer
clearTimeout(hideTimer);
var aID = $(this).find('a').text();
// go ahead and set it not in sub since it hovered out here
inEle = false;
// reset the timer
hideTimer = setTimeout(function() {
// make sure its not in the submenu
if (!inEle) {
//var checkUL = $('ul[id*="'+aID+'"]');
//if (!checkUL.is(":hover")) {
// hideTimer = setTimeout(function() {
// fade in the spire logo
$('.logoimgcontainer img').stop(true, true).fadeIn(2000);
// find the ul submenu and put it back on the div in the main menu, remove the placeholder id
$('ul[id*="'+aID+'"]').appendTo('div[id*="'+aID+'"]').removeAttr('id');
// fade out the ul submenu
$(this).find('div[id*="'+aID+'"]').find('ul').fadeOut(500);
// find the div holding the ul submenu and take out its placeholder id
$(this).find('div[id*="'+aID+'"]').removeAttr('id');
//}, 1000);
}else clearTimeout(hideTimer); // still in the sub menu, clear the timer, handle in submenu
}, 1000);
}
}
);
// do hover in the submenu
$('.sub-menu').hover(
function() {
// set were in the submenu now
inEle = true;
// take out the timer for the main menu
clearTimeout(hideTimer);
}, function() {
// dont need the timeout anymore, not in submenu or main menu item
clearTimeout(hideTimer);
var ulID = $(this).attr('id');
// set were out of the submenu
inEle = false;
hideTimer = setTimeout(function() {
//var checkUL = $('.uk-navbar-nav li a:contains("'+ulID+'")');
//if (!checkUL.is(":hover")) {
if (!inEle) {
// fade in the spire logo
$('.logoimgcontainer img').stop(true, true).fadeIn(3000);
// find the ul submenu and put it back on the div in the main menu, remove the placeholder id
$('body').find('ul[id*="'+ulID+'"]').appendTo($('.uk-navbar-nav li').find('div[id*="'+ulID+'"]')).removeAttr('id');
// fade out the ul submenu
$('.uk-navbar-nav li').find('div[id*="'+ulID+'"]').find('ul').fadeOut(500);
// find the div holding the ul submenu and take out its placeholder id
$('body').find('div[id*="'+ulID+'"]').removeAttr('id');
}else clearTimeout(hideTimer); // still in the sub menu, clear the timer, handle in submenu
}, 1000);
}
);
});
</script>
I recommend going with clicks instead of hovers, because hovers don't work on mobile devices (aka touch screens). Rolling your own menu is kind of like reinventing the wheel these days. I can recommend some good bootstrap based templates that already have menus built in and they even "magically" change into hamburgers on mobile devices. However, maybe you are trying to learn and I have written some menus myself and one piece of advice on can give you is that you should use jquery and use mouseLeave instead of mouseOut. mouseOut won't even let you get to your drop down list.
Can You help me please with a one thing I can't manage?
I have used scrolling-nav.js for the top menu on my website - Interior, Exterior etc. http://lukaszradwan.com/www_architect/services.php
Now I set the offset using this code
$(window).scroll(function() {
if ($(".navbar").offset().top > 130) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 130
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
But when you click for example to Exterior, active class is not working exactly at this position.
I tried to use method form another topic, but my "js" knowledge is poor. jquery scroll, change navigation active class as the page is scrolling, relative to sections
Thanks in advance.
Right now, active class is applied only when the top offset of section is 0. You can change it to other value like 130 using jquery. Add this code:
$(window).scroll(function(){
/* Get id of sections corresponding to top nav menu */
var scroll_sections = []
$('a.page-scroll').each(function(){
scroll_sections.push($(this).attr('href'));
})
for (i in scroll_sections)
{
/* Instead of 0, if the top position offset of section is 130 or less,
we add active class for that section in nav menu */
if ($(scroll_sections[i]).position().top <= $(window).scrollTop() + 130)
{
$('nav li.active').removeClass('active');
$('nav a').eq(i).parent().addClass('active');
}
}
});
I put together a jQuery animation for a menu background. The menu has a dropdown and when you hover over the menu the animation kicks in, but the dropdown starts to act all wonky. Pretty new to jquery so not sure why this is doing that.
I added a div (menu-bg) with absolute position to change height on hover inside the menu.
Here is my javascript controlling the animation:
$('.navbar-nav >li > a').hover(
function() {
$(this).stop().next().animate({
height: "60px"
}, {
easing: "swing",
queue: true,
duration: 400
});
},
function() {
$(this).stop().next().animate({
height: "0px"
}, {
easing: "swing",
queue: true,
duration: 200
});
});
Here is a link to the site to view the actual issue, you will notice it when you hover over home.
http://bratworks.com/static
I found the following changes in your code got the job done:
Inside of init.js around line 15 remove the 200 millisecond delay from the dropdown menu fadeOut().
$(this).find('.dropdown-menu').stop(true, true).delay(0).fadeOut();
I re-wrote your hover function to target the li's instead of the a, it looked like there was some kind of conflict there:
$('.navbar-nav > li').on({
mouseenter: function() {;
$(this).find('.menu-bg').animate({ height: "60px" });
},
mouseleave: function() {
$(this).find('.menu-bg').animate({ height: "0px" });
}
});
And finally, I overwrote the CSS that was creating that 5px margin gap on the .dropdown-menu:
.dropdown-menu {
margin-top:0px!important;
}
There you go! Please let me know if you'd like me to expand on anything?
(function($){
//cache nav
var nav = $("#topNav");
//add indicator and hovers to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
//show subnav on hover
$(this).mouseenter(function() {
$(this).find("ul").stop(true,true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function() {
$(this).find("ul").stop(true,true).slideUp();
});
}
});
})(jQuery);
Following is my code which i am using for slideUp and SlideDown of submenus.but when i continues slide on menu to slide down and slide up,then menus are fluctuating.
I have observed this behaviour before and I was only able to find an adequate solution by using the jQuery UI library to do effects on hide/show.
If you include the jQuery UI library you can use the following code which might not be optimal but it does not flicker or fluctuate.
//cache nav
var nav = $("#topNav");
//add indicator and hovers to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
var $subMenu = $(this).find("ul");
//show subnav on hover
$(this).hover(
function() {
// --> this causes flicker $subMenu.stop(true,true).slideDown();
$subMenu.stop(true,true).show("slide", {direction: "up"});
},
function() {
// --> this causes flicker $subMenu.stop(true,true).slideUp();
$subMenu.stop(true,true).hide("slide", {direction: "up"});
}
);
}
});
http://jsfiddle.net/3leven11/k7akm/2/