I've searched and searched and can't seem to find my issue. I apologize if this is answered somewhere else. I inherited a "simple" site that needs scrollspy implemented and I can't get anything to work for the life of me.
Here are some excerpts from the code:
HTML NAV
<div class="row" style="width:100%" id="topnav">
<nav id="anchored" role="navigation">
<ul class="nav top-menu fade-in">
<li class="mission_anchor">SERVICES</li>
<li class="stories">ABOUT</li>
<li class="supporters_anchor">REQUEST DEMO</li>
</ul>
</nav>
</div>
<br />
SAMPLE OF FIRST "SERVICES DIV"
<section class="module content">
<div id="services" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>HOW SUPER AGENT MARKETING CAN HELP YOUR AGENTS</h1>
<br />
JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#topnav").on("activate.bs.scrollspy", function(){
alert('smomething happened')
});
$('#topnav').affix({
offset: {
top: 0
}
});
$('body').scrollspy({ target: '#topnav' });
<br />
Full demo site can be found here:Demo Site
Any help would be greatly appreciated as I'm sure it is probably something minor I am overlooking but haven't been able to find in 6 hours of playing with it.
in order to use bootstrap scrollspy your navigation have to be as bootstrap's navigation .
build your NAV as this link below and it will work
http://getbootstrap.com/components/#navbar
try the below example.
$(function(){
$('body').scrollspy({ target: '#myNav' })
})
section > div[id]{
height:800px;
padding-top:50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav id="myNav" class="navbar navbar-default navbar-fixed-top">
<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">
<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="#">Brand</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">
<li class="mission_anchor active">SERVICES</li>
<li class="stories">ABOUT</li>
<li class="supporters_anchor">REQUEST DEMO</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="module content">
<div id="services" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>Services Section</h1>
</div>
</div>
<section>
<section class="module content">
<div id="about" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>About Section</h1>
</div>
</div>
<section>
<section class="module content">
<div id="demo" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>Demo Section</h1>
</div>
</div>
<section>
Related
This is my first post here so please don't be mad at me if I'm doing something wrong.
Here is the case: Trying to add bootstrap 3 scrollspy functionality into my code on codepen and it's basically not working. Tried different solutions from stackoverflow, etc. and nothing helps.
Is there any good person who can take look into my code?
HTML:
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Projects</li>
<li>Contact </li>
</ul>
</nav><!-- navbar -->
<div data-spy="scroll" data-target="#nav" data-offset="0">
<h3 class="text-center" id="about">about</h3>
<h3 class="text-center" id="projects">projects</h3>
<h3 class="text-center" id="contact">contact</h3>
</div>
CSS:
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
In codepen settings tab I included:
CSS:
bootstrap.min.css
JS:
jquery.min.js
bootstrap.min.js
Here is a link to my codepen: https://codepen.io/PatrykJamroz/full/RMZJva
First thing is you need to initiate the body and not a div tag so your body should have the following:
<body data-spy="scroll" data-target=".navbar" data-offset="0">
And not the:
<div data-spy="scroll" data-target="#nav" data-offset="0">
because the body is the thing that the scroll event is attached to so initiating a div does no good unless you are scrolling with that div.
Next you need to attach it the the .navbar or the nav itself would be the best practice. And also I see that you are using jquery 3 and this may cause an issue with bootstrap 3 so you may want to switch to jquery 2.
I think that you don't really undestand how bootstrap scrollspy actually work. You have to make the 'body' as the main scrollspy container! take a look:
$('body').scrollspy({
target: '#bs-example-navbar-collapse-1'
})
$('#scrollDiv').on('activate.bs.scrollspy', function () {
//Do stuff if there is a new event in scrollspy
})
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
<div id="scrollDiv" class="container-fluid" data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Projects</li>
<li>Contact </li>
</ul>
</nav><!-- navbar -->
<div>
<div id="about" class="col-md-12">
<h3 class="text-center">about</h3>
<div class="row">
<div class="col-sm-6">
<img class="img-responsive center-block" src="https://thumb1.shutterstock.com/display_pic_with_logo/2877733/272163653/stock-photo-happy-young-man-wearing-glasses-and-smiling-as-he-works-on-his-laptop-to-get-all-his-business-272163653.jpg" alt="not me">
</div>
<div class="col-sm-6">
<h4>Mechanical Designer</h4>
<p><span><i class="fa fa-user-circle"></i></span> An open-minded, creative and focused on new tech solutions</br>
<span><i class="fa fa-tv"></i></span> Excellent knowledge of such tools as SolidWorks and SolidWorks Simulation</br
<span><i class="fa fa-check"></i></span> FCT, ICT, EOL test systems, rack cabinets, inline systems and sheet metal</br>
<span><i class="fa fa-language"></i></span> English language advanced both speaking and writing</br>
<span><i class="fa fa-graduation-cap"></i></span> AGH UST graduate - Master of Engineering in Mechanical Engineering</br>
<span><i class="fa fa-coffee"></i></span> Automotive, active lifestyle, IT</p>
</div>
</div>
</div>
</div> <!-- About section -->
<hr>
<div id="projects" class="col-md-12">
<h3 class="text-center">projects</h3>
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="http://www.hawkridgesys.com/blog/wp-content/uploads/2018/01/01-Improving-Assembly-Performance-with-SpeedPak.png" alt="dron">
1st well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://embedwistia-a.akamaihd.net/deliveries/678ea92af801e6c2d37e149980d62bcc38d7770b.jpg" alt="engine">
2nd well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
3rd well
</div>
</div>
</div> <!-- Projects 1st row -->
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
4th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
5th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
6th well
</div>
</div>
</div> <!-- Projects 2nd row -->
</div>
<hr>
<div id="contact" class="col-md-12">
<h3 class="text-center">contact</h3>
<h3 class="text-center">Don't hesitate to contact me at:</h3>
<div class="col-xs-12" style="height:5px;"></div>
<h4 class="text-center"><span><i class="fa fa-envelope"></i></span> jamroz.patryk#gmail.com</h4>
<h3 class="text-center">...or just fill the form below!</h3>
<div class="col-xs-12" style="height:5px;"></div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">E-mail</span>
<input type="text" class="form-control" placeholder="Your E-mail address" aria-describedby="basic-addon1">
</div> <!-- email input-->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Name</span>
<input type="text" class="form-control" placeholder="Your name" aria-describedby="basic-addon1">
</div> <!-- name input -->
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">Message</span>
<input type="text" class="form-control" placeholder="Your message to me" aria-describedby="basic-addon1">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send!</button>
</span>
</div> <!-- message input -->
</div>
<div class="col-xs-12" style="height:50px;"></div>
<div class="panel-footer text-center">Made by Patryk Jamróz. March 2018.</div>
</div><!-- Container fluid -->
In that way it work! Good luck, bye.
u can try whit jquery
$("#yourtarget").click(function() {
$('html, body').animate({
scrollTop: $("#yourDiv").offset().top
}, 2000);
});
I tried this link solution but not able to conclude. I am new to this..tried everything but all vain I want something like this what to do
check this How to close collapse panel when we click link inside the panel in bootstrap
my code:
<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>
</button>
<!-- ***** -->
<!-- <a href="#" class="btn btn-default" data-toggle="collapse" href="#collapse1">
<i class="material-icons" style="font-size:53px;">menu</i>
</a> -->
<!-- ****** -->
<div class="navbar navbar-default navbar-static-" role="navigation">
<div class="container">
<button class="btn btn-default" data-toggle="collapse" data-target="#menu"><span class="material-icons" style="font-size:40px;">menu</span></button>
</div>
</div>
</div>
<!-- Menu -->
<div id="menu" class="panel panel-default panel-collapse collapse bottom padding">
<div class="container collapse navbar-collapse" id="myNavbar">
<ul class="bottom padding list-inline">
<li>ABOUT US / </li>
<li><a href="#services" >SERVICES</a> / </li>
<li>HOTELS / </li>
<!--<li>PRICING</li>-->
<li>CONTACT</li>
</ul>
<div class="container bottom padding">
<div class="row">
<div class="text-center">
<p class="white">Some of our partner hotels</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="tile">
<h3 class="title">Hilton Grosvenor House</h3>
<p>The definition of luxury</p>
</div>
</div>
<div class="col-sm-4">
<div class="tile">
<h3 class="title">Marriott</h3>
<p>Service paradise</p>
</div>
</div>
<div class="col-sm-4">
<div class="tile">
<h3 class="title">Ramada</h3>
<p>For the business traveller</p>
</div>
</div>
</div>
</div>
</div>
<div class="text-center padding padding">
<img src="images/TTB_Logo_small.png"/>
<h1>Tourists Travel Bureau UK Limited</h1>
</div>
</div>
and javascript:
<script type="text/javascript">
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$("button.navbar-toggle").click();
}
});
});</script>
To the link or the button give
data-target = "#idofthepanel"
Refer to the panel using id instead of class
Also,
You have given data-target="#mynavbar" , but navbar is a class and not an id.
I have looked through the numerous questions others have posed about an accordion style collapsable set of panels but I haven't been able to find one in which the panels remain separate and do not retain a header of sorts.
I am looking to have numerous buttons on one side and on the other, a panel to be displayed when a button is clicked. I want only one panel to ever be displayed at a time. I am using BootStrap CSS Framework (love it).
I would greatly appreciate it if someone could please help me fine tune my code. I do not understand where I have gone wrong.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid main">
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a data-toggle="collapse" data-target="#overview" aria-expanded="true" aria-controls="overview" data-parent="#accordion">Overview</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view1" aria-expanded="false" aria-controls="view1" data-parent="#accordion">View 1</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view2" aria-expanded="false" aria-controls="view2" data-parent="#accordion">View 2</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default collapse in" id="overview">
<div class="panel-heading">
<h3 class="panel-title">Overview</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default collapse" id="view1">
<div class="panel-heading">
<h3 class="panel-title">View 1</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default collapse" id="view2">
<div class="panel-heading">
<h3 class="panel-title">View 2</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Just add one more layer of panels
<div class="container-fluid main">
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a data-toggle="collapse" data-target="#overview" aria-expanded="true" aria-controls="overview" data-parent="#accordion">Overview</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view1" aria-expanded="false" aria-controls="view1" data-parent="#accordion">View 1</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view2" aria-expanded="false" aria-controls="view2" data-parent="#accordion">View 2</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel panel-default collapse in" id="overview">
<div class="panel-heading">
<h3 class="panel-title">Overview</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel panel-default collapse" id="view1">
<div class="panel-heading">
<h3 class="panel-title">View 1</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel panel-default collapse" id="view2">
<div class="panel-heading">
<h3 class="panel-title">View 2</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You might have to adjust the classes for the inner content if you want to get rid of any extra padding / margin. The only thing you have to know is that bootstrap hides the children of any panels under the data-parent unless they match the data-target of what was just clicked.
I am using DMP as the back end to my webpage, but am having trouble getting a modal to pop up on a button click event. I have been over the bootstrap docs, made sure I load jQuery before bootstrap, and made sure I have a data-target set up with a '#' included (basically all of the stuff here on stack overflow). Here is my code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>HomePage</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></link>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/"><span class="badge">new!</span>Colonial Heritage Foundation</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Browse</li>
<li>Rent </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li data-toggle="modal" data-target="#loginModal">Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 left-nav">
<ul>
<li>about</li>
<li>contact</li>
<li>terms</li>
</ul>
</div>
<div class="col-md-10">
<%block name="content">
</%block>
</div>
</div>
</div>
<div class="modal hide" id="loginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
header
</div>
<div class="modal-body">
body
</div>
<div class="modal-footer">
footer
</div>
</div>
</div>
</div>
<footer>
<div class="well">Blake Wight</div>
</footer>
I took out some of the DMP stuff so that it would be just the html.
Any idea what I am doing wrong?
I tried to implement a vertical navigation with twitter bootstrap 3.0 that collapses automatically.
The basics work (window size small = menu at the top like it should be), but the problem is that it is not collapsed as it is if I use the default navbar features in bootstrap.
<div class="container-fluid">
<div class="row">
<div class="navbar-brand">
BABSI
</div>
<button type="button" class="btn navbar-btn" data-toggle="collapse"
data-target="#sidebar">TOOGLE
Toggle navigation
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row">
<header id="sidebar" class="col-md-2 collapse">
<div class="row">
<!-- generates ul structure -->
<nav:primary class="nav navbar-inverse nav-stacked" />
</div>
</header>
<section id="content" class="col-md-10">
<div class="row"></div>
<div class="panel panel-default">
<div class="panel-heading">
<g:layoutTitle />
</div>
<div class="panel-body">
<g:layoutBody />
</div>
</div>
</section>
</div>
</div>
You need the .navbar-collapse class in your nav since that's the one that is set up to collapse at the given breakpoint.
I made some changes in your markup to accommodate that and also added a .navbar container so you can easily use the .navbar-toggle class on the button:
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-brand">
BABSI
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar .navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row">
<header id="sidebar" class="col-md-2">
<div class="collapse navbar-collapse">
<!-- generates ul structure -->
<nav:primary class="nav navbar-inverse nav-stacked" />
</div>
</header>
<section id="content" class="col-md-10">
<div class="row"></div>
<div class="panel panel-default">
<div class="panel-heading">
<g:layoutTitle />
</div>
<div class="panel-body">
<g:layoutBody />
</div>
</div>
</section>
</div>
</div>
To remove unwanted styles and since you're not using the default navbar-collapse structure you need to add this to your CSS
//remove background and border from navbar
.navbar-default{
background: none;
border: 0;
}
.navbar-collapse{
padding: 0;
}
//override width:auto of navbar-collapse
#media (min-width:768px) {
.navbar-collapse {
width: 100%;
}
}
Here's a demo fiddle with the changes
Try this.
<script>
$('.navbar-collapse a').click(function(){
$(".navbar-collapse").collapse('hide');
});
</script>