I am having a problem getting the active class to change when next page is clicked. I have tried numerous different variations of scripts that I found on here, but haven't had any luck getting any to work. My project is located here: http://criminallawyerhuntsville.com/proof/.
<script>
$('.navbar-right li').click(function(e) {
$('.navbar-right li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
</script>
</head>
<body>
<div id="wrapper">
<header id="header" style="backface-visibility: hidden; transition: -webkit-transform 0.25s ease-in-out;">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/robertsonlogo.png" height="50px"></a>
</div>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Domestic Violence</li>
<li>Drug Crime</li>
</ul>
</div>
</div>
</nav>
</header>
Your using jQuery with no $(document).ready() ? change your code to the following for it to even trigger then check the console for errors if any.
<script>
$(document).ready(function(){
$('.navbar-right li').click(function(e) {
$('.navbar-right li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
});
</script>
If you use prevent default you want to prevent the anchor tag to work, so the click have to be on it
This example is if your active class is on the li and not the anchor:
$('.navbar-right li a').click(function(e) {
$('.navbar-right li.active').removeClass('active');
if (!$(this).parent().hasClass('active')) {
$(this).parent().addClass('active');
}
e.preventDefault();
});
as tried here: https://jsfiddle.net/xhgwjxku/
Related
Okay so my HTML for the navbar is here(I m using boostrap Nav)
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="MyNav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#featured"><h1>Wisdom <span class="subhead">Pet Medicine</span></h1></a>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right" id="collapse">
<li class="active">Home</li>
<li>Mission</li>
<li>Services</li>
<li>Staff</li>
<li>Testimonials</li>
</ul>
</div>
</div>
</nav>
</header>
The javascript(JQuery) code is here,
$('.navbar-fixed-top').on('activate.bs.scrollspy',function(){
var current= $(this).find('#MyNav li .active a').attr('href');
if(current !== '#featured'){
$('header nav').addClass('inbody');
}
else{
$('header nav').removeClass('inbody');
}
});
Now, the problem is that, whenever i scroll down to a section, the ACTIVE class changes to a different li tag and so the inbody class gets attached to the <nav> element, following the IFCondition. But when i scroll back up the inbody class is not getting removed as per the ELSE condition. Need help.
You have an extra space in selector for li.active
Change:
var current= $(this).find('#MyNav li .active a').attr('href');
^^ // extra space
To
var current= $(this).find('#MyNav li.active a').attr('href');
Your version looks for an active class inside the <li> not an <li> that has that class
What #charlietfl said is correct. However a better solution might be to use the event target instead:
$('.navbar-fixed-top').on('activate.bs.scrollspy',function(ev){
var current = $(ev.target).find('a').attr('href');
...
});
There were two issues with this line of code:
var current= $(this).find('#MyNav li .active a').attr('href');
Your initial select $(this) will be your nav element. You then use .find() which searches for all descendants of the nav element. #MyNav isn't a descendant (its the same element) so the find function won't return anything.
The second issue is "li .active" which will look for elements with the active class that are a descendant of an li element. But you want li elements that have the class "active". In order to get that, don't include a space between them.
The line should look like this:
var current= $(this).find('li.active a').attr('href');
<script>
$(document).ready(function(){
$('body').scrollspy({target: "#navbar", offset: 50});
$("#myNavbar a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top
}, 2150, function(){
});
});
});
</script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><h5><b>Home</b></h5></li>
<li><h5><b>other</b></h5></li>
<li><h5><b>other2</b></h5></li>
<li><h5><b>other3</b></h5></li>
</ul>
<div id="social_nav">
<ul class="nav navbar-nav navbar-right">
<li><span class="fa fa-pinterest-square fa-2x"></span></li>
<li><span class="fa fa-instagram fa-2x"></span></li>
<li><span class="fa fa-facebook-square fa-2x"></span></li>
</ul>
</div>
</div>
</div>
</nav>
Hi,
I have a bootstrap nav with scrollspy moving smoothly between sections on the page.
This uses event.preventDefault(); to stop the page jumping about and is fine. However i have a second part of the nav with social media icons that need to link to a webpage, and these are also stopped from working by event.preventDefault();
Is there a was of stopping event.preventDefault(); for the social media icons but leaving it for the other page nav items please.
Bit of web diy noob so maybe this is easy, but I'm foxed.
You can just exclude the social icons from the event handler
$("#myNavbar a").not('#social_nav a').on('click', function(event) {
event.preventDefault();
var hash = this.hash;
....
});
Should do it, there's no reason to scroll to those icons when clicked, as they redirect anyway.
The preventDefault is stopping the links from executing their default behavior, in this case going to the linked URL. It's a bit of a hacky solution, but you could add a class (social-link in the example) to any links in the navbar that need to go to a real URL, then restore that behavior in your JavaScript:
$(document).ready(function(){
$('body').scrollspy({target: "#navbar", offset: 50});
$("#myNavbar a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
if (this.hasClass('social-link')) {
window.location = this.href;
} else {
$('html, body').animate({scrollTop: $(hash).offset().top }, 2150, function(){ });
}
});
});
I have a navbar at the site http://deliciousproductions.com.au and the href links in the navbar don't seem to work, the href stuff for #about works but not for actual links like home.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Delicious Productions</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT</li>
<li>RECIPES</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
I feel like it should just be working but maybe this script is interfering because of the onclick?
$(document).ready(function(){
// Add smooth scrolling to all links in navbar
$(".navbar a").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1600, 'easeInOutCubic', function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
})
cheers, or the prevent default?
You are right the $(".navbar a") selector selects all your link, and prevents the default behaviour event.preventDefault();
Try adding a class scroll to the a anchor tag and modify your selector to $(".navbar a.scroll") selector.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Delicious Productions</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li><a class="scroll" href="#about">ABOUT</a></li>
<li>RECIPES</li>
<li><a class="scroll" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar
$(".navbar a.scroll").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1600, 'easeInOutCubic', function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
})
I'm using the Bootstrap Navbar on a one-page website and each anchor is linked to a section on the page. I'm using a very simple javascript to smooth scroll to each section, however this somehow conflicts the collapse function of the navbar - when I click on a link it doesn't collapse anymore which is annoying. I first thought it might be a HTML problem (solved here: Bootstrap Navbar Collapse not closing on Click ) but figured out it is a JS problem - any ideas?
HTML:
<nav class="navbar navbar-default mainbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle hvr-bounce-to-bottom collapsed" data-toggle="collapse" data-target="#my-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="my-navbar-collapse">
<ul class="nav navbar-nav">
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link1" class="navelement">Link 1</a></li>
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link2" class="navelement">Link 2</a></li>
</ul>
</div>
</nav>
JAVASCRIPT:
var corp = $("html, body");
$(".navelement").click(function() {
var flag = $.attr(this, "href");
corp.animate({
scrollTop: $(schild).offset().top - 60
}, 1600, function() {
window.location.hash = flag;
});
return false;
});
you can use jQuery :not selector-utility
e.g.
$('a[href*=#]:not([href=#], [data-toggle=collapse])').click(function(){...})
or in your example:
var corp = $("html, body");
$(".navelement:not([data-toggle=collapse])").click(function() {
var flag = $.attr(this, "href");
corp.animate({
scrollTop: $(schild).offset().top - 60
}, 1600, function() {
window.location.hash = flag;
});
return false;
});
I am trying to get my navbar to auto collapse on click. Specifically when it is on a mobile device. I do not see why the below code will not work but I believe I maybe have the '.nav navbar-toggle a' wrong.
HTML
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="close">
<ul class="nav navbar-nav">
<li class="navtext">ABOUT</li>
<li class="navtext">SERVICES</li>
<li class="navtext">WORK</li>
<li class="navtext">CONTACT</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Java script (I added this code to the end of bootstrap.js)
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav.navbar-nav a').on('click', function(){
$("#close").click();
});
}
else {
$('.nav.navbar-nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
The website is speak-design.com
Thank to Hide Twitter Bootstrap navbar on click
I commented first:
('.nav navbar-nav a') should be ('.nav.navbar-nav a') see:
CSS rule to apply only if element has BOTH classes and you should apply your click
for closing on .navbar-collapse if i understand your question well
When i test the above i think i should work with the code shown below.
<script>
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav.navbar-nav a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.nav.navbar-nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
</script>
NB i think .collapse('hide'); make more sense (more readable) than doing click although the effect will be the same maybe.
Its already doing it. Make sure you added the viewport in your metatags
<meta name="viewport" content="initial-scale=1">
Reference