I have a menu that slides out from the left. I want it so that when a link in the menu is clicked, the menu slides away and then the link is followed. The code below makes the menu slide away, but for some reason the link is ignored and not followed. How can I change this to also follow the link?
// close menu when links in menu are clicked
$(document).ready(function () {
$("#menu-subcat > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}
$("#nav-slider").addClass("closed-slide");
$("#nav-slider").removeClass("open-slide");
});
});
You are telling the link not to trigger its default action with this code:
e.preventDefault();
You can remove this (and the surrounding if-statement) or adjust your code so that the link will be followed once your closing animation is done.
Related
I want if someone clicks the navigation link "Mediengestaltung" (see picture) that he is scrolling to an anchor and additionally auto-click another id, in this example #design. Question is regarding this site: https://bm-translations.de/km.php within the navigation
I tried this, but its crashing the site:
Mediengestaltung
#button id which is set to the link. #design id which is set to the anchor. .carousel-selector-1 class to click on to switch to the desired slide
$('#button').on('click', function() {
var anchorTag = $("#design");
$('html,body').animate({scrollTop: anchorTag.offset().top},'slow');
$('.carousel-selector-1').click();
return false;
});
I have my own drop down navigation working, so when a user clicks on one of the links a page overlay will appear. I just need when they click again the page overlay removes.
Here is my code to add the overlay
$('#nav li a').on('click', function(){
$('#page-overlay').addClass('active').siblings().removeClass('active');
});
And a working DEMO is here - http://dsm.fishtankcreative.co.uk/
I just need help for when a user clicks off the navigation the page overlay class disappear.
Thanks in advanced.
Use toggleClass()
$('#nav li a').on('click', function(){
$('#page-overlay').toggleClass('active').siblings().removeClass('active');
});
Note: I don't think there is a need to use .siblings().removeClass('active'), as you are not adding the active class to any other elements
The navbar on the right collapses when the window is resized, but when I click the toggle button the menu appears. When I click any link, the bar doesn´t "un-toggle"... Can anybody help me?
Site here
Having the menu collapse when a link is clicked is not the default functionality of the expand/collapse menu with bootstrap. If you want it to function that way, you have to bind the hide function .collapse('hide') to the click action for those links.
You can do so by including this:
jQuery(function($){
$('.navbar-default .navbar-nav > li > a').click(function() {
$('.navbar-default .navbar-collapse').collapse('hide')
});
});
What I am trying to do
Close a div with a secondary button and mimicking the slideDown script from the first button.
The problem
Once the footer button is pressed it displays my hidden div (#footerPanel) by pushing the header up. Once you click footer again it closes the panel and slides the header back into place.
The menu button will work as follow, once you hover over the button the site navigation will display (not included in JSFiddle). By having this I would like to have the ability to close the #footerPanel and have the header slide down, mimicking the close ability from the footer button.
What is happening now is, when I click menu the #footerPanel slides down but leaving the header stuck at the position where the div pushed it. Also when you move the mouse the div slides back up.
How can I go about fixing this issue? I tried a few solution but they all seem to have the same outcome.
The js
$('#more').toggle(function(){
//show its submenu
$('#footerPanel').slideDown(500);
$(this).parent().parent().animate({'bottom': "+=400"}, 500);
},
function () {
//hide its submenu
$('#footerPanel').slideUp(500);
$(this).parent().parent().animate({'bottom': "-=400"}, 500);
});
$(document).ready(function(){
$('#menu').hover(function(){
$("#footerPanel").slideToggle();
});
});
JSFiddle
Updated Fiddle: http://jsfiddle.net/9s33F/5/
I think I have what you are looking for. I added the following as a callback for when the animate function completes when opening the menu.
function () {
$(this).addClass('open');
}
Then in the click handler for menu add the following if statement:
if ($(this).closest('header').is('.open')) {
$('header').animate({'bottom': "-=400"});
}
Also, you're code will look cleaner and be less if you used .closest() rather than .parent().parent() and so on.
jQuery.closest: http://api.jquery.com/closest/
The following code is normally wrapped in an if statement to check if the browser is on a mobile device and if so then when you click on the main menu link it stops the href, hides the current nav bar links, then adds a new one. This allows for the drop menu to stay dropped and you can click on the main menu link again so that the href works. The problem is that you can only do this one time. After the first click and the javascript:void(0) is run and the links are updated I cannot stop the href from going to its original location. I need the javascript:void(0) to run on the first click of link each time and on the second click of the link redirect you to the respective page.
$(document).ready(function(){
$('.mobile-device > a').click(function(){
$(this).attr('href', 'javascript:void(0)');
});
});
$(document).ready(function(){
$('.mobile-device > a').click(function(){
$('.testing-a').css('display','block');
$('.testing-this').css('display','none')
});
});
Use preventDefault() in such scenario.
Example ::
$('.mobile-device > a').click(function(evt){
evt.preventDefault();
$(this).attr('href', 'javascript:void(0)');
});