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;
});
});
})
Related
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/
<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 am brand new to bootstrap and I have come to a problem.
I want to be able to redirect the user from the navbar to either sign in or log in to the website. However, when I have following html, the browser recognize the correct url redirect. but when you click on it, no action happens. If I put the statement outside of the navbar, it redirect fine. Am I missing some setting for navbar? Thanks for any help you can give.
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<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="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT</li>
<li>CONTACT</li>
<li>SIGN UP</li>
<li>LOG IN</li>
</ul>
</div>
</div>
</nav>
I also have this script for the navbar. Not sure if this makes any difference.
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").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
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, 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