Bootstrap 3 scroll spy - javascript

Hi I'm trying to get scroll spy working in my navigation but it's not
Here's a link to my site: http://www.saracook.coffeecup.com
Here's how I implemented it:
<body class="body" data-spy="scroll" data-target=".navbar-collapse collapse">
<div class="main">
<!--HOMEPAGE-->
<section id="home_page">
<div class="home_page">
<!--NAVBAR-->
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" 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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Seems scrollspy works good, but there is some trouble with prettyPhoto() plugin. Maybe you forget to include javascript for this plugin on the page.

Related

Trigger alert on clicking of second li

I am trying to show alert upon clicking of second li in navigation bar under element homenav. You can checkout the complete code on codepen
var linkButton = document.getElementById('#homenav li:nth-child(2) a');
if(linkButton) {
linkButton.addEventListener('click', function() {
alert('Test');
});
}
HTML
<div id="homenav">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Table Ranking
</li>
<li>
Blog
</li>
</ul>
</div>
</div>
</div>
</div>
Document#getElementById takes the ID of the element to locate.
If you want to use a selector, try Document#querySelector:
const linkButton = document.querySelector('#homenav li:nth-child(2) a');
if(linkButton) {
linkButton.addEventListener('click', function() {
alert('Test');
});
}
<div id="homenav">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Table Ranking</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
</div>

Bootstrap Navbar wont play animation

I am having a bit of trouble getting my animation to play when my Bootstrap 3.3.7 navbar collapses upon scrolling from the top of the page. If I change the size of other divs in my navbar in Sublime while BrowserSync is active, it will show the animation but still doesn't work when I scroll. The example I followed was:
http://jsfiddle.net/Filo/m7yww8oa/
and recreating the problem using much of my existing code is:
<nav class="navbar navbar-default navbar-fixed-top">
<div>
<div class="navbar-header" id="header">
<button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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>
<div class="navbar-brand" id="title"><img id="logo" src="images/logo.jpg" /></div>
</div>
<div class="collapse navbar-collapse" id="collapsable-nav">
<ul id="nav-list" class="nav navbar-nav navbar-right visible-xs visible-sm visible-md visible-lg">
<li>About US<br><i class="fas fa-users visible-md visible-lg"></i></li>
<li>Why Us<br><i class="fas fa-question-circle visible-md visible-lg"></i></li>
<li>Contact<br><i class="fas fa-envelope visible-md visible-lg"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
</header>
<div class="container-fluid" id="main">
<img src="images/goldwire1.jpg" id="goldwire1" />
</div>
<div class="container" id="services">
</div>
<div class="container" style="margin-top: 100px;">
<div class="fifty" style="float: right;"><img src="images/probe.jpg" id="probe"></div>
</div>
<div class="info" style="color: #f5f5dc; background-color: #003366;">
</div>
<script src="script.js"></script>
https://jsfiddle.net/7rqv3m8r/
I can't seem to figure out why my animation won't play. I can see in my dev tools that .shrink is added once I scroll off the top and the webkit animation is active. Any help is appreciated, thank you for taking time to check this out.

BootStrap navbar not showing

I was working on the tutorial to build a simple website, when I tried running the bootstrap template, it does not seem to show up
The screenshot of the website
I've included the bootstrap.js file as well as the jquery, here's my code to take a look at:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="/css/bootstrap.css">
<script src ="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Kevo's Website</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<h1>Welcome</h1>
<p>This is the welcome page</p>
</div>
</div><!-- /.container -->
</body>
</html>
From your screenshot, I would guess that /css/bootstrap.css is returning a 404, or you are using the browser's ability to load HTML from the file system (by double clicking on your index.html file) in which case the reference /css/bootstrap.css is looking for a folder on your root drive with the path /css/bootstrap.css. If you have the css file int he same folder just drop the /css/ and it should work.
Looks fine to me. As Jason mentioned, I think your local bootstrap file isn't being called correctly.
.row {
margin-top: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Kevo's Website</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<h1>Welcome</h1>
<p>This is the welcome page</p>
</div>
</div><!-- /.container -->
Looks like your css/boostrap is not linked correctly, if your doing this on your local machine try view source and click the css path if its there. and jquery and boostrap.js must be place before the body tags ends.
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Kevo's Website</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<h1>Welcome</h1>
<p>This is the welcome page</p>
</div>
</div><!-- /.container -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

jquery fadein on buttonclick

I'm making a Bootstrap site and I want jQuery to fade in my text on a button click. This is my code:
$(document).ready(function() {
$('div.hidden').fadeIn(1000).removeClass('hidden');
});
$(#homebutton).onclick(function() {
$('#homebutton.hidden').fadein(1000).removeClass('hidden');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<nav class="navbar navbar-inverse">
<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>
<a class="navbar-brand" href="#">J&J Services</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Information</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<section class=" section0 homecontent col-md-12">
<div class="container-fluid">
<div class="hidden" style="display:none;">
<h1>welcome to J&J services.
<hr>
<button id="homebutton" class="btn btn-success btn-large">
click here to learn about us today.
</h1>
</div>
</div>
</section>
<section class="section1 information ">
<div class="container-fluid hidden"></div>
</section>
</div>
</section>
I'm new to jQuery and I don't know what I did wrong. Thanks in advance,
With revised HTML and jquery targets:
$(document).ready(function() {
$('.section0 .hidden').fadeIn(1000).removeClass('hidden');
});
$('#homebutton').on('click', function() {
$('.section1 .hidden').fadeIn(1000).removeClass('hidden');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<nav class="navbar navbar-inverse">
<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>
<a class="navbar-brand" href="#">J&J Services</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Information
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section class="section0 homecontent col-md-12">
<div class="container-fluid">
<div class="hidden" style="display:none;">
<h1>welcome to J&J services.
<hr>
<button id="homebutton" class="btn btn-success btn-large">
click here to learn about us today.
</button>
</h1>
</div>
</div>
</section>
<section class="section1 information ">
<div class="container-fluid hidden" style="display:none;">Information</div>
</section>
</section>
I think you wanna fade in section1 text when u click the button, update like this:
$('#homebutton').on('click', function() {
$('.container-fluid').fadeIn(1000).removeClass('hidden');
});

bootstrap menu not hiding after click the button?

This is the website here
When we view it minimized mode, the menu toggles ON after clicking the button, but when we click the button gain, it does not toggle off?
How to make this work ?
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="index.html">Click<span>Desti</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
<li><b>Show Categories</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</li>
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

Categories