I'm using bootstrap's default navbar. I want the active page to be represented by a dark gray block dynamically upon clicking the link. I can't seem to get it to work. Here's the code I have so far. It's similar to this question except I'm trying to integrate it with Bootstrap.
Codeply went down?
New demo with edits here.
I think you want
$(".navbar-nav a").click(function() {
$(".navbar-nav > .active").removeClass("active");
$(this).parent().addClass("active");
return false;
});
Related
on my website I have a mobile menu. When I click a link a link in the menu the menu doesn't disappear.
From reading other posts I have a quite good idea what I have to do. But I don't get the code working, because I am completely new to javascript and probably just do something wrong.
The div I want to hide when clicking a link (in this same div) is defined with a class mobilemenuitems
As I already mentioned the links are within this div.
unfortunately I cannot add a class or an id to the links because I only have frontend access.
The website is here.
https://test.vereinonline.org/HTC_Uhlenhorst/?module=*Tennis Please note that the menu button only appears on mobile devices (width < 1000px)
In this jsfiddle the Problem is scaled down to the root.
http://jsfiddle.net/TheBB23/d6s3Ln50/3/
I am pretty sure that the problem is with the javascript:
document.getElementById(mobilemenuitems a).addEventListener('click', function(e) {
document.getElementById('mobilemenuitems').remove();
});
I believe you are trying to hide the div with class mobilemenuspace when any of the links inside it are clicked. To do so, you can use the following -
$('a').click(function(e){
e.preventDefault();
if ($(this).parents('.mobilemenuspace').length) {
$('.mobilemenuspace').hide();
}
});
Working sample - https://jsfiddle.net/zv18xuhL/
A pure JS solution forked from your Fiddle -
http://jsfiddle.net/e69snqjk/
Looking at Ben Kemens jquery-menu-aim, I stumbled upon an example at codepen.
This (codepen) works and allows the user time to pass from the main menu to the sub menu BUT if you move away from the menu completely the submenu still keeps showing i.e. it (the submenu) won't go away (display:none).
So, I recreated the same example at codepen on JsFiddle and changed the Javascript
from:
$(document).click(function() {
$('a.hover').removeClass('hover');
$('.popover').css('display', 'none');
}
to:
$(document).click(function() {
$('a.hover').removeClass('hover');
$('.nav ul ul').css('display', 'none');
}
Now, if you click anywhere on the web page, apart from the menu/sub menu, the sub menu disappears as it should.
Problem: The sub menu won't reappear if you hover the main menu again.
How do I solve this?
Edit: Is there an alternate jQuery / Javascript to jquery-menu aim?.
I think what you want needs enter and exit instead of activate and deactivate.
Have you read the documentation?
Here is your Fiddle Updated.
$menu.menuAim({
enter: activateSubmenu,
exit: deactivateSubmenu
});
I am relatively new to learning HTML, CSS and JavaScript. I am creating a sort of test site, just for learning purposes and have started diving in to mobile responsive websites.
I have a test site which has a mobile navigation button hidden, with a CSS media query to set the display to block and hide the normal navigation menu. I also have list items for the mobile navigation menu. To show/hide this, I've created a .toggleClass() jQuery function:
function clicktouchmenu()
{
$('#menuico').on('click touch', function()
{
var $mobmen = $(".mobilemenu");
$mobmen.toggleClass('clicked');
});
};
The above is working, but I wanted to add a .slideToggle() to the menu for effect. If I add this in underneath the .toggleClass() as $('.clicked').slideToggle(); the menu acts a bit strange, if I click on the menu icon, nothing happens, but repeatedly clicking, it seems to kick in to life and start working sliding up and down.
As I am fairly new to this, I expect I am doing this completely wrong, or over complicating something which is probably quite simple.
Try removing the clicked class and using only slideToggle() on the mobilemenu like so:
$('#menuico').on('click touch', function()
{
var $mobmen = $("#mobilemenu")
$mobmen.slideToggle();
});
I think the problem is that if the clicked class is toggling whether or not the menu is shown then it's interfering with slideToggle(). This is because the purpose of slideToggle() is to make something look like it's sliding in and out of view (aka toggling whether or not it's hidden but with an animation). So you only need one or the other but slideToggle() obviously includes the animation.
I've added a fiddle, but it's just a demo as I don't know what your HTML or CSS is like:
fiddle: https://jsfiddle.net/668mucca/3/
Link to the entry on slideToggle() in the jQuery docs for good measure: http://api.jquery.com/slidetoggle/
I'm creating a one-page website and I've found a small script for smooth scrolling and it works perfectly. But, if you leave the homepage and go to a single post or eventpage, the navigation doesn't work anymore because the anchor isn't on the existing page.
And another issue, when scrolling manually, it would be awesome if the active link could change class like it does when you click it.
Can anyone help me fix this issue? Thanks!
jQuery(document).ready(function($) {
$("#primary-menu li a").click(function(event) {
event.preventDefault();
$('#primary-menu li').removeClass('current_page_item ');
$(this).parent().addClass('current_page_item');
$('html,body').animate( { scrollTop:$(this.hash).offset().top - 68 } , 1000);
} ); } );
Trying to have my navigation have an on click and selected state, but I am not able to do so with this code (website is: http://bit.ly/rgwsite )
$('nav li a').click(function() {
$(this).parent().addClass('on').siblings().removeClass('on');
});
nav li is as follows
<nav>
<li class="highlt">
<span>Home</span>
</li>
The reason we need to use a jquery/javascript action to add the class to the navigation is because it doesn't refresh when a new page loads. For instance, when you're on the home page and click on the tab "Experience RGW", it only loads the content for that page below the header (within the "#ajax" div). Currently, none of these scripts are working. There is no reason they shouldn't... could there be something else causing the page not to recognize the jquery script and run it on-click? The main reason I ask is because I've tried to test the function and add an alert, but even that didn't work
Thanks in advance!
siblings has your current element selected, you don't want to remove his 'on' class.
$('nav li a').click(function() {
$(this).parent().siblings().removeClass('on');
$(this).parent().addClass('on');
});
edit : nvm, your code works fine : look at this jsfiddle.
re-edit : I'm totally wrong, siblings does not contain the current element.
re-re-edit : If you link to another page (href="index.php"), the page will be reloaded (or a new one will be loaded) and your JavaScript click action will be forgotten, could it be the error?
You might wanna try it like this:
$(this).parent().siblings().removeClass('on');
$(this).parent().addClass('on');
What you did is add the class "on" to the LI and then removed it with .siblings().removeClass('on');