Any value I set to data-offset for scrollspy does not work at all.
Here are the relevant html, css, and js code:
HTML
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#"><strong>YOUNG'S PORTFOLIO</strong></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right enlargeItem">
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS
body {
background-color: gray;
padding-top: 110px;
data-spy='scroll';
data-target='.navbar';
data-offset='';
position: relative;
}
JS
$('body').scrollspy();
When I scroll to target area where a tag is defined (#aboutBox, #portfolioBox, #contactBox), it does highlight the appropriate list item.
However, it is off a bit, so I wanted to change the offset by changing the data-offset but changing the data-offset does not do anything.
Here is the link to the codepen if someone wants to take a look at the whole thing
Argh. Couple things wrong with my code.
I was trying to set attributes using CSS! WOW rookie mistake. I need some sleep.
I was using navbar-fixed-top class. So I had to manually offset by 150px.
I applied this to my javascript:
$("body").attr({
"data-spy": "scroll",
"data-target": ".navbar"
}).scrollspy({
offset: 150
});
Come across this thread as i am looking to find out if you can have a negative value on data-offset.
In response to this post You don't have to add any extra JS or CSS for scrollspy to work it's all bundled with bootstrap, you would just add the attributes to the body tag. ref: https://www.w3schools.com/bootstrap4/bootstrap_scrollspy.asp
<body data-spy="scroll" data-target=".navbar" data-offset="150">
Try this code :
$(document).ready(function () {
offset = 10; // get extra padding
nav_top = $("#tsnav"); // get the top navbar hieght
side_nav = $("#cve_info") // target nav
nav_height = nav_top.outerHeight() + offset; // actual height from top where content go and fixed
side_nav.find("a").on('click', function () {
let $el = $(this);
id = $el.attr("href");
$('html, body').scrollTop( $(id).offset().top - nav_height);
return false;
})
});
Related
I've got a problem with my Laravel site.
It doesn't load any JS. The Collapse of my navbar and the auto-scroll function don't work at all. It's like it doesn't load the JS at all. But I don't get any errors and the hyperlinks are fine. I can load the files in my Browser without any problem. Only the functionality doesn't work.
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="wrapper" id="wrapper">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
#include('layouts.nav')
</nav>
the Navbar file
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Dr. Geiger</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav navbar-right">
<li>Welcome</li>
<li>Öffnungszeiten</li>
<li>Unsere Schwerpunkte</li>
<li>Unsere Arztpraxis</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
And the smoothscroll.js file
$(document).ready(function() {
// Add scrollspy to <body>
$('body').scrollspy({
target: ".navbar",
offset: 50
});
// Add smooth scrolling on all links inside the navbar
$("#navbar-collapse-main a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// 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 (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I am trying to create a design using bootstrap which has a fixed top navbar, 2 columns below that. The first column has a fixed top div with full parent width and more content beneath it which can scroll(the fixed div and navbar cant). The second column has an image which covers the whole column and nothing more.
I have done the following:
<nav class="navbar navbar-default navbar-fixed-top black">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#">OWOL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>EVENTS</li>
<li>SPONSORS</li>
<li>DASHBOARD</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid" style="margin-top: 80px;">
<div class="row">
<div class="col-md-8" id="content">
<div class="row" id="head-section">
<div class="col-md-10 text-center">
<h1 class="red">MEGA LEAGUE</h1>
<h4>FOOTBALL</h4>
</div>
<div class="col-md-2 text-right" style="padding-top: 20px;">
EDIT DETAILS
</div>
</div>
</div>
<div class="col-md-4">
fixed sidebar
</div>
</div>
</div>
With this little JS:
$(function() {
var new_width = $('#content').width();
$('#head-section').width(new_width);
});
Here's some relevant CSS:
#head-section {
position: fixed;
top: 80px;
padding-left: 50px;
padding-bottom: 20px;
padding-right: 50px;
box-shadow: 0 0 3px #000;
width: 100%;
background: #fff;
z-index: 2;
}
What happens is this:
As you can see the text "fixed sidebar" is going behind the fixed div(#head-section). That's because JS is setting its width as 1001px which is wrong according to chrome's inspect element which tells me its just 900px.
What am I doing wrong and how should I solve it?
Here's the bootply: http://www.bootply.com/0xIGx67IzM
Ok so there are two way to resolve your problem
JQuery Solution
Change the width with outerWidth
$(function() {
var new_width = $('#content').outerWidth();
$('#head-section').outerWidth(new_width);
});
CSS Solution
just replace width:100% width width:inherit in #head-section
#head-section {
width: inherit;
}
JQuery Example
CSS Example
You're setting your #head-section width equal to the width of the parent and then you're adding 100px of padding to it (50px to each side).
See this link for more info: http://quirksmode.org/css/user-interface/boxsizing.html
With standard positioning (position:static; or position:relative;) if you were to set your #head-section to {display:block;} (omitting the width:100%) that would automatically set it to fill 100% of the available horizontal space, and then your padding would push in instead of out.
In this case, however, because you're using position:fixed, your easiest solution would be to use your existing javascript and html (still removing the width:100% from your #head-section properties), but wrap the #head-section in another container element (perhaps an article for the sake of code legibility?)
From there you can update your javascript to:
$(function() {
var new_width = $('#content').width();
$('article').width(new_width);
});
See fiddle: https://jsfiddle.net/znhws64p/1/
How can I create a Pjax that can have multiple containers? I tried this Pjax on this link:
https://github.com/defunkt/jquery-pjax/blob/master/README.md
and this is my code:
$(document).pjax('a', '#pjax-container, #pjax-navbar');
but it doesn't work.
then I tried this code:
$(document).pjax('a', '#pjax-container');
$(document).pjax('a', '#pjax-navbar');
and it doesn't work either. It just loads the last one.
How do I make it work?
this is my HTML
<div class="wrap">
<nav id="w0" class="navbar-inverse navbar-fixed-top navbar" role="navigation" id="pjax-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-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="/josh/cms_template/backend/web/">My Company</a></div>
<div id="w0-collapse" class="collapse navbar-collapse">
<ul id="w1" class="navbar-nav navbar-right nav">
<li class="active">Home</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="pjax-container">
<div class="site-index">
this is my content
</div>
</div>
</div>
all i want is when i go to another page, only pjax-container will changing.
i already make it. but the navigation bar is not changing.
Pjax doesn't have multiple containers.
To copy the same response to other pjax container, you can use pjax complete event handler like this.
Remove/disable existing pjax code from your page:
//Remove Code
//$(document).pjax('a', '#pjax-container');
//$(document).pjax('a', '#pjax-navbar')
//$(document).pjax('a', '#pjax-container, #pjax-navbar');
// Add this Code
$(document).on('pjax:complete', function(event) {
//This code will copy #pjax-container container's response
// to #pjax-navbar when event is completed.
$('#pjax-navbar').html( $('#pjax-container').html() );
});
You could add two links with same href but different id.
And attach pjax to each of them:
$(document).pjax('a#pjax-link-container', '#pjax-container');
$(document).pjax('a#pjax-link-navbar', '#pjax-navbar');
$(document).pjax('a', '#pjax-container');
$(document).on('pjax:clicked', function(options) {
$.pjax.reload('#pjax-container', {
fragment: '#pjax-container',
timeout: 5000,
scrollTo: false
})
});
I have a Bootstrap navbar that collapses when shrunk and drops down as a menu when the toggle button is tapped/clicked. However, once open, it stays open until one clicks the toggle button again. Is there any way to close it automatically when the user A) clicks outside the menu area, and B) scrolls the page up or down on the mobile device? Here's what the navbar looks like when collapsed:
And this is the dropdown:
I need the dropdown to collapse when the yellow area or any menu item is clicked (except the search box). So far, my JS looks like this:
// prevent search box from vanishing upon click in responsive mode
$('input.form-control').click(function(e) { e.stopPropagation(); });
// re-collapse nav dropdown menu after selection (in responsive mode)
$('.navbar-fixed-top').click('li', function() {
$('.navbar-collapse').collapse('hide');
});
// close drop-down nav when user clicks outside
$(document).ready(function () {
function CloseNav() {
$(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse");
$(".navbar-toggle").stop().removeClass('collapsed');
}
$('html').click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
CloseNav();
}
});
});
And here's the relevant HTML snippet:
<!-- Nav bar -->
<div class="navbar navbar-default navbar-fixed-top top-nav" role="navigation">
<div class="container-fluid">
<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="#"><img src="bootstrap/img/gray_logo.png" class="site-logo"><span class="site-name-first">Always</span><span class="site-name-second">Spanish</span></a>
</div>
<!-- Navbar links -->
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<!-- Search box start -->
<form class="navbar-form navbar-right search-box" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- Search box start -->
<ul class="nav navbar-nav pull-right">
<li ng-class="{ active: isActive('/about')}">About</li>
<li ng-class="{ active: isActive('/blog')}">Blog</li>
<li>Premium</li>
<li>Books</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Of the 3 JS scripts, the first two seem to work fine. It's just the last one that doesn't. Also, I don't yet know how to field the scroll event at all. I am sure I'm doing something very silly here. Please help!
listen for all clicks on window and check if there is no parents here with class of navbar. you can use closest for that
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
Polyfill: https://github.com/jonathantneal/closest
I've made a sticky/fixed-to-top navbar with Bootstrap. It's responsive so the nav options turn into a hamburger menu when the screen is below a set size. I've also added JavaScript from a tutorial so that it scrolls nicely.
It is working fine except in tablet/phone mode when the navbar stops being fixed to the top and becomes static instead. See here for the differences/what it should be like. I'm not sure what I've done wrong.
I've tried many versions/tutorials, sometimes I get it to be sticky in both situations but without the hamburger menu expanding etc. This is the best I've got it so far basically. Below is the HTML:
<div class="header">
<div class="container">
<nav class="navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Company
</div>
<!--/.navbar-header-->
<div id="main-nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Contact</li>
<li>About</li>
<li>Testimonials</li>
</ul>
</div>
<!--/#main-nav.navbar-collapse-->
</nav>
<!--/.navbar-->
</div>
<!--/.container-->
and the javascript:
<script type="text/javascript">
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 50;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
Sorry if I've explained anything badly. I attempted the navbar about a month ago and then gave up, so hopefully I've not forgotten anything.
Include 'navbar-fixed-top' class to the nav tag ie
<nav class="navbar-default navbar-fixed-top" role="navigation">
It will work fine.